Telerik Forums / UI for WPF
This is a migrated thread and some comments may be shown as answers.

Bug in Datapager after styling

2 Answers 159 Views
DataPager
This is a migrated thread and some comments may be shown as answers.
Alexander
Top achievements
Rank 1
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}">
<!--Nur 1 Zahl im DataPager-->
<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}">
<!--<telerikChromes:StyleManager.Theme>
<telerikChromes:Office_BlackTheme/>
</telerikChromes:StyleManager.Theme>-->
</ScrollViewer>
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

2 Answers, 1 is accepted

Sort by
0
Vanya Pavlova
Telerik team
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.
 
0
Alexander
Top achievements
Rank 1
answered on 12 Sep 2014, 12:11 PM
Thank you for your reply. Your project soultion worked, but using it in our project does not work.

Styling from the telerik style file instead of customizing the control directly then worked the way espected.
Tags
DataPager
Asked by
Alexander
Top achievements
Rank 1
Answers by
Vanya Pavlova
Telerik team
Alexander
Top achievements
Rank 1
Share this question
or