Appearance

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" />

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" />

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.

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.

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.