Getting Started with WPF DataPager (SfDataPager)

17 Sep 20239 minutes to read

This section describes about the assembly that is required for SfDataPagerControl in your WPF application.The following assemblies are required in your application.

Demanded Assemblies Description
Syncfusion.SfGrid.WPF Covers the SfDataPager and other elements.

When you use SfDataPager in the SfDataGrid, You need to add the following assembles with the default assembles.

Demanded Assemblies Description
Syncfusion.Data.WPF Covers basic processing on data like sorting, grouping, and filtering.
Syncfusion.Shared.WPF Covers an editors like CurrencyTextBox, PercentEdit, DateTimeEdit.

Control Structure

The following screenshot describes the elements of the DataPager control.

Displaying WPF DataPager control

  • FirstPageButton: Moves the current page index to the first page and displays the first page data.
  • PreviousPageButton: Moves the current page index to the previous page and displays the previous page data.
  • LastPageButton: Moves the current page index to the last page and displays the last page data.
  • NextPageButton: Moves the current page index to the next page and displays the next page data.
  • NumericButtons: Denotes the available pages. You can directly navigate to the page by clicking the corresponding button.
  • EllipsisButton: Displayed when AutoEllipsis mode is set. This button displays the next set of numeric page buttons are displayed.

Create Simple Application with SfDataPager

The following steps help you to use the SfDataPager in an application:

  1. Create a new WPF application
  2. Open a VisualStudio toolbox. Navigate to SyncfusionControls and drag the SfDataPager to the design window.

    Displaying the WPF SfDataPager control in designer

  3. When you drag the SfDataPager to the window, it automatically adds the required references to the current application.To add the SfDataPager using code, you can add the following assemblies to the project.

  4. You can either drag the control from Visual Studio or Expression Blend, or add the control to your project manually. You need to add the namespace to make use of SfDataPager in your application.

    <Window x:Class="SfDataPagerDemo.MainWindow"
            Title="MainWindow" Height="350" Width="525">
            <datapager:SfDataPager x:Name="sfDataPager"/>
  5. Create Business object class named as OrderInfo

    public class OrderInfo
        int orderID;
        string customerId;
        string country;
        string customerName;
        string shippingCity;
        public int OrderID
            get { return orderID; }
            set { orderID = value; }
        public string CustomerID
            get { return customerId; }
            set { customerId = value; }
        public string CustomerName
            get { return customerName; }
            set { customerName = value; }
        public string Country
            get { return country; }
            set { country = value; }
        public string ShipCity
            get { return shippingCity; }
            set { shippingCity = value; }
        public OrderInfo(int orderId, string customerName, string country, string customerId, string shipCity)
            this.OrderID = orderId;
            this.CustomerName = customerName;
            this.Country = country;
            this.CustomerID = customerId;
            this.ShipCity = shipCity;
  6. Add the following code in ViewModel class

    public class ViewModel
        ObservableCollection<OrderInfo> orderCollection;
        public ObservableCollection<OrderInfo> OrderInfoCollection
            get { return orderCollection; }
            set { orderCollection = value; }
        public ViewModel()
            orderCollection = new ObservableCollection<OrderInfo>();
        private void GenerateOrders()
            orderCollection.Add(new OrderInfo(1001, "Maria Anders", "Germany", "ALFKI", "Berlin"));
            orderCollection.Add(new OrderInfo(1002, "Ana Trujilo", "Mexico", "ANATR", "Mexico D.F."));
            orderCollection.Add(new OrderInfo(1003, "Antonio Moreno", "Mexico", "ANTON", "Mexico D.F."));
            orderCollection.Add(new OrderInfo(1004, "Thomas Hardy", "UK", "AROUT", "London"));
            orderCollection.Add(new OrderInfo(1005, "Christina Berglund", "Sweden", "BERGS", "Lula"));
            orderCollection.Add(new OrderInfo(1006, "Hanna Moos", "Germany", "BLAUS", "Mannheim"));
            orderCollection.Add(new OrderInfo(1007, "Frederique Citeaux", "France", "BLONP", "Strasbourg"));
            orderCollection.Add(new OrderInfo(1008, "Martin Sommer", "Spain", "BOLID", "Madrid"));
            orderCollection.Add(new OrderInfo(1009, "Laurence Lebihan", "France", "BONAP", "Marseille"));
            orderCollection.Add(new OrderInfo(1010, "Elizabeth Lincoln", "Canada", "BOTTM", "Tsawassen"));
  7. Set the ViewModel instance as DataContext to window. Now, you can bind the data collection to the SfDataPagerSource property.

        <datapager:SfDataPager x:Name="sfDataPager" 
    						   Source="{Binding OrderInfoCollection}" />
  8. Then bind the PagedSource property of the SfDataPager control into the SfDataGridItemsSource property.

            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        <sfGrid:SfDataGrid AutoGenerateColumns="True" 
    					   ItemsSource="{Binding ElementName=sfDataPager,Path=PagedSource}"/>
        <datapager:SfDataPager x:Name="sfDataPager" 
    						   Source="{Binding OrdersDetails}" />

The following screenshot displays the output for Implementation of the SfDataPager in the SfDataGrid Control.

Displaying the WPF SfDataPager in the SfDataGrid Control


SfDataPager supports various built-in themes. Refer to the below links to apply themes for the SfDataPager,

Setting theme to WPF DataPager