Appearance in .NET MAUI DataPager

18 Nov 20184 minutes to read

The DataPager allows you to change its appearance by modifying the properties of DataPagerStyle and then assigning it to the SfDataPager.DefaultStyle property.

Customizing appearance

The SfDataPager enables customization of its appearance using the following properties:

Property	Description
DataPagerBackgroundColor	Gets or sets the background color of the SfDataPager.
NavigationButtonBackgroundColor	Gets or sets the background color of the navigation buttons.
NavigationButtonDisableBackgroundColor	Gets or sets the background color of the navigation buttons when it is disabled.
NavigationButtonDisableIconColor	Gets or sets the icon color of the navigation buttons when it is disabled.
NavigationButtonIconColor	Gets or sets the icon color of the navigation buttons.
NumericButtonBackgroundColor	Gets or sets the background color for the numeric buttons.
NumericButtonSelectionBackgroundColor	Gets or sets the background color of the numeric button that is currently selected.
NumericButtonSelectionTextColor	Gets or sets the text color of the numeric button that is currently selected.
NumericButtonTextColor	Gets or sets the text color of the numeric buttons.
FirstPageButtonTemplate	Gets or sets the template for the first page navigation button.
LastPageButtonTemplate	Gets or sets the template for the last page navigation button.
NextPageButtonTemplate	Gets or sets the template for the next page navigation button.
PreviousPageButtonTemplate	Gets or sets the template for the previous page navigation button.

To apply custom style, follow the code example:

XAML

<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" 
                           Source="{Binding Orders}">
            <pager:SfDataPager.DefaultStyle >
                <pager:DataPagerStyle NumericButtonSelectionBackgroundColor="#cdb4db"
                                      NumericButtonBackgroundColor="#ffc8dd"
                                      NavigationButtonBackgroundColor="#90e0ef"
                                      NavigationButtonIconColor="#0077b6"
                                      NavigationButtonDisableBackgroundColor="#caf0f8"
                                      NavigationButtonDisableIconColor="#9a8c98">
                </pager:DataPagerStyle>
            </pager:SfDataPager.DefaultStyle>
        </pager:SfDataPager>
    </Border>
    
</Grid>

C#

SfDataPager dataPager = new SfDataPager();
OrderInfoViewModel viewModel = new OrderInfoViewModel();
dataPager.PageSize = 15;
dataPager.Source = viewModel.Orders;

DataPagerStyle dataPagerStyle = new DataPagerStyle();
dataPagerStyle.NumericButtonSelectionBackgroundColor = Color.FromArgb("#CDB4DB");
dataPagerStyle.NumericButtonBackgroundColor = Color.FromArgb("#FFC8DD");
dataPagerStyle.NavigationButtonBackgroundColor = Color.FromArgb("#90E0EF");
dataPagerStyle.NavigationButtonIconColor = Color.FromArgb("#0077B6");
dataPagerStyle.NavigationButtonDisableBackgroundColor = Color.FromArgb("#CAF0F8");
dataPagerStyle.NavigationButtonDisableIconColor = Color.FromArgb("#9A8C98");
dataPager.DefaultStyle = dataPagerStyle;

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;

The following picture shows the customize styles of data pager: