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.