Xamarin forms: hide listview GroupHeader

1
votes

Is there a way to hide the groups headers of a listview in Xamarin forms ? I've tried to set the header height in the template but it doesn't works:

  <ListView ItemsSource="{Binding GroupedMenuItems}" SelectedItem="{Binding SelectedMenuItem}" SeparatorVisibility="None" IsGroupingEnabled="true">
          <ListView.GroupHeaderTemplate>
            <DataTemplate>
              <ViewCell Height="1">
              </ViewCell>
            </DataTemplate>
          </ListView.GroupHeaderTemplate>
          <ListView.ItemTemplate>
            <DataTemplate>
              <ImageCell Text="{Binding Title}" ImageSource="{Binding IconSource}" TextColor="#000000"/>
            </DataTemplate>
          </ListView.ItemTemplate>
        </ListView>

I only want to show separators between the groups.

2
listviewxamarinheaderxamarin.forms

2 Answers

3
votes

Yep! You need to set the HasUnevenRows to true on your ListView. Then set the header template to a ViewCell with height 0 with an empty grid or other element.

 <ListView ItemsSource="{Binding GroupedMenuItems}" SelectedItem="{Binding SelectedMenuItem}" SeparatorVisibility="None" IsGroupingEnabled="true" HasUnevenRows="True">
      <ListView.GroupHeaderTemplate>
        <DataTemplate>
          <ViewCell Height="0">
              <Grid/>
          </ViewCell>
        </DataTemplate>
      </ListView.GroupHeaderTemplate>
      <ListView.ItemTemplate>
        <DataTemplate>
          <ImageCell Text="{Binding Title}" ImageSource="{Binding IconSource}" TextColor="#000000"/>
        </DataTemplate>
      </ListView.ItemTemplate>
    </ListView>
0
votes

SuavePirate's answer may work for Android, but required a tiny change for me to get it to almost work on iOS. I had to change a ViewCell Height to 1 from 0. I know, it's weird, but, for whatever reason, it refuses to work otherwise.

With this small change, there was a still a 1 pixel high line separating groups from each other, which is not ideal, but good enough for most purposes. I tried to hide that line by placing a StackLayout inside the ViewCell and setting its BackgroundColor to "White". I also tried putting a BoxView inside the Grid and setting its Color to "White", but neither one of those approaches succeeded in hiding that 1 pixel high line.

Oh well, it's still much better than nothing.