Telerik blogs

TileView with DataPager

by Zarko Vidolov
March 08, 2011 Desktop, WPF 0 Comments


 

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:

RadControls for Silverlight – Download Trial

RadControls for WPF – Download Trial

XAML
About the Author

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.

Comments

Comments are disabled in preview mode.