Styling the .NET MAUI DataPager Navigation View

The DataPager for .NET MAUI provides a styling mechanism for customizing the look of the navigation view, which presents the number of pages and the combo box for selecting different pages.

To style the Navigation View, utilize the NavigationViewStyle property (of type Style with a target type of telerik:DataPagerNavigationView).

The DataPagerNavigationView exposes the following properties:

• DataPager (RadDataPager)—Specifies the associated Telerik.Maui.Controls.RadDataPager.
• LabelStyle (Style with target type Label)—Specifies the style which applies to the label.
• ComboBoxStyle (Style with target type RadComboBox)—Specifies the associated Telerik.Maui.Controls.RadDataPager.
• BackgroundColor (Color)—Specifies the background color of the page sizes view.

Here is an example demonstrating how to use the NavigationViewStyle property.

1. Define the DataPager in XAML:

<telerik:RadDataPager NavigationViewStyle="{StaticResource NavigationViewStyle}">

2. Set the styles to the page's resources:

<Style x:Key="ComboStyle" TargetType="telerik:RadComboBox">

</Style>
<Style x:Key="LabelStyle" TargetType="Label">

</Style>
<Style x:Key="NavigationViewStyle" TargetType="telerik:DataPagerNavigationView">
    <Setter Property="ComboBoxStyle" Value="{StaticResource ComboStyle}" />
    <Setter Property="LabelsStyle" Value="{StaticResource LabelStyle}" />
</Style>

Styling the Navigation ComboBox

To customize the appearance of the ComboBox view that allows the navigation to a specific page, use the NavigationComboBoxStyle (Style with target type of telerik:RadComboBox) property.

The target type of the NavigationComboBoxStyle is the RadComboBox control. Use the styling properties described in the ComboBox Styling article to style the ComboBox part of the DataPager control.

Here is an example demonstrating how to use the NavigationComboBoxStyle property.

1. Define the DataPager in XAML:

<telerik:RadDataPager NavigationComboBoxStyle="{StaticResource NavigationComboStyle}">

2. Set the style for the NavigationComboStyle to the page's resources:

<Style x:Key="NavigationComboStyle" TargetType="telerik:RadComboBox">
    <Setter Property="BorderColor" Value="#00897B" />
    <Setter Property="BorderThickness" Value="2" />
</Style>

See Also

• Paged Source
• Display Modes
• Page Configuration
• Localization
• Commands in DataPager
• Integration with DataGrid