Telerik UI for Windows Phone by Progress

This topic explains the most basic steps which are required to have a fully functioning Pagination control in your application. Currently the only control that implements the IPageProvider interface is RadSlideView. Therefore we need to create a RadSlideView instance and pass its reference as a value to the PageProvider property of RadPaginationControl.

Declaring the slide view

For more information about how to declare a slide view refer to the Getting Started help topic of the control.

Declaring the pagination control

Note

Before we can declare RadPaginationControl we first need to declare the xaml namespace for the Telerik.Windows.Controls.Primitives assembly which is:

CopyXAML
xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"

To have a working pagination control we first need to declare it on our xaml page and specify its PageProvider property (we assume that there is a RadSlideView instance declared, named "radSlideView"):

CopyXAML
<telerikPrimitives:RadPaginationControl PageProvider="{Binding ElementName=radSlideView}"/>

Now that we have the page provider we need to specify the desired DisplayMode of the control. We want to display thumbnails for each item within the slide view as well as the previous/next arrows. Here is how to achieve this:

CopyXAML
<telerikPrimitives:RadPaginationControl PageProvider="{Binding ElementName=radSlideView}" DisplayMode="ArrowsAndThumbnails"/>

Now let's specify the desired thumbnail template to visualize each item from the page providing slide view:

CopyXAML
<telerikPrimitives:RadPaginationControl PageProvider="{Binding ElementName=radSlideView}" 
                                        DisplayMode="ArrowsAndThumbnails">
    <telerikPrimitives:RadPaginationControl.ItemTemplate>
        <DataTemplate>
            <Ellipse Width="8" Height="8" Stroke="{StaticResource PhoneForegroundBrush}" StrokeThickness="2" Margin="12"/>
        </DataTemplate>
    </telerikPrimitives:RadPaginationControl.ItemTemplate>
</telerikPrimitives:RadPaginationControl>

Finally we will want to show some visual indication about the current page (the SelectedItem value within the slide view). For this purpose we will use the CurrentItemTemplate property:

CopyXAML
<telerikPrimitives:RadPaginationControl PageProvider="{Binding ElementName=radSlideView}" 
                                        DisplayMode="ArrowsAndThumbnails"
                                        Grid.Row="1">
    <telerikPrimitives:RadPaginationControl.ItemTemplate>
        <DataTemplate>
            <Ellipse Width="8" Height="8" Stroke="{StaticResource PhoneForegroundBrush}" StrokeThickness="2" Margin="12"/>
        </DataTemplate>
    </telerikPrimitives:RadPaginationControl.ItemTemplate>
    <telerikPrimitives:RadPaginationControl.CurrentItemTemplate>
        <DataTemplate>
            <Ellipse Width="12" Height="12" Fill="{StaticResource PhoneForegroundBrush}" Margin="8"/>
        </DataTemplate>
    </telerikPrimitives:RadPaginationControl.CurrentItemTemplate>
</telerikPrimitives:RadPaginationControl>

And here is the result of the above code:

Pagination-Getting Started