Radpagination vertical ellipse

[Sumith Damodaran]

Hi,
I was trying to use radpagnication control for images in an vertical view as ellipses. I could not make it work vertically, the code examples and other resources shows it horizantally. Could you please guide me to achieve this
Many thanks
Sumith

[Todor]

Hi Sumith,

Thank you for your question.

Here's an example of vertical pagination control with ellipses:

<telerikPrimitives:RadPaginationControl DisplayMode="All" PageProvider="{Binding ElementName=slideView}" Grid.Row="1">
    <telerikPrimitives:RadPaginationControl.ThumbnailListStyle>
        <Style TargetType="pagination:PaginationThumbnailListControl">
            <Setter Property="VirtualizationStrategyDefinition">
                <Setter.Value>
                    <telerikPrimitives:StackVirtualizationStrategyDefinition Orientation="Vertical"/>
                </Setter.Value>
            </Setter>
        </Style>
    </telerikPrimitives:RadPaginationControl.ThumbnailListStyle>
    <telerikPrimitives:RadPaginationControl.ItemTemplate>
            <DataTemplate>
                <Border Width="28" Height="28" Background="#00FFFFFF">
                    <Ellipse Stroke="{StaticResource PhoneForegroundBrush}"
                StrokeThickness="2" Width="8" Height="8"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"/>
                </Border>
            </DataTemplate>
    </telerikPrimitives:RadPaginationControl.ItemTemplate>
    <telerikPrimitives:RadPaginationControl.CurrentItemTemplate>
        <DataTemplate>
            <Border Width="28" Height="28" Background="#00FFFFFF">
                <Ellipse Fill="{StaticResource PhoneForegroundBrush}"
                Width="12" Height="12"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"/>
            </Border>
        </DataTemplate>
    </telerikPrimitives:RadPaginationControl.CurrentItemTemplate>
    <telerikPrimitives:RadPaginationControl.LayoutDefinition>
        <telerikPrimitives:PaginationControlLayoutDefinition ThumbnailListPosition="1,0" IndexLabelPosition="2,0" RightArrowPosition="3,0">
            <telerikPrimitives:PaginationControlLayoutDefinition.Rows>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </telerikPrimitives:PaginationControlLayoutDefinition.Rows>
        </telerikPrimitives:PaginationControlLayoutDefinition>
    </telerikPrimitives:RadPaginationControl.LayoutDefinition>
    <telerikPrimitives:RadPaginationControl.LeftArrowTemplate>
        <DataTemplate>
            <Border Background="#00FFFFFF">
                <Path Data="F1M52.3315,32.333L69.1635,46.982L71.2105,44.784L56.7355,32.333L71.2105,19.878L69.1635,17.68z"
                    Fill="{StaticResource PhoneForegroundBrush}" Height="29.302" Width="18.879" Stretch="Fill" Margin="12,0,12,0">
                    <Path.RenderTransformOrigin>
                        <Point X="0.5" Y="0.5"/>
                    </Path.RenderTransformOrigin>
                    <Path.RenderTransform>
                        <RotateTransform Angle="90" CenterX="1" CenterY="1"/>
                    </Path.RenderTransform>
                </Path>
            </Border>
        </DataTemplate>
    </telerikPrimitives:RadPaginationControl.LeftArrowTemplate>
    <telerikPrimitives:RadPaginationControl.RightArrowTemplate>
        <DataTemplate>
            <Border Background="#00FFFFFF">
                <Path Data="F1M123.5371,32.3291L106.7051,17.6801L104.6581,19.8781L119.1331,32.3291L104.6581,44.7841L106.7051,46.9821z"
                Fill="{StaticResource PhoneForegroundBrush}" Height="29.302" Width="18.879" Stretch="Fill" Margin="12,0,12,0">
                    <Path.RenderTransformOrigin>
                        <Point X="0.5" Y="0.5"/>
                    </Path.RenderTransformOrigin>
                    <Path.RenderTransform>
                        <RotateTransform Angle="90" />
                    </Path.RenderTransform>
                </Path>
            </Border>
        </DataTemplate>
    </telerikPrimitives:RadPaginationControl.RightArrowTemplate>
