Customization in .NET MAUI DataPager

18 Nov 201818 minutes to read

The DataPager allows you to customize its appearance and layout to match your application’s design requirements.

Numeric button shapes

The SfDataPager allows you to change the shape of the buttons using the SfDataPager.ButtonShape property.

<ContentPage.BindingContext>
    <local:OrderInfoViewModel x:Name="viewModel"/>
</ContentPage.BindingContext>

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Border Grid.Row="1" Padding="5">
        <pager:SfDataPager x:Name="dataPager"
                           PageSize="15" 
                           ButtonShape="Rectangle"
                           Source="{Binding Orders}">
        </pager:SfDataPager>
    </Border>
</Grid>
SfDataPager dataPager = new SfDataPager();
OrderInfoViewModel viewModel = new OrderInfoViewModel();
dataPager.PageSize = 15;
dataPager.ButtonShape = DataPagerButtonShape.Rectangle;
dataPager.Source = viewModel.Orders;

Border border = new Border();
border.Padding = new Thickness(5);
border.Content = dataPager;

Grid grid = new Grid();
grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Star });
grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
grid.Children.Add(border);
grid.SetRow(border, 1);
this.Content = grid;

Numeric button shape .NET MAUI DataPager.

Generating numeric buttons

The SfDataPager allows you to choose the generation mode of numeric buttons using the SfDataPager.NumericButtonsGenerateMode property. The numeric buttons can be generated either automatically in view or by specifying the count directly in the SfDataPager.NumericButtonCount property.

<ContentPage.BindingContext>
    <local:OrderInfoViewModel x:Name="viewModel"/>
</ContentPage.BindingContext>

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Border Grid.Row="1" Padding="5">
        <pager:SfDataPager x:Name="dataPager"
                           PageSize="15" 
                           NumericButtonsGenerateMode="Auto"
                           Source="{Binding Orders}">
        </pager:SfDataPager>
    </Border>
</Grid>
SfDataPager dataPager = new SfDataPager();
OrderInfoViewModel viewModel = new OrderInfoViewModel();
dataPager.PageSize = 15;
dataPager.NumericButtonsGenerateMode = DataPagerNumericButtonsGenerateMode.Auto;
dataPager.Source = viewModel.Orders;

Border border = new Border();
border.Padding = new Thickness(5);
border.Content = dataPager;

Grid grid = new Grid();
grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Star });
grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
grid.Children.Add(border);
grid.SetRow(border, 1);
this.Content = grid;

Note: The size of the SfDataPager is automatically adjusted based on the available screen size if the view cannot accommodate the numeric buttons specified in the NumericButtonCount property.

Customizing button size and font size of pager buttons

The SfDataPager button is loaded with a default width and height of 40. The default button font size of SfDataPager is 14. You can customize the button size and font size by setting the desired values for the SfDataPager.ButtonSize and SfDataPager.ButtonFontSize properties, respectively.

<ContentPage.BindingContext>
    <local:OrderInfoViewModel x:Name="viewModel"/>
</ContentPage.BindingContext>

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Border Grid.Row="1" Padding="5">
        <pager:SfDataPager x:Name="dataPager"
                           PageSize="15" 
                           ButtonSize="60"
                           ButtonFontSize="21"
                           Source="{Binding Orders}">
        </pager:SfDataPager>
    </Border>
</Grid>
SfDataPager dataPager = new SfDataPager();
OrderInfoViewModel viewModel = new OrderInfoViewModel();
dataPager.PageSize = 15;
dataPager.ButtonSize = 60;
dataPager.ButtonFontSize = 21;
dataPager.Source = viewModel.Orders;

Border border = new Border();
border.Padding = new Thickness(5);
border.Content = dataPager;

Grid grid = new Grid();
grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
grid.Children.Add(border);
grid.SetRow(border, 1);
this.Content = grid;

Button size and font size of .NET MAUI DataPager.

Customizing button spacing

The SfDataPager buttons are loaded with a default spacing of 8. You can customize the button spacing by setting the desired values for the SfDataPager.ButtonSpacing.

<ContentPage.BindingContext>
    <local:OrderInfoViewModel x:Name="viewModel"/>
</ContentPage.BindingContext>

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Border Grid.Row="1" Padding="5">
        <pager:SfDataPager x:Name="dataPager"
                           PageSize="15" 
                           ButtonSpacing="15"
                           Source="{Binding Orders}">
        </pager:SfDataPager>
    </Border>
</Grid>
SfDataPager dataPager = new SfDataPager();
OrderInfoViewModel viewModel = new OrderInfoViewModel();
dataPager.PageSize = 15;
dataPager.ButtonSpacing = 15;
dataPager.Source = viewModel.Orders;

Border border = new Border();
border.Padding = new Thickness(5);
border.Content = dataPager;

Grid grid = new Grid();
grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
grid.Children.Add(border);
grid.SetRow(border, 1);
this.Content = grid;

Button size and font size of .NET MAUI DataPager.

Display mode

The visibility of the numeric and navigation buttons can be personalized by using the SfDataPager.DisplayMode property. The default value is FirstLastPreviousNextNumeric, which displays all navigation and numeric buttons.

Property Value Description

None

 Displays no page buttons.

First

 Displays only the first page button.

Last

 Displays only the last page button.

Previous

 Displays only the previous page button.

Next

 Displays only the next page button.

Numeric

 Displays only the numeric page buttons.

FirstLast

 Displays the first and last page buttons.

