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

[Solved] Radpagination vertical ellipse

2 Answers 109 Views

PaginationControl

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

This question is locked. New answers and comments are not allowed.

2 Answers, 1 is accepted

Accepted

answered on 12 Mar 2013, 08:13 AM

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"/>

</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

Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.

answered on 12 Mar 2013, 11:55 AM

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>