DataPager Styles and Templates

Microsoft Silverlight will reach end of support after October 2021. Learn more.

This topic describes the styles and templates for the DataPager control. You can modify the default ControlTemplate to give the control a unique appearance. For more information, see Customizing the Appearance of an Existing Control by Using a ControlTemplate.

DataPager Parts

The following table lists the named parts for the DataPager class.

Part

Type

Description

CurrentPagePrefixTextBlock

TextBlock

Displays the current page prefix. By default, displays "Page".

CurrentPageSuffixTextBlock

TextBlock

Displays the current page suffix. By default, displays "of totalPages".

CurrentPageTextBox

TextBox

Displays the current page number.

FirstPageButton

ButtonBase

The button for moving to the first page.

LastPageButton

ButtonBase

The button for moving to the last page.

NextPageButton

ButtonBase

The button for moving to the next page.

PreviousPageButton

ButtonBase

The button for moving to the previous page.

NumericButtonPanel

Panel

Displays the numeric page buttons.

DataPager States

The following table lists the visual states for the DataPager control.

VisualState Name

VisualStateGroup Name

Description

Normal

CommonStates

The default state.

Disabled

CommonStates

The control is disabled.

FirstLastNumeric

DisplayModeStates

The DisplayMode is FirstLastNumeric. Shows the First and Last buttons, and the numeric display.

FirstLastPreviousNext

DisplayModeStates

The DisplayMode is FirstLastPreviousNext. Shows the First, Last, Previous, and Next buttons.

FirstLastPreviousNextNumeric

DisplayModeStates

The DisplayMode is FirstLastPreviousNextNumeric. Shows the First, Last, Previous, and Next buttons, and the numeric display.

Numeric

DisplayModeStates

The DisplayMode is Numeric. Shows the numeric display.

PreviousNext

DisplayModeStates

The DisplayMode is PreviousNext. Shows the Previous and Next buttons.

PreviousNextNumeric

DisplayModeStates

The DisplayMode is PreviousNextNumeric. Shows the Previous and Next buttons, and the numeric display.

MoveDisabled

MoveStates

Paging buttons are disabled.

MoveEnabled

MoveStates

Paging buttons are enabled.

MoveFirstDisabled

MoveFirstStates

The first page button is disabled.

MoveFirstEnabled

MoveFirstStates

The first page button is enabled.

MoveLastDisabled

MoveLastStates

The last page button is disabled.

MoveLastEnabled

MoveLastStates

The last page button is enabled.

MoveNextDisabled

MoveNextStates

The next page button is disabled.

MoveNextEnabled

MoveNextStates

The next page button is enabled.

MovePreviousDisabled

MovePreviousStates

The previous page button is disabled.

MovePreviousEnabled

MovePreviousStates

The previous page button is enabled.

TotalPageCountKnown

TotalPageCountKnownStates

This state supports accessibility. It causes the DataPagerAutomationPeer to provide the string "Page currentPage of totalPages" when the control is paging. Visual elements for this state are not implemented in the default template.

TotalPageCountUnknown

TotalPageCountKnownStates

This state supports accessibility. It causes the DataPagerAutomationPeer to provide the string "Page currentPage" when the control is paging. Visual elements for this state are not implemented in the default template.

DataPager Style Properties

The following table lists the Style properties of the DataPager control. You must set the TargetType property when you create a Style.

Property Name

Target Type

Description

NumericButtonStyle

ToggleButton

The style applied to the numeric buttons.

Default Style and Template

The following shows the XML namespace mappings that you have to specify when you work with styles and templates.

<!-- XML Namespace mappings. -->
xmlns:local="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
xmlns:primitives="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows"
xmlns:localprimitives="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls.Data"
xmlns:dataInput="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input"
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows">
Important noteImportant Note:

The default templates for controls in Silverlight 4 still use the Silverlight 3-style prefixes, such as controls: and data: instead of sdk:. This is because the default control templates support Silverlight 3 and Silverlight 4 simultaneously. For more information, see Prefixes and Mappings for Silverlight Libraries.

NoteNote:

The default templates still specify the vsm: XML namespace mapping for the VisualStateManager element for legacy reasons. You can however, use the VisualStateManager element without specifying the vsm: mapping.

The following XAML shows the default style and template for the DataPager control.

