Under Review
Last Updated: 26 Aug 2021 12:43 by ADMIN

I want to use a sticky header listview. 
I using the following code to render the sticky header list.

XML page code:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage 
    xmlns="http://xamarin.com/schemas/2014/forms"
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
     x:Class="TEST.Views.AboutPage"
     xmlns:vm="clr-namespace:TEST.ViewModels"

     xmlns:telerikDataControls="clr-namespace:Telerik.XamarinForms.DataControls;assembly=Telerik.XamarinForms.DataControls"
     xmlns:telerikListView="clr-namespace:Telerik.XamarinForms.DataControls.ListView;assembly=Telerik.XamarinForms.DataControls"

     Title="{Binding Title}"
>

    <ContentPage.BindingContext>
        <vm:AboutViewModel />
    </ContentPage.BindingContext>

    <ContentPage.Resources>
        <ResourceDictionary>
            <Color x:Key="Accent">#96d1ff</Color>
        </ResourceDictionary>
        <DataTemplate x:Key="ListViewItemTemplate">
            <telerikListView:ListViewTemplateCell>
                <telerikListView:ListViewTemplateCell.View>
                    <Grid Padding="16, 0, 0, 0" BackgroundColor="#F1F2F5" HeightRequest="100">
                        <Label Text="{Binding Name}" TextColor="#6F6F70" FontSize="Small" />
                    </Grid>
                </telerikListView:ListViewTemplateCell.View>
            </telerikListView:ListViewTemplateCell>
        </DataTemplate>
        <DataTemplate x:Key="ListViewGroupHeaderTemplate">
            <Grid HeightRequest="40">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>                
                <Label Margin="0, 12, 0, 6" Text="{Binding }" Grid.Column="1" TextColor="DarkGray" FontSize="Medium" HorizontalOptions="Start" />
            </Grid>
        </DataTemplate>
        <telerikListView:ListViewGroupStyle x:Key="ListViewGroupHeaderStyle" BackgroundColor="White" />
    </ContentPage.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>       
            <telerikDataControls:RadListView
                x:Name="listView"
                ItemsSource="{Binding Cities}"
                ItemTemplate="{StaticResource ListViewItemTemplate}"
                GroupHeaderTemplate="{StaticResource ListViewGroupHeaderTemplate}"
                GroupHeaderStyle="{StaticResource ListViewGroupHeaderStyle}"
                IsGroupHeaderSticky="True"
                Grid.Row="0"
            >
                <telerikDataControls:RadListView.GroupDescriptors>
                    <telerikListView:PropertyGroupDescriptor PropertyName="Country"/>
                </telerikDataControls:RadListView.GroupDescriptors>

                <telerikDataControls:RadListView.LayoutDefinition>
                    <telerikListView:ListViewGridLayout HorizontalItemSpacing="5"
                                                        ItemLength="120"
                                                        SpanCount="2"
                                                        VerticalItemSpacing="5" />
                </telerikDataControls:RadListView.LayoutDefinition>
            </telerikDataControls:RadListView>
    </Grid>

</ContentPage>

 

 

ViewModels:

public class City
    {
        public string Name { get; set; }
        public string Country { get; set; }
    }

    public class ViewModel
    {
        public ObservableCollection<City> Cities { get; set; }

        public ViewModel()
        {
            this.Cities = new ObservableCollection<City>()
            {
                new City() { Name = "Barcelona", Country = "Spain"},
                new City() { Name = "Madrid", Country = "Spain"},
                new City() { Name = "Barcelona", Country = "Spain"},
                new City() { Name = "Madrid", Country = "Spain"},
                new City() { Name = "Rome", Country = "Italy"},
                new City() { Name = "Florence", Country = "Italy"},
                new City() { Name = "Florence", Country = "Italy"},
                new City() { Name = "London", Country = "England"},
                new City() { Name = "Manchester", Country = "England"},
                new City() { Name = "Manchester", Country = "England"},
                new City() { Name = "Manchester", Country = "England"},
                new City() { Name = "Manchester", Country = "England"},
                new City() { Name = "Manchester", Country = "England"},
                new City() { Name = "Manchester", Country = "England"},
                new City() { Name = "Manchester", Country = "England"},
                new City() { Name = "New York", Country = "USA"},
                new City() { Name = "New York", Country = "USA"},
                new City() { Name = "New York", Country = "USA"},
                new City() { Name = "New York", Country = "USA"},
                new City() { Name = "New York", Country = "USA"},
                new City() { Name = "New York", Country = "USA"},
                new City() { Name = "New York", Country = "USA"},
                new City() { Name = "Boston", Country = "USA"}
             };
        }
    }



I added screenshots here which until header "Italy" works correctly, but later  "Spain" & "USA" header are not sticking as we scroll up.