This topic explains the on-demand loading of items.
Setting-up the view in XAML
In order to realize only one item (the Viewport one) at a time we
should first set the ItemRealizationMode property to ViewportItem.
Next we will specify item template with a title and a picture. And finally
we will setup the ItemPreviewTemplate to provide short description for the item that ia about to be animated.
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>Creating the view model
We will have a business object with three properties - Title, ImagePath and Description:
CopyC#
public class ViewModel
{
public string Title
{
get;
set;
}
public string ImagePath
{
get;
set;
}
public string Description
{
get;
set;
}
}Next we need to populate a list with items to pass to the slide view as ItemsSource:
CopyC#
public partial class SamplePage : PhoneApplicationPage
{
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;
}
}Modifying the built-in busy indicator
The built-in RadBusyIndicator will have initial delay of 300
milliseconds before it starts and is with its default animation style.
We can alter its properties by accessing the BusyIndicatorStyle property of each item container:
 Note |
|---|
We need to add the SlideViewItem namespace in order to modify its style: CopyXAML xmlns:telerikSlideView="clr-namespace:Telerik.Windows.Controls.SlideView;assembly=Telerik.Windows.Controls.Primitives" |
CopyXAML
<telerikPrimitives:RadSlideView.ItemContainerStyle>
<Style TargetType="telerikSlideView:SlideViewItem">
<Setter Property="BusyIndicatorStyle">
<Setter.Value>
<Style TargetType="telerikPrimitives:RadBusyIndicator">
<Setter Property="AnimationStyle" Value="AnimationStyle7"/>
<Setter Property="InitialDelay" Value="0:0:0"/>
</Style>
</Setter.Value>
</Setter>
</Style>
</telerikPrimitives:RadSlideView.ItemContainerStyle>When the item that is about to become the viewport one is ready to be rendered,
the control will bring it into view using a RadFadeAnimation instance.
We can change this default animation and set it to any valid RadAnimation instance:
CopyXAML
<telerikPrimitives:RadSlideView.ItemContainerStyle>
<Style TargetType="telerikSlideView:SlideViewItem">
<Setter Property="LoadAnimation">
<Setter.Value>
<telerikCore:RadScaleAnimation StartScaleX="0.5" StartScaleY="0.5" EndScaleX="1" EndScaleY="1"/>
</Setter.Value>
</Setter>
</Style>
</telerikPrimitives:RadSlideView.ItemContainerStyle>