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 associatedTelerik.Maui.Controls.RadDataPager. -
LabelStyle(Stylewith target typeLabel)—Specifies the style which applies to the label. -
ComboBoxStyle(Stylewith target typeRadComboBox)—Specifies the associatedTelerik.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>