PreviousNext

 Displays the previous and next page buttons.

FirstLastNumeric

 Displays the first, last and numeric page buttons.

PreviousNextNumeric

 Displays the previous, next and numeric page buttons.

FirstLastPreviousNext

 Displays the first, last, previous and next page buttons.

FirstLastPreviousNextNumeric

 Displays the first, last, numeric, previous and next page buttons. 
<ContentPage.BindingContext>
    <local:OrderInfoViewModel x:Name="viewModel"/>
</ContentPage.BindingContext>

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Border Grid.Row="1" Padding="5">
        <pager:SfDataPager x:Name="dataPager"
                           PageSize="15" 
                           DisplayMode="FirstLastNumeric"
                           Source="{Binding Orders}">
        </pager:SfDataPager>
    </Border>
</Grid>
SfDataPager dataPager = new SfDataPager();
OrderInfoViewModel viewModel = new OrderInfoViewModel();
dataPager.PageSize = 15;
dataPager.DisplayMode = DataPagerDisplayMode.FirstLastNumeric;
dataPager.Source = viewModel.Orders;

Border border = new Border();
border.Padding = new Thickness(5);
border.Content = dataPager;

Grid grid = new Grid();
grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
grid.Children.Add(border);
grid.SetRow(border, 1);
this.Content = grid;

Auto-ellipsis mode

The AutoEllipsisMode property controls whether ellipsis buttons appear for navigating large ranges of page numbers, whereas the DisplayMode property controls which button types (First, Last, Previous, Next, Numeric) are visible. The SfDataPager offers support for displaying an ellipsis button at the beginning and end of the numeric buttons when the scroll view contains additional numeric buttons before or after the currently selected numeric button. It can be customized by using the SfDataPager.AutoEllipsisMode property.

<ContentPage.BindingContext>
    <local:OrderInfoViewModel x:Name="viewModel"/>
</ContentPage.BindingContext>

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Border Grid.Row="1" Padding="5">
        <pager:SfDataPager x:Name="dataPager"
                           PageSize="15" 
                           AutoEllipsisMode="After"
                           Source="{Binding Orders}">
        </pager:SfDataPager>
    </Border>
</Grid>
SfDataPager dataPager = new SfDataPager();
OrderInfoViewModel viewModel = new OrderInfoViewModel();
dataPager.PageSize = 15;
dataPager.AutoEllipsisMode = DataPagerEllipsisMode.After;
dataPager.Source = viewModel.Orders;

Border border = new Border();
border.Padding = new Thickness(5);
border.Content = dataPager;

Grid grid = new Grid();
grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Star });
grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
grid.Children.Add(border);
grid.SetRow(border, 1);
this.Content = grid;

Auto-ellipsis mode .NET MAUI DataPager.

Customize the auto-ellipsis text

The auto-ellipsis text can be customized by using the SfDataPager.AutoEllipsisText property. The default value of AutoEllipsisText is set to ….

<ContentPage.BindingContext>
    <local:OrderInfoViewModel x:Name="viewModel"/>
</ContentPage.BindingContext>

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Border Grid.Row="1" Padding="5">
        <pager:SfDataPager x:Name="dataPager"
                           PageSize="15" 
                           AutoEllipsisMode="After"
                           AutoEllipsisText="***"
                           Source="{Binding Orders}">
        </pager:SfDataPager>
    </Border>
</Grid>
SfDataPager dataPager = new SfDataPager();
OrderInfoViewModel viewModel = new OrderInfoViewModel();
dataPager.PageSize = 15;
dataPager.AutoEllipsisMode = DataPagerEllipsisMode.After;
dataPager.AutoEllipsisText = "***";
dataPager.Source = viewModel.Orders;

Border border = new Border();
border.Padding = new Thickness(5);
border.Content = dataPager;

Grid grid = new Grid();
grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Star });
grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
grid.Children.Add(border);
grid.SetRow(border, 1);
this.Content = grid;

Orientation

By default, SfDataPager displays buttons in the horizontal direction. However, the SfDataPager.Orientation property allows users to customize the data pager to display the buttons vertically or horizontally according to their preferences.

<ContentPage.BindingContext>
    <local:OrderInfoViewModel x:Name="viewModel"/>
</ContentPage.BindingContext>

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <Border Grid.Column="1" Padding="5">
        <pager:SfDataPager x:Name="dataPager"
                           PageSize="15" 
                           Orientation="Vertical"
                           Source="{Binding Orders}">
        </pager:SfDataPager>
    </Border>
    <syncfusion:SfDataGrid x:Name="dataGrid"
                           Grid.Column="0"
                           ItemsSource="{Binding Source={x:Reference dataPager}, Path=PagedSource}">
    </syncfusion:SfDataGrid>
</Grid>
SfDataPager dataPager = new SfDataPager();
OrderInfoViewModel viewModel = new OrderInfoViewModel();
dataPager.PageSize = 15;
dataPager.Orientation = DataPagerScrollOrientation.Vertical;
dataPager.Source = viewModel.Orders;

SfDataGrid dataGrid = new SfDataGrid();
dataGrid.ItemsSource = dataPager.PagedSource;

Border border = new Border();
border.Padding = new Thickness(5);
border.Content = dataPager;

Grid grid = new Grid();
grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Star });
grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Auto });
grid.Children.Add(dataGrid);
grid.Children.Add(border);
grid.SetColumn(dataGrid, 0);
grid.SetColumn(border, 1);
this.Content = grid;