<Style TargetType="local:DataPager">
    <Setter Property="Background" Value="#FFF2F3F4"/>
    <Setter Property="BorderBrush">
        <Setter.Value>
            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                <GradientStop Color="#FFA3AEB9" Offset="0"/>
                <GradientStop Color="#FF8399A9" Offset="0.375"/>
                <GradientStop Color="#FF718597" Offset="0.375"/>
                <GradientStop Color="#FF617584" Offset="1"/>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="HorizontalContentAlignment" Value="Right" />
    <Setter Property="NumericButtonStyle">
        <Setter.Value>
            <Style TargetType="ToggleButton">
                <Setter Property="MinHeight" Value="20"/>
                <Setter Property="MinWidth" Value="20"/>
                <Setter Property="HorizontalAlignment" Value="Right"/>
                <Setter Property="VerticalAlignment" Value="Center"/>
                <Setter Property="Background" Value="#00000000"/>
                <Setter Property="BorderThickness" Value="1"/>
                <Setter Property="Padding" Value="1"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ToggleButton">
                            <Grid>
                                <vsm:VisualStateManager.VisualStateGroups>
                                    <vsm:VisualStateGroup x:Name="CommonStates">
                                        <vsm:VisualState x:Name="Normal"/>
                                        <vsm:VisualState x:Name="MouseOver">
                                            <Storyboard>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="OuterBtnBorder" Storyboard.TargetProperty="(BorderBrush).Color" To="#FFFFFFFF"/>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="InnerBtnBorder" Storyboard.TargetProperty="(BorderBrush).Color" To="#FFCCD1D6"/>
                                            </Storyboard>
                                        </vsm:VisualState>
                                        <vsm:VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="OuterBtnBorder" Storyboard.TargetProperty="(BorderBrush).Color" To="#FFFFFFFF"/>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="InnerBtnBorder" Storyboard.TargetProperty="(BorderBrush).Color" To="#FFCCD1D6"/>
                                            </Storyboard>
                                        </vsm:VisualState>
                                        <vsm:VisualState x:Name="Disabled">
                                            <Storyboard>
                                                <DoubleAnimation Duration="0" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="Opacity" To="0.5"/>
                                            </Storyboard>
                                        </vsm:VisualState>
                                    </vsm:VisualStateGroup>
                                    <vsm:VisualStateGroup x:Name="CheckStates">
                                        <vsm:VisualState x:Name="Checked">
                                            <Storyboard>
                                                <DoubleAnimation Duration="0" Storyboard.TargetName="CheckedStateOuterBorder" Storyboard.TargetProperty="Opacity" To="1"/>
                                            </Storyboard>
                                        </vsm:VisualState>
                                        <vsm:VisualState x:Name="Unchecked"/>
                                    </vsm:VisualStateGroup>
                                    <vsm:VisualStateGroup x:Name="FocusStates">
                                        <vsm:VisualState x:Name="Focused">
                                            <Storyboard>
                                                <DoubleAnimation Duration="0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity" To="1"/>
                                            </Storyboard>
                                        </vsm:VisualState>
                                        <vsm:VisualState x:Name="Unfocused"/>
                                    </vsm:VisualStateGroup>
                                </vsm:VisualStateManager.VisualStateGroups>
                                <Border x:Name="CheckedStateOuterBorder" Background="#7FA9A9A9" BorderBrush="#00FFFFFF" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3" Opacity="0"/>
                                <Border x:Name="OuterBtnBorder" Background="{TemplateBinding Background}" BorderBrush="#00FFFFFF" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3">
                                    <Border x:Name="InnerBtnBorder" BorderBrush="#00CCD1D6" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2">
                                        <ContentPresenter x:Name="contentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="Center" VerticalAlignment="Center" />
                                    </Border>
                                </Border>
                                <Border x:Name="FocusVisualElement" Background="{TemplateBinding Background}" BorderBrush="#FF6DBDD1" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2" Margin="1" Opacity="0"/>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Setter.Value>
    </Setter>

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:DataPager">
                <Grid Name="Root" Background="Transparent">
                    <Grid.Resources>
                        <SolidColorBrush x:Key="BackgroundColor" Color="#00000000"/>
                        <SolidColorBrush x:Key="ForegroundColor" Color="#FF000000"/>
                        <SolidColorBrush x:Key="BorderBrushColor" Color="#FFFFFFFF"/>
                        <ControlTemplate x:Key="ButtonTemplate" TargetType="Button">
                            <Grid>
                                <vsm:VisualStateManager.VisualStateGroups>
                                    <vsm:VisualStateGroup x:Name="CommonStates">
                                        <vsm:VisualState x:Name="Normal"/>
                                        <vsm:VisualState x:Name="MouseOver">
                                            <Storyboard>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="OuterBtnBorder" Storyboard.TargetProperty="(BorderBrush).Color" To="#FFFFFFFF"/>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="InnerBtnBorder" Storyboard.TargetProperty="(BorderBrush).Color" To="#FFCCD1D6"/>
                                            </Storyboard>
                                        </vsm:VisualState>
                                        <vsm:VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="OuterBtnBorder" Storyboard.TargetProperty="(BorderBrush).Color" To="#FFFFFFFF"/>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="InnerBtnBorder" Storyboard.TargetProperty="(BorderBrush).Color" To="#00FFFFFF"/>
                                            </Storyboard>
                                        </vsm:VisualState>
                                        <vsm:VisualState x:Name="Disabled">
                                            <Storyboard>
                                                <DoubleAnimation Duration="0" Storyboard.TargetName="path" Storyboard.TargetProperty="Opacity" To="0.5"/>
                                            </Storyboard>
                                        </vsm:VisualState>
                                    </vsm:VisualStateGroup>
                                    <vsm:VisualStateGroup x:Name="FocusStates">
                                        <vsm:VisualState x:Name="Focused">
                                            <Storyboard>
                                                <DoubleAnimation Duration="0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity" To="1"/>
                                            </Storyboard>
                                        </vsm:VisualState>
                                        <vsm:VisualState x:Name="Unfocused"/>
                                    </vsm:VisualStateGroup>
                                </vsm:VisualStateManager.VisualStateGroups>
                                <Border x:Name="OuterBtnBorder" BorderBrush="#00FFFFFF" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3">
                                    <Border x:Name="InnerBtnBorder" BorderBrush="#00CCD1D6" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2">
                                        <ContentPresenter x:Name="path" Content="{TemplateBinding Content}"/>
                                    </Border>
                                </Border>
                                <Border x:Name="FocusVisualElement" BorderBrush="#FF6DBDD1" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2" Margin="1" Opacity="0"/>
                            </Grid>
                        </ControlTemplate>

                        <Style x:Key="PagingTextBoxStyle" TargetType="TextBox">
                            <Setter Property="BorderThickness" Value="1"/>
                            <Setter Property="Background" Value="#FFFFFFFF"/>
                            <Setter Property="Foreground" Value="#FF000000"/>
                            <Setter Property="Padding" Value="2, 2, 2, -1"/>
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="TextBox">
                                        <Grid x:Name="RootElement">
                                            <vsm:VisualStateManager.VisualStateGroups>
                                                <vsm:VisualStateGroup x:Name="CommonStates">
                                                    <vsm:VisualState x:Name="Normal"/>
                                                    <vsm:VisualState x:Name="MouseOver">
                                                        <Storyboard>
                                                            <ColorAnimation Storyboard.TargetName="MouseOverBorder" Storyboard.TargetProperty="(BorderBrush).Color" To="#FF99C1E2"/>
                                                        </Storyboard>
                                                    </vsm:VisualState>
                                                    <vsm:VisualState x:Name="Disabled">
                                                        <Storyboard>
                                                            <DoubleAnimation Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity" To="1"/>
                                                        </Storyboard>
                                                    </vsm:VisualState>
                                                    <vsm:VisualState x:Name="ReadOnly">
                                                        <Storyboard>
                                                            <DoubleAnimation Storyboard.TargetName="ReadOnlyVisualElement" Storyboard.TargetProperty="Opacity" To="1"/>
                                                        </Storyboard>
                                                    </vsm:VisualState>
                                                </vsm:VisualStateGroup>
                                                <vsm:VisualStateGroup x:Name="FocusStates">
                                                    <vsm:VisualState x:Name="Focused">
                                                        <Storyboard>
                                                            <DoubleAnimation Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity" To="1"/>
                                                        </Storyboard>
                                                    </vsm:VisualState>
                                                    <vsm:VisualState x:Name="Unfocused"/>
                                                </vsm:VisualStateGroup>
                                            </vsm:VisualStateManager.VisualStateGroups>
                                            <Border x:Name="Border" Opacity="1" Background="#66FFFFFF" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1">
                                                <Grid>
                                                    <Border x:Name="ReadOnlyVisualElement" Opacity="0" Background="#72F7F7F7"/>
                                                    <Border x:Name="MouseOverBorder" BorderBrush="Transparent" BorderThickness="1">
                                                        <ScrollViewer BorderThickness="0" IsTabStop="False" Padding="{TemplateBinding Padding}" x:Name="ContentElement" Margin="0,-3,0,0" VerticalAlignment="Top"/>
                                                    </Border>
                                                </Grid>
                                            </Border>
                                            <Border x:Name="DisabledVisualElement" IsHitTestVisible="False" Opacity="0" Background="#A5F7F7F7" BorderBrush="#A5F7F7F7" BorderThickness="{TemplateBinding BorderThickness}"/>
                                            <Border Margin="1" x:Name="FocusVisualElement" IsHitTestVisible="False" Opacity="0" BorderBrush="#FF6DBDD1" BorderThickness="{TemplateBinding BorderThickness}"/>
                                        </Grid>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </Grid.Resources>
                    <vsm:VisualStateManager.VisualStateGroups>

                        <!-- CommonStates -->
                        <vsm:VisualStateGroup x:Name="CommonStates">
                            <vsm:VisualState x:Name="Normal"/>
                            <vsm:VisualState x:Name="Disabled">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="CurrentPagePrefixTextBlock" Storyboard.TargetProperty="Opacity" To="0.5" Duration="0"/>
                                    <DoubleAnimation Storyboard.TargetName="CurrentPageSuffixTextBlock" Storyboard.TargetProperty="Opacity" To="0.5" Duration="0"/>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>

                        <!-- MoveStates -->
                        <vsm:VisualStateGroup x:Name="MoveStates">
                            <vsm:VisualState x:Name="MoveEnabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CurrentPageTextBox" Storyboard.TargetProperty="IsEnabled" Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="True"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>

                            <vsm:VisualState x:Name="MoveDisabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CurrentPageTextBox" Storyboard.TargetProperty="IsEnabled" Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="False"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>

                        <!-- CanPageFirstStates -->
                        <vsm:VisualStateGroup x:Name="MoveFirstStates">
                            <vsm:VisualState x:Name="MoveFirstEnabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FirstPageButton" Storyboard.TargetProperty="IsEnabled" Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="True"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>

                            <vsm:VisualState x:Name="MoveFirstDisabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FirstPageButton" Storyboard.TargetProperty="IsEnabled" Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="False"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>

                        <!-- CanPagePreviousStates -->
                        <vsm:VisualStateGroup x:Name="MovePreviousStates">
                            <vsm:VisualState x:Name="MovePreviousEnabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PreviousPageButton" Storyboard.TargetProperty="IsEnabled" Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="True"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>

                            <vsm:VisualState x:Name="MovePreviousDisabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PreviousPageButton" Storyboard.TargetProperty="IsEnabled" Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="False"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>

                        <!-- CanPageNextStates -->
                        <vsm:VisualStateGroup x:Name="MoveNextStates">
                            <vsm:VisualState x:Name="MoveNextEnabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NextPageButton" Storyboard.TargetProperty="IsEnabled" Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="True"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>

                            <vsm:VisualState x:Name="MoveNextDisabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NextPageButton" Storyboard.TargetProperty="IsEnabled" Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="False"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>

                        <!-- CanPageLastStates -->
                        <vsm:VisualStateGroup x:Name="MoveLastStates">
                            <vsm:VisualState x:Name="MoveLastEnabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LastPageButton" Storyboard.TargetProperty="IsEnabled" Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="True"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>

                            <vsm:VisualState x:Name="MoveLastDisabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LastPageButton" Storyboard.TargetProperty="IsEnabled" Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="False"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>

                        <!-- PagerDisplayModeStates -->
                        <vsm:VisualStateGroup x:Name="DisplayModeStates">
                            <vsm:VisualState x:Name="FirstLastNumeric">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NextPageButton" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PreviousPageButton" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CurrentPageTextBox" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PageDisplay" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>

                            <vsm:VisualState x:Name="FirstLastPreviousNext">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NumericButtonPanel" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>

                            <vsm:VisualState x:Name="FirstLastPreviousNextNumeric">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CurrentPageTextBox" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PageDisplay" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>

                            <vsm:VisualState x:Name="Numeric">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FirstPageButton" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LastPageButton" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NextPageButton" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PreviousPageButton" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CurrentPageTextBox" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PageDisplay" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Separator1" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Separator2" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>

                            <vsm:VisualState x:Name="PreviousNext">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FirstPageButton" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LastPageButton" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NumericButtonPanel" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>

                            <vsm:VisualState x:Name="PreviousNextNumeric">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FirstPageButton" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LastPageButton" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CurrentPageTextBox" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PageDisplay" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>

                    </vsm:VisualStateManager.VisualStateGroups>

                    <!-- DataPager Control Parts -->
                    <Border MinHeight="24" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" VerticalAlignment="Bottom" CornerRadius="2">
                        <StackPanel Orientation="Horizontal" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="Stretch">
                            <!--FirstPage Button-->
                            <Button x:Name="FirstPageButton" Height="20" Width="20" Background="{StaticResource BackgroundColor}" Foreground="{StaticResource ForegroundColor}" BorderBrush="{StaticResource BorderBrushColor}" BorderThickness="1" Padding="1" HorizontalAlignment="Right" VerticalAlignment="Center" Template="{StaticResource ButtonTemplate}">
                                <Button.Content>
                                    <Grid Height="9" Width="8" >
                                        <Path Stretch="Fill" Data="M0,1 L1,0 L1,2 Z" Width="5" Height="9" HorizontalAlignment="Right" Fill="{TemplateBinding Foreground}"/>
                                        <Rectangle Width="2" HorizontalAlignment="Left" Fill="{TemplateBinding Foreground}"/>
                                    </Grid>
                                </Button.Content>
                            </Button>

                            <!--PreviousPage Button-->
                            <Button Name="PreviousPageButton" Background="{StaticResource BackgroundColor}" Foreground="{StaticResource ForegroundColor}" BorderBrush="{StaticResource BorderBrushColor}" BorderThickness="1" Padding="1" Height="20" Width="20" HorizontalAlignment="Right" VerticalAlignment="Center" Template="{StaticResource ButtonTemplate}">
                                <Button.Content>
                                    <Path Stretch="Fill" Data="M0,1 L1,0 L1,2 Z" Width="5" Height="9" HorizontalAlignment="Center" Fill="{TemplateBinding Foreground}"/>
                                </Button.Content>
                            </Button>

                            <Border x:Name="Separator1" Width="1" Background="#FFCCD1D6" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,0,1,0" Margin="0,3,0,3"/>
                            <!--Numeric Button Panel-->
                            <StackPanel x:Name="NumericButtonPanel" Orientation="Horizontal" Margin="1"/>

                            <!--Page Display-->
                            <StackPanel x:Name="PageDisplay" Orientation="Horizontal">
                                <TextBlock x:Name="CurrentPagePrefixTextBlock" Width="Auto" VerticalAlignment="Center" Margin="4,0,0,0" Foreground="{TemplateBinding Foreground}"/>
                                <TextBox x:Name="CurrentPageTextBox" TextWrapping="Wrap" Width="40" Height="Auto" VerticalAlignment="Center" Margin="4,2,4,2" Style="{StaticResource PagingTextBoxStyle}" Foreground="{TemplateBinding Foreground}" BorderBrush="{TemplateBinding BorderBrush}"/>
                                <TextBlock x:Name="CurrentPageSuffixTextBlock" Width="Auto" VerticalAlignment="Center" Margin="0,0,4,0" Foreground="{TemplateBinding Foreground}"/>
                            </StackPanel>
                            <Border x:Name="Separator2" Width="1" Background="#FFCCD1D6" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,0,1,0" Margin="0,3,0,3"/>

                            <!--NextPage Button-->
                            <Button x:Name="NextPageButton" Background="{StaticResource BackgroundColor}" Foreground="{StaticResource ForegroundColor}" BorderBrush="{StaticResource BorderBrushColor}" BorderThickness="1" Padding="1" Height="20" Width="20" HorizontalAlignment="Right" VerticalAlignment="Center" Template="{StaticResource ButtonTemplate}">
                                <Button.Content>
                                    <Path Stretch="Fill" Data="M0,0 L1,1 L0,2 Z" Width="5" Height="9" HorizontalAlignment="Center" Fill="{TemplateBinding Foreground}"/>
                                </Button.Content>
                            </Button>

                            <!--LastPage Button-->
                            <Button x:Name="LastPageButton" Background="{StaticResource BackgroundColor}" Foreground="{StaticResource ForegroundColor}" BorderBrush="{StaticResource BorderBrushColor}" BorderThickness="1" Padding="1" Height="20" Width="20" HorizontalAlignment="Right" VerticalAlignment="Center" Template="{StaticResource ButtonTemplate}">
                                <Button.Content>
                                    <Grid Height="9" Width="8">
                                        <Path Stretch="Fill" Data="M0,0 L1,1 L0,2 Z" Width="5" Height="9" HorizontalAlignment="Left" Fill="{TemplateBinding Foreground}"/>
                                        <Rectangle Width="2" HorizontalAlignment="Right" Fill="{TemplateBinding Foreground}"/>
                                    </Grid>
                                </Button.Content>
                            </Button>
                        </StackPanel>
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>