如何使分组的ListView标头在iOS中正确浮动（不发粘）？

Question

I have a grouped ListView (Xamarin Forms). I need to make group headers floating (not sticky). On Android everything works the way I want, but on iOS there is a problem.

I tried to use this: https://forums.xamarin.com/discussion/34696/listview-grouped-style-on-ios

In this case headers are floating, but it looks like it creates new control and the previous one doesn't disappear. I mean that I see one list which overlaps another one.

I can set the background of the top list to some color. Then the list that is behind will be not visible, but it is not the solution for this problem. Can somebody explain me how to fix this?

Answer 1

A simple solution to this problem is to use an iOS platform-specific feature for Xamarin.Forms that allows you to easily set the ListView Group Header Style in XAML (or code behind) in one line as follows:

<ContentPage ...
             xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core">
    <StackLayout Margin="20">
        <ListView ios:ListView.GroupHeaderStyle="Grouped">
            ...
        </ListView>
    </StackLayout>
</ContentPage>

The 'Grouped' enumeration indicates that header cells do not float when the ListView is scrolled. See https://docs.microsoft.com/en-us/xamarin/xamarin-forms/platform/ios/listview-group-header-style for further details.

Answer 2

Did you refer the doc from here ?

If you want to make group headers floating you just need to set the IsGroupingEnabled as true .

in xaml

<ListView x:Name ="listView" IsGroupingEnabled="true" GroupDisplayBinding="{Binding LongName}" >
   <ListView.ItemTemplate>
    <DataTemplate>
      <TextCell Text="{Binding Name}" Detail = "{Binding Comment}" />
    </DataTemplate>
   </ListView.ItemTemplate>
</ListView>

in code behind

public partial class GroupedListXaml : ContentPage
{
    private ObservableCollection<GroupedVeggieModel> grouped { get; set; }
    public GroupedListXaml ()
    {
     InitializeComponent ();

     grouped = new ObservableCollection<GroupedVeggieModel> ();
     var veggieGroup = new GroupedVeggieModel () { LongName = "vegetables" };
     var fruitGroup = new GroupedVeggieModel () { LongName = "fruit" };

     veggieGroup.Add (new VeggieModel () { Name = "celery", Comment = "try ants on a log" });
     veggieGroup.Add (new VeggieModel () { Name = "tomato",  Comment = "pairs well with basil" });
     veggieGroup.Add (new VeggieModel () { Name = "zucchini", Comment = "zucchini bread > bannana bread" });
     veggieGroup.Add (new VeggieModel () { Name = "peas",  Comment = "like peas in a pod" });
     veggieGroup.Add (new VeggieModel () { Name = "celery", Comment = "try ants on a log" });
     veggieGroup.Add (new VeggieModel () { Name = "tomato",  Comment = "pairs well with basil" });
     veggieGroup.Add (new VeggieModel () { Name = "zucchini", Comment = "zucchini bread > bannana bread" });
     veggieGroup.Add (new VeggieModel () { Name = "peas",  Comment = "like peas in a pod" });
     veggieGroup.Add (new VeggieModel () { Name = "celery", Comment = "try ants on a log" });
     veggieGroup.Add (new VeggieModel () { Name = "tomato",  Comment = "pairs well with basil" });
     veggieGroup.Add (new VeggieModel () { Name = "zucchini", Comment = "zucchini bread > bannana bread" });
     veggieGroup.Add (new VeggieModel () { Name = "peas",  Comment = "like peas in a pod" });

     fruitGroup.Add (new VeggieModel () {Name = "banana", Comment = "available in chip form factor"});
     fruitGroup.Add (new VeggieModel () {Name = "strawberry", Comment = "spring plant"});
     fruitGroup.Add (new VeggieModel () {Name = "cherry",Comment = "topper for icecream"});
     fruitGroup.Add (new VeggieModel () {Name = "banana", Comment = "available in chip form factor"});
     fruitGroup.Add (new VeggieModel () {Name = "strawberry", Comment = "spring plant"});
     fruitGroup.Add (new VeggieModel () {Name = "cherry",Comment = "topper for icecream"});
     fruitGroup.Add (new VeggieModel () {Name = "banana", Comment = "available in chip form factor"});
     fruitGroup.Add (new VeggieModel () {Name = "strawberry", Comment = "spring plant"});
     fruitGroup.Add (new VeggieModel () {Name = "cherry",Comment = "topper for icecream"});


     grouped.Add (veggieGroup);
     grouped.Add (fruitGroup);
     listView.ItemsSource = grouped;
  }
}

in ViewModel

 public class VeggieModel
 {
  public string Name { get; set; }
  public string Comment { get; set; }       
  public VeggieModel ()
  {
  }
 }

  public class GroupedVeggieModel : ObservableCollection<VeggieModel>
  {
    public string LongName { get; set; }
  }

If I misunderstood your issue.You can provide a screenshot or gif which contains your issue.It is helpful to solve your problem.