This is a migrated thread and some comments may be shown as answers.

Bug in Datapager after styling

2 Answers 185 Views

DataPager

This is a migrated thread and some comments may be shown as answers.

Alexander asked on 10 Sep 2014, 01:44 PM

datapager.jpg

We have a Problem with our RadDatapager. After we styled the Pager, it stopped to show two- or four Digit page numbers. We tried a lot but could not find a solution.

Please find below the style of the Datapger and a screenshot with the Problem.

<Style TargetType="{x:Type telerik:RadDataPager}">

<Setter Property="DockPanel.Dock" Value="Bottom"/>
<Setter Property="Grid.Row" Value="1" />
<Setter Property="PageSize" Value="50" />
<Setter Property="Background" Value="#FFE6E6E6"/>
<Setter Property="BorderBrush" Value="#FF999999"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Margin" Value="-5,0" />
<Setter Property="Padding" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="DisplayMode" Value="FirstLastPreviousNextNumeric, Text"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type telerik:RadDataPager}">
<DataPager:DataPagerPresenter Width="Auto" AutoEllipsisMode="{TemplateBinding AutoEllipsisMode}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" DisplayMode="{TemplateBinding DisplayMode}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" ItemCount="{Binding ItemCount, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" NumericButtonStyle="{TemplateBinding NumericButtonStyle}" NumericButtonCount="{TemplateBinding NumericButtonCount}" PageCount="{TemplateBinding PageCount}" PageSize="{Binding PageSize, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" PageIndex="{TemplateBinding PageIndex}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
<telerikChromes:StyleManager.Theme>
<telerikChromes:Office_SilverTheme />
</telerikChromes:StyleManager.Theme>
</DataPager:DataPagerPresenter>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="NumericButtonStyle">
<Setter.Value>
<Style TargetType="{x:Type ButtonBase}">
<Setter Property="BorderBrush" Value="#999999"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Background" Value="#FFE6E6E6"/>
<Setter Property="Width" Value="40"/>
<Setter Property="Height" Value="Auto"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Margin" Value="2,0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ButtonBase}">
<Border x:Name="PageButton" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0" Background="{TemplateBinding Background}" CornerRadius="2">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetProperty="Background" Storyboard.TargetName="PageButton">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="#FFCCCCCC"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetProperty="Background" Storyboard.TargetName="PageButton">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="#FF99CC00"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetProperty="Background" Storyboard.TargetName="PageButton">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="#FFE6E6E6"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Checked">
<Storyboard>
<ObjectAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetProperty="Background" Storyboard.TargetName="PageButton">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="#FFE6E6E6"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocuseStatesGroup">
<VisualState x:Name="Unfocused"/>
<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetProperty="Background" Storyboard.TargetName="PageButton">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="#FF99CC00"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border Background="#E6E6E6">
<ContentControl Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsTabStop="False" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
</Style>

