With this post I’ll show you how to create a simple catalog like functionality for your application using RadTileView and RadDataPager.
We will create a catalog with 10 000 RadTileViewItems distributed in 100 pages and each page will have UI Virtualization. At the end this sample application will look like this:
Demo
We’ll start with a tileview, a datapager
<Grid x:Name="LayoutRoot" Background="White"> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <telerik:RadTileView x:Name="myTileView" /> <telerik:RadDataPager Grid.Row="1" /> </Grid>… and a simple business item model:
public class BusinessItemViewModel { public string Header { get; set; } }Now let’s add a view model for our main page:
public class MainPageViewModel{ private ObservableCollection<BusinessItemViewModel> items; public MainPageViewModel() { this.items = new ObservableCollection<BusinessItemViewModel>(); this.LoadSomeItems(); } public ObservableCollection<BusinessItemViewModel> Items { get { return this.items; } } private void LoadSomeItems() { for (int i = 0; i < 10000; i++) { this.items.Add(new BusinessItemViewModel() { Header = i.ToString() }); } }}All we have to do now is to associate the view model and the main page, set some styles and bind the RadDataPager and the RadTileView:
<UserControl.DataContext> <local:MainPageViewModel /></UserControl.DataContext><UserControl.Resources> <Style TargetType="telerik:RadTileView"> <Setter Property="ColumnWidth" Value="325" /> <Setter Property="RowHeight" Value="275" /> <Setter Property="MinimizedColumnWidth" Value="180" /> <Setter Property="MinimizedRowHeight" Value="155" /> <Setter Property="ColumnsCount" Value="10" /> <Setter Property="IsVirtualizing" Value="True" /> <Setter Property="PreservePositionWhenMaximized" Value="True" /> </Style> <Style TargetType="telerik:RadTileViewItem"> <Setter Property="Background" Value="#06749b" /> </Style> <DataTemplate x:Key="headerTemplate"> <TextBlock Text="{Binding Header}" /> </DataTemplate> <DataTemplate x:Key="contentTemplate"> <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="48" FontStyle="Italic" Foreground="#FFFFFF" Text="{Binding Header}" /> </DataTemplate></UserControl.Resources><Grid x:Name="LayoutRoot" Background="White"> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <telerik:RadTileView x:Name="myTileView" ContentTemplate="{StaticResource contentTemplate}" ItemsSource="{Binding PagedSource, ElementName=myDataPager}" ItemTemplate="{StaticResource headerTemplate}" /> <telerik:RadDataPager x:Name="myDataPager" Grid.Row="1" PageSize="100" Source="{Binding Items}" /></Grid>Note that you have to bind the RadTileView to the RadDataPagers PagedSource property.
That is it, now if you run your application you should get a result similar to the one showed above.
You can download the sample SL application from here.
You can download the sample WPF application from here.
And download a trial version of Telerik RadControls from here:
Zarko Vidolov is a .Net developer in Telerik XAML division. In his work he is mainly responsible for RadDiagram, RadTileView, RadBreadcrumb and RadPersistenceFramework development and implementation. Apart from work he enjoys reading and snowboarding.