Appearance in UWP DataPager (SfDataPager)

10 May 20216 minutes to read

Display Modes

The SfDataPager control allows you to customize the visual parts to be displayed using DisplayMode property. The following table shows different PageDisplayMode options available.

Enum Values Description
FirstLastPreviousNextNumeric Displays all the navigation buttons and numeric page buttons.

B:/Support/2015/April/24/Image/DataPager/1.png
FirstLastNumeric Displays the first page, last page navigation button and numeric page buttons.

B:/Support/2015/April/24/Image/DataPager/2.png
PreviousNextNumeric Displays the previous, next page navigation buttons and numeric page buttons.

B:/Support/2015/April/24/Image/DataPager/3.png
FirstLastPreviousNext Displays only the page navigation buttons. Numeric page buttons are not displayed.

B:/Support/2015/April/24/Image/DataPager/4.png
FirstLast Displays only the first and last page navigation buttons.

B:/Support/2015/April/24/Image/DataPager/5.png
PreviousNext Displays only the previous and next page navigation buttons.

B:/Support/2015/April/24/Image/DataPager/6.png
Numeric Displays only the numeric page buttons.

B:/Support/2015/April/24/Image/DataPager/7.png
First Displays only the first page navigation button.

B:/Support/2015/April/24/Image/DataPager/8.png
Last Displays only the last page navigation button.

B:/Support/2015/April/24/Image/DataPager/9.png
Previous Displays only the previous page navigation button.

B:/Support/2015/April/24/Image/DataPager/10.png
Next Displays only the next page navigation button.

B:/Support/2015/April/24/Image/DataPager/11.png
None It does not display anything

Numeric Buttons count

SfDataPager allows you to display the number of page buttons to be displayed in view by setting NumericButtonCount property.

<datapager:SfDataPager x:Name="sfDataPager" 
                         PageSize="5" 
                         UseOnDemandPaging="True"
                         NumericButtonCount="10"
                         PageCount="10" />

Appearance_img11

Now after changing NumberButtonCount as 5, only 5-page button will be displayed in view and remaining page buttons can be viewed by clicking the navigation buttons.

<datapager:SfDataPager x:Name="sfDataPager" 
                         PageSize="5" 
                         UseOnDemandPaging="True"
                         NumericButtonCount="5"
                         PageCount="10" />

Appearance_img12

Orientation

SfDataPager allows you to change the orientation on the control through Orientation property.

Enum Value Description
Horizontal This is the default enum value for Orientation. Arranges all the Navigation Buttons and Numeric Buttons Horizontally.

B:/Support/2015/April/24/Image/DataPager/3.png
Vertical Arranges all the Navigation Buttons and Numeric Buttons Vertically.

B:/Support/2015/April/24/Image/DataPager/figure12.png

AutoEllipsisMode

The AutoEllipsis button is displayed when the page count is greater than numeric button count. The SfDataPager control allows you enable this by using AutoEllipsisMode property which is the Enum type.

  • AutoEllipsisMode – This Property is used to set the AutoEllipsisMode. By default, it is set to None.
  • AutoEllipsisText– This property is used to change the AutoEllipsisButton Text.

The following table explains the different AutoEllipsisModes.

Enum Value Description
After You can display the ellipsis button after numeric buttons.

B:/Support/2015/April/24/Image/DataPager/AutoElipseafter.png
Before You can display the ellipsis button before numeric buttons.

B:/Support/2015/April/24/Image/DataPager/before.png
Both You can display the ellipsis button before and after the numeric buttons.

B:/Support/2015/April/24/Image/DataPager/both.png
None It does not display the AutoEllipsisButton.

B:/Support/2015/April/24/Image/DataPager/none.png

The following code example explains how to change the AutoEllipsisText.

<datapager:SfDataPager x:Name="sfDataPager" 
                         PageSize="2"
                         AutoEllipsisMode="After"
                         NumericButtonCount="4" PageCount="10"
                         AutoEllipsisText="…etc" 
                         UseOnDemandPaging="True"/>

The following screenshot displays the output for AutoEllipsisText changed as …etc.

Appearance_img13

AccentBrush

AccentBrush properties are used to decorate the SfDataPager control with a solid color. There are two AccentBrush properties in the SfDataPager control:

  • AccentBackground – Property that is applied to the background color for NavigationButtons and current selected numeric page button. By default, it set to DarkGray.
  • AccentForeground – Property that is applied to the foreground color for the current selected numeric page button. By default, it set to White.
  • NumericButtonStyle – Property that is applied to the Style of Numeric Button. This is the Style type property. By default, it set to Null.

The following code example explains how to apply the AccentBackground and AccentForeground properties for the SfDataPager control.

<datapager:SfDataPager x:Name="sfDataPager" 
                         PageCount="2"
                         AccentBackground="#FF8CBF26"
                         AccentForeground="White"
                         UseOnDemandPaging="True" />

The following screenshot displays the output for AccentBackground and AccentForeGround applied to the SfDataPager.

Appearance_img14

The following code example explains how to use NumericButtonStyle in SfDataPager.

<Page.Resources>
    <Style TargetType="datapager:NumericButton">
        <Setter Property="BorderBrush" Value="Blue"/>
        <Setter Property="BorderThickness" Value="2"/>
    </Style>
</Page.Resources>
<datapager:SfDataPager x:Name="sfDataPager" 
                         PageCount="2"
                         AccentBackground="DodgerBlue"
                         UseOnDemandPaging="True" />

The following screenshot displays the output of NumericButtonStyle.

Appearance_img15