<Style TargetType="{x:Type DataPager:DataPagerPresenter}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataPager:DataPagerPresenter}">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<Grid HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Orientation="Horizontal" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<telerik:RadButton x:Name="MoveToFirstPageButton" Command="telerik:RadDataPagerCommands.MoveToFirstPage" Height="19" InnerCornerRadius="0" Margin="5,2,2,2" Visibility="{Binding PagerControlsVisibility.MoveToFirstPageControlVisibility, RelativeSource={RelativeSource TemplatedParent}}" Width="18">
<telerik:StyleManager.Theme>
<telerik:Office_BlackTheme/>
</telerik:StyleManager.Theme>
<StackPanel Orientation="Horizontal">
<Rectangle Fill="#434343" HorizontalAlignment="Center" Height="7" VerticalAlignment="Center" Width="1"/>
<Path Data="M0,0L3.5,3.5 0,7z" Fill="#434343" HorizontalAlignment="Center" Height="7" RenderTransformOrigin="0.5,0.5" VerticalAlignment="Center" Width="4">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleY="1" ScaleX="-1"/>
<SkewTransform AngleY="0" AngleX="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform/>
</TransformGroup>
</Path.RenderTransform>
</Path>
</StackPanel>
</telerik:RadButton>
<telerik:RadButton x:Name="MoveToPreviousPageButton" Command="telerik:RadDataPagerCommands.MoveToPreviousPage" Height="19" InnerCornerRadius="0" Margin="2,2,10,2" Visibility="{Binding PagerControlsVisibility.MoveToPreviousPageControlVisibility, RelativeSource={RelativeSource TemplatedParent}}" Width="18">
<telerik:StyleManager.Theme>
<telerik:Office_BlackTheme/>
</telerik:StyleManager.Theme>
<Path Data="M0,0L5,3.5 0,7z" Fill="#434343" HorizontalAlignment="Center" Height="7" RenderTransformOrigin="0.5,0.5" VerticalAlignment="Center" Width="5">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleY="1" ScaleX="-1"/>
<SkewTransform AngleY="0" AngleX="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform/>
</TransformGroup>
</Path.RenderTransform>
</Path>
</telerik:RadButton>
<Border BorderThickness="0" Background="Transparent" Height="19" Padding="0" Visibility="{Binding PagerControlsVisibility.NumericElementsControlVisibility, RelativeSource={RelativeSource TemplatedParent}}" VerticalAlignment="Center">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Red" Offset="0"/>
<GradientStop Color="#FF9D9D9D" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
<DataPager:NumericElementsPresenter AutoEllipsisMode="{TemplateBinding AutoEllipsisMode}" NumericButtonStyle="{TemplateBinding NumericButtonStyle}" NumericButtonCount="{TemplateBinding NumericButtonCount}" PageCount="{TemplateBinding PageCount}" PageIndex="{TemplateBinding PageIndex}">
<telerik:StyleManager.Theme>
<telerik:Office_BlackTheme/>
</telerik:StyleManager.Theme>
</DataPager:NumericElementsPresenter>
</Border>
<telerik:RadButton x:Name="MoveToNextPageButton" Command="telerik:RadDataPagerCommands.MoveToNextPage" Height="19" InnerCornerRadius="0" Margin="10,2,2,2" Visibility="{Binding PagerControlsVisibility.MoveToNextPageControlVisibility, RelativeSource={RelativeSource TemplatedParent}}" Width="18">
<telerik:StyleManager.Theme>
<telerik:Office_BlackTheme/>
</telerik:StyleManager.Theme>
<Path Data="M0,0L5,3.5 0,7z" Fill="#434343" HorizontalAlignment="Center" Height="7" Margin="1,0,0,0" VerticalAlignment="Center" Width="5"/>
</telerik:RadButton>
<telerik:RadButton x:Name="MoveToLastPageButton" Command="telerik:RadDataPagerCommands.MoveToLastPage" Height="19" InnerCornerRadius="0" Margin="2" Visibility="{Binding PagerControlsVisibility.MoveToLastPageControlVisibility, RelativeSource={RelativeSource TemplatedParent}}" Width="18">
<telerik:StyleManager.Theme>
<telerik:Office_BlackTheme/>
</telerik:StyleManager.Theme>
<StackPanel Orientation="Horizontal">
<Path Data="M0,0L3.5,3.5 0,7z" Fill="#434343" HorizontalAlignment="Center" Height="7" VerticalAlignment="Center" Width="4"/>
<Rectangle Fill="#434343" HorizontalAlignment="Center" Height="7" VerticalAlignment="Center" Width="1"/>
</StackPanel>
</telerik:RadButton>
</StackPanel>
<StackPanel Grid.Column="1" Margin="5,0" Orientation="Horizontal" Visibility="{Binding PagerControlsVisibility.TextControlVisibility, RelativeSource={RelativeSource TemplatedParent}}">
<Border Background="White" HorizontalAlignment="Left" Height="18" Margin="0" VerticalAlignment="Center" Width="0"/>
<Border Background="#CCCCCC" HorizontalAlignment="Left" Height="18" Margin="0,2,16,0" VerticalAlignment="Center" Width="1"/>
<TextBlock Margin="0,2,10,0" telerik:LocalizationManager.ResourceKey="RadDataPagerPage" FontFamily="Verdana" FontSize="10" Text="Seite " VerticalAlignment="Center"/>
<DataPager:DataPagerTextBox Command="telerik:RadDataPagerCommands.MoveToPage" Background="#FCFCFC" BorderBrush="#CCCCCC" BorderThickness="1" FontFamily="Verdana" FontSize="10" Height="Auto" IsEnabled="False" Margin="2,0" Padding="0,2,0,0" PageIndex="{TemplateBinding PageIndex}" HorizontalContentAlignment="Center" VerticalAlignment="Center" VerticalContentAlignment="Center" Width="35">
<telerik:StyleManager.Theme>
<telerik:Office_BlackTheme/>
</telerik:StyleManager.Theme>
</DataPager:DataPagerTextBox>
<TextBlock Margin="5,2,0,0" telerik:LocalizationManager.ResourceKey="RadDataPagerOf" FontFamily="Verdana" FontSize="10" Text="von" VerticalAlignment="Center"/>
<TextBlock Margin="10,2,16,0" FontFamily="Verdana" FontSize="10" Text="{Binding PageCount, RelativeSource={RelativeSource TemplatedParent}}" VerticalAlignment="Center"/>
</StackPanel>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="SnapsToDevicePixels" Value="True"/>
</Style>

