Bug in Datapager after styling

3 posts, 0 answers
  1. Alexander
    Alexander avatar
    3 posts
    Member since:
    Jan 2014

    Posted 10 Sep 2014 Link to this post

    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. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 10 Sep 2014 Link to this post

    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.
     
  3. UI for WPF is Visual Studio 2017 Ready
  4. Alexander
    Alexander avatar
    3 posts
    Member since:
    Jan 2014

    Posted 12 Sep 2014 Link to this post

    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.
Back to Top