Telerik UI for Windows Phone by Progress

This topic explains the most basic steps which are required to have a fully functioning slide view in your application.

Declaring RadSlideView

Note

Before we can declare RadSlideView we first 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 slide view we first need to declare it on our xaml page, set the desired item template and then populate it with some data. The item template is set through the ItemTemplate property and the population with data is achieved by setting the ItemsSource property to a valid IEnumerable instance. Here is the XAML for our basic slide view:

CopyXAML
<telerikPrimitives:RadSlideView x:Name="radSlideView" ItemsSource="{Binding}" ItemRealizationMode="ViewportItem">
    <telerikPrimitives:RadSlideView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <TextBlock Text="{Binding Title}" FontSize="{StaticResource PhoneFontSizeExtraLarge}"/>
                <Image Source="{Binding ImagePath}" Stretch="None" Grid.Row="1" Margin="0,12,0,0"/>
            </Grid>
        </DataTemplate>
    </telerikPrimitives:RadSlideView.ItemTemplate>
    <telerikPrimitives:RadSlideView.ItemPreviewTemplate>
        <DataTemplate>
            <TextBlock HorizontalAlignment="Center" 
                       VerticalAlignment="Center" 
                       Text="{Binding Description}" 
                       FontSize="{StaticResource PhoneFontSizeLarge}"/>
        </DataTemplate>
    </telerikPrimitives:RadSlideView.ItemPreviewTemplate>
</telerikPrimitives:RadSlideView>
Note

Please note that in order to provide fluent animations of high resolution images, you may need to set the CacheMode property of RadSlideView to BitmapCache. This way you will prevent any flicker that can occur while sliding.

The control works in data-bound mode only and items may not be added directly to the internal items collection. That is why we will add the data in code behind (of course you can provide it through a binding in XAML).

CopyC#
public partial class SamplePage : PhoneApplicationPage
{
    // Constructor
    public SamplePage()
    {
        InitializeComponent();

        List<ViewModel> items = new List<ViewModel>();

        for (int i = 1; i <= 8; i++)
        {
            ViewModel model = new ViewModel()
            {
                Title = "Item " + i,
                ImagePath = "Images/" + i + ".jpg",
                Description = "Description of " + "Item " + i
            };

            items.Add(model);
        }

        this.DataContext = items;
    }
}

Here is the result of the above code:

Slide View-Getting Started