0

How to keep the built-in Header of a ListView frozen to the top when scrolling vertically down through the ListView items?

Before flagging as duplicate: I tried to apply answers in Keep ListView.HeaderTemplate visible/static/sticky in UWP for Xamarin.Forms targeting Android without success.

Short code sample:

<ListView ItemsSource="{Binding MyList}"             
          HasUnevenRows="True"
          SeparatorVisibility="Default"
          CachingStrategy="RecycleElement">

    <ListView.Header>
        <Label HorizontalTextAlignment="Center"
               FontAttributes="Bold"
               Text="Header Title"/>
    </ListView.Header>
                
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Label Text="{Binding Name}"/>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>
Cfun
  • 8,442
  • 4
  • 30
  • 62
  • The default listview does not support fix header in top in Android, have a look at [this thread](https://forums.xamarin.com/discussion/72170/sticky-header-listview) may help. – nevermore Oct 05 '20 at 08:20
  • @JackHua-MSFT Maybe be it will be better that I move to a CollectionView – Cfun Oct 10 '20 at 22:19
  • Yes, collectionview maybe a better choice. – nevermore Oct 12 '20 at 09:58
  • But it won't save my issue for now I thought such feature has been implemented already in CollectionView but I was wrong https://github.com/xamarin/Xamarin.Forms/issues/8656 – Cfun Oct 12 '20 at 18:33
  • I saw there is a [sample project](https://github.com/xamcat/Scratch/tree/master/FormsStickyHeaders) there which implemented sticky headers. – nevermore Oct 14 '20 at 08:37
  • @JackHua-MSFT I didn't make it to work maybe it targeting group header only, also it seems a bit complicated to be added in a project – Cfun Nov 20 '20 at 17:14

2 Answers2

-1

Here is an alternative approach to this if the list isn't long

<StackLayout>
        <Label HorizontalTextAlignment="Center"
               FontAttributes="Bold"
               Text="Header Title"/>
        <StackLayout BindableLayout.ItemsSource="{Binding MyList}">
            <BindableLayout.ItemTemplate>
                <DataTemplate>
                    <StackLayout>
                        <Label Text="{Binding Name}"/>
                        <!-- boxview as separator -->
                        <BoxView HeightRequest="1" Color="Aqua" HorizontalOptions="FillAndExpand"/>
                    </StackLayout>
                </DataTemplate>
            </BindableLayout.ItemTemplate>
        </StackLayout>
    </StackLayout>
Shubham Tyagi
  • 798
  • 6
  • 21
  • Thank you for your answer but I would like to see a solution based on the built-in Header of a ListView. – Cfun Oct 04 '20 at 20:39
-1

Try to place the label outside the listview, it will be above the ListView regardless of scrolling:

<Label HorizontalTextAlignment="Center"
           FontAttributes="Bold"
           Text="Header Title"/>
<ListView ItemsSource="{Binding MyList}"             
      HasUnevenRows="True"
      SeparatorVisibility="Default"
      CachingStrategy="RecycleElement"
      Margin="0,-5,0,0">

    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Label Text="{Binding Name}"/>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>
Pinho_
  • 1
  • 1