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 |
Displays the current page prefix. By default, displays "Page". |
|
CurrentPageSuffixTextBlock |
Displays the current page suffix. By default, displays "of totalPages". |
|
CurrentPageTextBox |
Displays the current page number. |
|
FirstPageButton |
The button for moving to the first page. |
|
LastPageButton |
The button for moving to the last page. |
|
NextPageButton |
The button for moving to the next page. |
|
PreviousPageButton |
The button for moving to the previous page. |
|
NumericButtonPanel |
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 |
---|---|---|
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 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. |
Note: |
---|
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>
See Also