</telerikPrimitives:RadPaginationControl>

In short, you define a new LayoutDefinition to arrange the elements in more appropriate for vertical pagination way and set the VirtualizationStrategyDefinition of the thumbnail list to vertical. Then you will probably need to define different arrows so that they are vertical and define the item template and current item template to be ellipses.

I hope this information helps.

Kind regards,
Todor
the Telerik team

[Sumith Damodaran]

Thanks,
Used the same code, its workng now and modified as per my requirement, i am adding it here if someone else is looking for this info.
<UserControl.Resources>
        <SolidColorBrush x:Key="HighlightBrush" Color="#187DAD"/>
        <DataTemplate x:Key="Dot">
            <Border Width="28" Height="28" >
                <Ellipse Stroke="#d3d2d2"
                         StrokeThickness="2" Width="12" Height="12"
                         HorizontalAlignment="Center"
                         VerticalAlignment="Center"/>
            </Border>
        </DataTemplate>
        <DataTemplate x:Key="DotFilled">
            <Border Width="28" Height="28" >
                <Ellipse Fill="#686568"
                         Width="15" Height="15"
                         HorizontalAlignment="Center"
                         VerticalAlignment="Center"/>
            </Border>
        </DataTemplate>
    </UserControl.Resources>

<Grid Grid.Row="1"  Grid.Column="0"   Grid.ColumnSpan="2">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="40"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <telerikPrimitives:RadSlideView Grid.Column="1"
                                                            x:Name="slideView" ItemsSource="{Binding ProductImages}" Orientation="Vertical"
                         Width="320" Height="450" HorizontalAlignment="Center" VerticalAlignment="Center">
                                <telerikPrimitives:RadSlideView.ItemTemplate>
                                    <DataTemplate>
                                        <Image Source="{Binding}"  />
                                    </DataTemplate>
                                </telerikPrimitives:RadSlideView.ItemTemplate>
                            </telerikPrimitives:RadSlideView>
                            <telerikPrimitives:RadPaginationControl DisplayMode="Thumbnails" PageProvider="{Binding ElementName=slideView}" Grid.Row="1"
                                                                ItemTemplate="{StaticResource Dot}"
                                  Height="150"      CurrentItemTemplate="{StaticResource DotFilled}" VerticalAlignment="Center" UseLayoutRounding="False" HorizontalContentAlignment="Left" HorizontalAlignment="Center"
                                    >
                                <telerikPrimitives:RadPaginationControl.ThumbnailListStyle>
                                    <Style TargetType="telerikPagination:PaginationThumbnailListControl">
                                        <Setter Property="VirtualizationStrategyDefinition">
                                            <Setter.Value>
                                                <telerikPrimitives:StackVirtualizationStrategyDefinition Orientation="Vertical"/>
                                            </Setter.Value>
                                        </Setter>
                                    </Style>
                                </telerikPrimitives:RadPaginationControl.ThumbnailListStyle>
                                <telerikPrimitives:RadPaginationControl.LayoutDefinition>
                                    <telerikPrimitives:PaginationControlLayoutDefinition ThumbnailListPosition="1,0" IndexLabelPosition="2,0" RightArrowPosition="3,0">
                                        <telerikPrimitives:PaginationControlLayoutDefinition.Rows>
                                            <RowDefinition Height="*"/>

                                        </telerikPrimitives:PaginationControlLayoutDefinition.Rows>
                                    </telerikPrimitives:PaginationControlLayoutDefinition>
                                </telerikPrimitives:RadPaginationControl.LayoutDefinition>

                            </telerikPrimitives:RadPaginationControl>
                        </Grid>