How to provide paging support for SfListView?

1 min read

SfListView provides support for paging using the SfDataPager control. It can be achieved through loading data dynamically into ItemsSource of SfListView using OnDemandLoading event for the current page by setting SfDataPager.UseOnDemandPaging as ‘True’.

By using the SfDataPager.PageSize property, you can define the number of list items to be displayed in each page.

XAML

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms" 
             xmlns:sfPager="clr-namespace:Syncfusion.SfDataGrid.XForms.DataPager;assembly=Syncfusion.SfDataGrid.XForms"> 
 
    <ContentPage.BindingContext> 
        <local:ListViewGridLayoutViewModel x:Name="viewModel" /> 
    </ContentPage.BindingContext> 
     
  <Grid> 
    <Grid.RowDefinitions> 
      <RowDefinition Height="Auto" /> 
      <RowDefinition Height="*" /> 
    </Grid.RowDefinitions> 
        <sfPager:SfDataPager x:Name ="dataPager"  
                             Source="{Binding GalleryInfo}" 
                             Grid.Row="0"            
                             PageSize="4"  
                             HeightRequest ="50" 
                             NumericButtonCount="6" 
                             UseOnDemandPaging="True" 
                             OnDemandLoading="DataPager_OnDemandLoading"/> 
 
     <syncfusion:SfListView x:Name="listView" Grid.Row="1">  
      <syncfusion:SfListView.ItemTemplate> 
        <DataTemplate> 
          <Grid> 
            <Image Source="{Binding Image}" 
                           Aspect="Fill" 
                           HorizontalOptions="FillAndExpand" 
                           VerticalOptions="FillAndExpand" /> 
            <Grid> 
              <Label Text="{Binding ImageTitle}">
              </Label> 
            </Grid> 
          </Grid> 
        </DataTemplate> 
      </syncfusion:SfListView.ItemTemplate> 
    </syncfusion:SfListView> 
  </Grid> 
</ContentPage>

public GridLayoutPage() 
{ 
  InitializeComponent(); 
  viewModel = new ListViewGridLayoutViewModel(); 
} 
 
private void DataPager_OnDemandLoading(object sender, OnDemandLoadingEventArgs args) 
{ 
  var source = viewModel.GalleryInfo.Skip(args.StartIndex).Take(args.PageSize); 
  listView.ItemsSource = source.AsEnumerable(); 
}

Screenshot:

$C:\Users\muthukumaran.gnanavi\AppData\Local\Microsoft\Windows\INetCache\Content.Word\PagerImage.png$

Click here to download the sample.

Did you find this information helpful?

Yes

Comments (0)