With the Q3 2010 release, RadTileView supports two new major features:
Using the Visibility property of the TileViewItems you can now choose which items you see at any given moment.
By setting the Position property of the TileViewItems you’ll now be able to customize the positions of your Restored or Minimized items.
There are some important notes considering the position of an item:
In this article I will show you how to bind your items position and visibility, so that you can easily customize the look of your TIleView.
Firs of all, lets create a simple TileView:
<
UserControl
x:Class
=
"TileViewPositionExample.MainPage"
xmlns:telerik
=
"http://schemas.telerik.com/2008/xaml/presentation"
mc:Ignorable
=
"d"
d:DesignHeight
=
"300"
d:DesignWidth
=
"400"
>
<
Grid
x:Name
=
"LayoutRoot"
Background
=
"White"
>
<
Grid.RowDefinitions
>
<
RowDefinition
/>
<
RowDefinition
Height
=
"Auto"
/>
</
Grid.RowDefinitions
>
<
Grid.Resources
>
<
DataTemplate
x:Key
=
"headerTemplate"
>
<
TextBlock
Text
=
"{Binding Header}"
/>
</
DataTemplate
>
<
DataTemplate
x:Key
=
"contentTemplate"
>
<
StackPanel
Orientation
=
"Horizontal"
>
<
TextBlock
Text
=
"Content of "
></
TextBlock
>
<
TextBlock
Text
=
"{Binding Header}"
></
TextBlock
>
</
StackPanel
>
</
DataTemplate
>
</
Grid.Resources
>
<
telerik:RadTileView
x:Name
=
"myTileView"
Grid.Row
=
"0"
Width
=
"800"
Height
=
"500"
ItemTemplate
=
"{StaticResource headerTemplate}"
ContentTemplate
=
"{StaticResource contentTemplate}"
>
</
telerik:RadTileView
>
</
Grid
>
</
UserControl
>
... and a ViewModel class for our TileViewItems:
public
class
TileViewItemViewModel : INotifyPropertyChanged
{
private
int
position;
private
bool
isVisible;
public
string
Header {
get
;
set
; }
public
int
Position
{
get
{
return
position; }
set
{
if
(position != value)
{
position = value;
OnPropertyChanged(
"Position"
);
}
}
}
public
bool
IsVisible
{
get
{
return
this
.isVisible;
}
set
{
if
(isVisible != value)
{
isVisible = value;
OnPropertyChanged(
"IsVisible"
);
}
}
}
public
event
PropertyChangedEventHandler PropertyChanged;
protected
void
OnPropertyChanged(
string
propertyName)
{
if
(PropertyChanged !=
null
)
{
PropertyChanged(
this
,
new
PropertyChangedEventArgs(propertyName));
}
}
}
The next step is to bind the RadTileViewItems position and visibility properties to the respective properties in the ViewModel :
<
UserControl
x:Class
=
"TileViewPositionExample.MainPage"
xmlns:telerik
=
"http://schemas.telerik.com/2008/xaml/presentation"
mc:Ignorable
=
"d"
d:DesignHeight
=
"300"
d:DesignWidth
=
"400"
>
<
Grid
x:Name
=
"LayoutRoot"
Background
=
"White"
>
<
Grid.RowDefinitions
>
<
RowDefinition
/>
<
RowDefinition
Height
=
"Auto"
/>
</
Grid.RowDefinitions
>
<
Grid.Resources
>
<
telerik:BooleanToVisibilityConverter
x:Key
=
"boolenConverter"
/>
<
telerik:ContainerBindingCollection
x:Key
=
"bindings"
>
<
telerik:ContainerBinding
PropertyName
=
"Visibility"
Binding
=
"{Binding IsVisible, Converter={StaticResource boolenConverter}, Mode=TwoWay}"
/>
<
telerik:ContainerBinding
PropertyName
=
"Position"
Binding
=
"{Binding Position, Mode=TwoWay}"
/>
</
telerik:ContainerBindingCollection
>
<
DataTemplate
x:Key
=
"headerTemplate"
telerik:ContainerBinding.ContainerBindings
=
"{StaticResource bindings}"
>
<
TextBlock
Text
=
"{Binding Header}"
/>
</
DataTemplate
>
<
DataTemplate
x:Key
=
"contentTemplate"
>
<
StackPanel
>
<
StackPanel
Orientation
=
"Horizontal"
>
<
TextBlock
Text
=
"Content of "
></
TextBlock
>
<
TextBlock
Text
=
"{Binding Header}"
></
TextBlock
>
</
StackPanel
>
<
StackPanel
Orientation
=
"Horizontal"
>
<
TextBlock
Text
=
"Current position: "
></
TextBlock
>
<
TextBlock
Text
=
"{Binding Position}"
></
TextBlock
>
</
StackPanel
>
</
StackPanel
>
</
DataTemplate
>
</
Grid.Resources
>
<
telerik:RadTileView
x:Name
=
"myTileView"
Grid.Row
=
"0"
Width
=
"800"
Height
=
"500"
ItemTemplate
=
"{StaticResource headerTemplate}"
ContentTemplate
=
"{StaticResource contentTemplate}"
>
</
telerik:RadTileView
>
</
Grid
>
</
UserControl
>
Now we have to put some controls that allow us to manipulate the properties of the items. I’m going to create a simple UserControl that contains a RadNumericUpDown for the position and a CheckBox for the visibility:
<
ItemsControl
x:Name
=
"manipulationContrils"
Grid.Row
=
"1"
ItemsSource
=
"{Binding ElementName=myTileView, Path=ItemsSource}"
>
<
ItemsControl.ItemTemplate
>
<
DataTemplate
>
<
StackPanel
Orientation
=
"Horizontal"
>
<
StackPanel
Orientation
=
"Horizontal"
Margin
=
"10 5"
Width
=
"130"
>
<
TextBlock
Text
=
"Item "
></
TextBlock
>
<
TextBlock
Text
=
"{Binding Header}"
></
TextBlock
>
<
TextBlock
Text
=
"'s Position: "
></
TextBlock
>
</
StackPanel
>
<
StackPanel
Orientation
=
"Horizontal"
Margin
=
"0 5"
>
<
telerik:RadNumericUpDown
Value
=
"{Binding Position, Mode=TwoWay}"
/>
<
TextBlock
Text
=
"Is visible: "
Margin
=
"10 0 0 0"
></
TextBlock
>
<
CheckBox
IsChecked
=
"{Binding IsVisible, Mode=TwoWay}"
/>
</
StackPanel
>
</
StackPanel
>
</
DataTemplate
>
</
ItemsControl.ItemTemplate
>
</
ItemsControl
>
The last thing to do is put some items in our TileView:
ObservableCollection<TileViewItemViewModel> items =
new
ObservableCollection<TileViewItemViewModel>
{
new
TileViewItemViewModel(){Header =
"One"
, IsVisible =
true
, Position = 3},
new
TileViewItemViewModel(){Header =
"Two"
, IsVisible =
true
},
new
TileViewItemViewModel(){Header =
"Three"
, IsVisible =
true
, Position = 2},
new
TileViewItemViewModel(){Header =
"Four"
, IsVisible =
true
, Position = 4},
new
TileViewItemViewModel(){Header =
"Five"
, IsVisible =
false
},
new
TileViewItemViewModel(){Header =
"Six"
, IsVisible =
false
}
};
this
.myTileView.ItemsSource = items;
… and run the application. The output should be something like this:
This is it, more or less. The new properties give you the flexibility to customize your TileView at any time and any way you want to.
You can download the sample project, check out some online demos on the following links:
Telerik TileView for Silverlight
And download a trial version of the Telerik RadControls from here:
Valentin Stoychev (@ValioStoychev) for long has been part of Telerik and worked on almost every UI suite that came out of Telerik. Valio now works as a Product Manager and strives to make every customer a successful customer.