CODEWITHSUNDEEP
xamarinxamarin.androidxamarin.forms
Brad Zacher
Brad Zacher

Reputation: 3263

ListView padding before and after items

My ListViews all add a huge amount of padding before and after their children.

For example I have the following ListView in my master

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:viewModel="clr-namespace:ViewModel;assembly=App"
             x:Class="Pages.Master"
             Title="Menu">
  <ContentPage.BindingContext>
    <viewModel:MasterViewModel />
  </ContentPage.BindingContext>

  <ListView ItemsSource="{Binding Pages}"
            ItemSelected="ListView_OnItemSelected"
            BackgroundColor="Red">
    <ListView.ItemTemplate>
      <DataTemplate>
        <ViewCell>
          <Label Text="S" BackgroundColor="White" />
        </ViewCell>
      </DataTemplate>
    </ListView.ItemTemplate>
  </ListView>
</ContentPage>

And it renders the following:

And as soon as you scroll just a little it'll reveal the first element (i.e. the top red space is equal to the height)

Similarly you can keep scrolling until the last item completely disappears (i.e. the bottom red space is equal to the height)

I don't change the properties/styling of ANY of the views in code - it's all done in the XAML, so why is there such a huge amount of space before and after?

Upvotes: 1

Views: 5574

Answers (1)

Brad Zacher
Brad Zacher

Reputation: 3263

It appears to be a problem with the rendering of ListView.Header and ListView.Footer

I added the following to my list view XAML and it removed the giant padding:

<ListView.Header>
  <StackLayout HeightRequest="0" />
</ListView.Header>
<!-- ItemTemplate -->
<ListView.Footer>
  <StackLayout HeightRequest="0" />
</ListView.Footer>

As this problem was affecting all of my list views, I chose to instead add it as a globally applied style in my App.xaml:

<Style TargetType="ListView">
  <Setter Property="Header">
    <Setter.Value>
      <StackLayout HeightRequest="0" />
    </Setter.Value>
  </Setter>
  <Setter Property="Footer">
    <Setter.Value>
      <StackLayout HeightRequest="0" />
    </Setter.Value>
  </Setter>
</Style>

Upvotes: 3

Related Questions