ListView inside vertical StackLayout overlaps views above it

Hi,

In an app oriented for tablets, I have a ContentPage inside a TabbedPage.
It contains a single StackLayout containing an AbsoluteLayout, the a BoxView (using as separator), then a ListView on the bottom.
It all looks nice before adding the ListView, but when I add it, it overlaps the views above it messing up the entire page.

Here are some bits of my code:

<StackLayout Spacing="3">
  <AbsoluteLayout  BackgroundColor="Green" ... />
  <BoxView HeightRequest="2" BackgroundColor="DarkGray" Margin="15"/>

  <StackLayout Orientation="Horizontal">
    <Label Text="Phones"/>
    <Button Text="Add" Command="{Binding BindingContext.AddPhoneCommand, Source={Reference usersPage}}"/>
  </StackLayout>

  <ListView ItemsSource="{Binding Phones}" BackgroundColor="Blue">
    <ListView.ItemTemplate>
      <DataTemplate>
        <ViewCell>
          <StackLayout Orientation="Horizontal">
            <xf:AutoCompleteView 
                PlaceHolder="Type" 
                Text="{Binding PhoneType}" 
                ItemsSource="{Binding BindingContext.PhoneTypesList, Source={Reference usersPage}}"
                WidthRequest="150"/>
            <Entry 
                Placeholder="Number" 
                VerticalOptions="Start"
                Keyboard="Telephone" 
                Text="{Binding Number}" />
            <Button 
                Text="Remove" 
                VerticalOptions="Start"
                Command="{Binding BindingContext.RemovePhoneCommand, Source={Reference usersPage}}" 
                CommandParameter="{Binding}" />
          </StackLayout>
        </ViewCell>
      </DataTemplate>
    </ListView.ItemTemplate>
  </ListView>
</StackLayout>

So my question is:
1. Why is this happening?
2. What am I doing wrong?
3. How can I solve this?

Here's what the page looks like without the ListView:

And here's what happens if I uncomment the ListView:

Best Answer

Answers

Sign In or Register to comment.