Radpagination vertical ellipse

3 posts, 1 answers
  1. Sumith Damodaran
    Sumith Damodaran avatar
    3 posts
    Member since:
    Jan 2010

    Posted 10 Mar 2013 Link to this post

    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
  2. Answer
    Todor
    Admin
    Todor avatar
    778 posts

    Posted 12 Mar 2013 Link to this post

    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
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  3. DevCraft banner
  4. Sumith Damodaran
    Sumith Damodaran avatar
    3 posts
    Member since:
    Jan 2010

    Posted 12 Mar 2013 Link to this post

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