<Style TargetType="{x:Type DataPager:DataPagerTextBox}">
<Setter Property="Background" Value="White"/>
<Setter Property="Foreground" Value="#FF434343"/>
<Setter Property="BorderBrush" Value="#FFCCCCCC"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate/>
</Setter.Value>
</Setter>
<Setter Property="Height" Value="Auto"/>
<Setter Property="Padding" Value="3,2"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataPager:DataPagerTextBox}">
<Grid x:Name="RootElement" SnapsToDevicePixels="True" UseLayoutRounding="True">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="OuterBorder">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="#FF99CC00"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="OuterBorder">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="#FFCCCCCC"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" To="0.3" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_ContentHost"/>
</Storyboard>
</VisualState>
<VisualState x:Name="ReadOnly">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ReadOnlyVisualElement"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderThickness" Storyboard.TargetName="OuterBorder">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Thickness>1</Thickness>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="PART_ContentHost">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Thickness>0</Thickness>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="OuterBorder">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="#FF99CC00"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="OuterBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="2">
<Grid>
<Border x:Name="ReadOnlyVisualElement" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="White" CornerRadius="2" Opacity="0"/>
<ScrollViewer x:Name="PART_ContentHost" Background="Transparent" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">

</ScrollViewer>
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

2 Answers, 1 is accepted

answered on 10 Sep 2014, 03:11 PM

PagerButtons.zip

Hello Alexander,

Thank you for contacting us.

As it turns out, you have missed to predefine the template of NumericElementsPresenter of RadDataPager:

<ControlTemplate TargetType="DataPager:NumericElementsPresenter">

<ItemsControl ItemsSource="{Binding Pages}" >

<ItemsControl.ItemsPanel>

<ItemsPanelTemplate>

<VirtualizingStackPanel Orientation="Horizontal" />

</ItemsPanelTemplate>

</ItemsControl.ItemsPanel>

<ItemsControl.ItemTemplate>

<DataTemplate>

.............

</DataTemplate>

</ItemsControl.ItemTemplate>

</ItemsControl>

</ControlTemplate>

I've prepared sample demo, with your own template, you may find it attached.

Please take a look at this demo and let me know how I can assist you further.

Regards,
Vanya Pavlova
Telerik

Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.