With the Q2 2010 release, RadTileView supports two major new features:
By setting the IsAnimationOptimized property to True, you can turn on the animation optimization. This optimization should be used only when necessary i.e. in scenarios where the visual tree of the TileViewItem is quite large and the animations do not run smooth.
If the sum of the minimized heights/widths of all minimized TileViewItems exceeds the available space, RadTileView will show a ScrollBar allowing you to scroll the minimized items.
This article will show you how to put a GridSplitter between the maximized item and the minimized item and be able to modify the width of the minimized items by dragging the GridSplitter.
First of all, let create a simple RadTileView scenario.
<
UserControl
x:Class
=
"SilverlightApplication1.MainPage"
xmlns:local
=
"clr-namespace:SilverlightApplication1"
xmlns:ms
=
"clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
xmlns:telerik
=
"clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
xmlns:telerikNavigation
=
"clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"
>
<
UserControl.Resources
>
<
DataTemplate
x:Key
=
"HeaderTemplate"
>
<
Grid
>
<
TextBlock
Text
=
"{Binding}"
FontWeight
=
"Bold"
/>
</
Grid
>
</
DataTemplate
>
</
UserControl.Resources
>
<
Grid
x:Name
=
"LayoutRoot"
Background
=
"White"
>
<
telerikNavigation:RadTileView
x:Name
=
"tileView1"
ItemTemplate
=
"{StaticResource HeaderTemplate}"
MaximizeMode
=
"One"
>
<
telerikNavigation:RadTileView.ItemContainerStyle
>
<
Style
TargetType
=
"telerikNavigation:RadTileViewItem"
>
<
Setter
Property
=
"MinimizedHeight"
Value
=
"300"
/>
</
Style
>
</
telerikNavigation:RadTileView.ItemContainerStyle
>
</
telerikNavigation:RadTileView
>
</
Grid
>
</
UserControl
>
...and give the RadTileView some items:
public
partial
class
MainPage : UserControl
{
public
MainPage()
{
InitializeComponent();
this
.tileView1.ItemsSource = Enumerable.Range(0, 10);
}
}
The output from the code above should be similar to:
The next step is to add a GridSplitter to the scene. We will create a Grid panel with 2 Columns. The first column will be with Width="*" and the second one will be with Width="200" (you can put any width value here). This Grid panel will be added behind the TileView. We will also add a GridSplitter in the first column of the Grid panel so we can resize it.
<
UserControl
x:Class
=
"SilverlightApplication1.MainPage"
xmlns:local
=
"clr-namespace:SilverlightApplication1"
xmlns:ms
=
"clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
xmlns:telerik
=
"clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
xmlns:telerikNavigation
=
"clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"
>
<
UserControl.Resources
>
<
DataTemplate
x:Key
=
"HeaderTemplate"
>
<
Grid
>
<
TextBlock
Text
=
"{Binding}"
FontWeight
=
"Bold"
/>
</
Grid
>
</
DataTemplate
>
</
UserControl.Resources
>
<
Grid
x:Name
=
"LayoutRoot"
Background
=
"White"
>
<
Grid
>
<
Grid.ColumnDefinitions
>
<
ColumnDefinition
Width
=
"*"
/>
<
ColumnDefinition
x:Name
=
"column"
Width
=
"300"
/>
</
Grid.ColumnDefinitions
>
<
ms:GridSplitter
HorizontalAlignment
=
"Right"
VerticalAlignment
=
"Stretch"
Width
=
"5"
Background
=
"DarkGray"
Margin
=
"0 7"
/>
</
Grid
>
<
telerikNavigation:RadTileView
x:Name
=
"tileView1"
ItemTemplate
=
"{StaticResource HeaderTemplate}"
MaximizeMode
=
"One"
>
<
telerikNavigation:RadTileView.ItemContainerStyle
>
<
Style
TargetType
=
"telerikNavigation:RadTileViewItem"
>
<
Setter
Property
=
"MinimizedHeight"
Value
=
"300"
/>
</
Style
>
</
telerikNavigation:RadTileView.ItemContainerStyle
>
</
telerikNavigation:RadTileView
>
</
Grid
>
</
UserControl
>
Now if you run the project, depending on your resolution you might not see the GridSplitter, because the maximized item might be overlapping it. The next, and probably the most important steps is to bind the MinimizedColumnWidth property of RadTileView to the Width property of the column (the one with x:Name="column").
<
telerikNavigation:RadTileView
x:Name
=
"tileView1"
MinimizedColumnWidth
=
"{Binding Width, ElementName=column, Mode=TwoWay, Converter={StaticResource Converter}}"
ItemTemplate
=
"{StaticResource HeaderTemplate}"
MaximizeMode
=
"One"
>
<
telerikNavigation:RadTileView.ItemContainerStyle
>
<
Style
TargetType
=
"telerikNavigation:RadTileViewItem"
>
<
Setter
Property
=
"MinimizedHeight"
Value
=
"300"
/>
</
Style
>
</
telerikNavigation:RadTileView.ItemContainerStyle
>
</
telerikNavigation:RadTileView
>
One might ask why are we using a converter when we can just do:
MinimizedColumnWidth
=
"{Binding
Width.Value, ElementName=column, Mode=TwoWay}"
The reason why a converter is necessary is because there is a margin between the maximized item and the minimized items and the converter will allow us to do fine tuning and place the GridSplitter exactly between the maximized item and the minimized items.
This is how the converter looks like:
public
class
GridLengthConverter : IValueConverter
{
public
object
Convert(
object
value, Type targetType,
object
parameter, System.Globalization.CultureInfo culture)
{
GridLength length = (GridLength)value;
return
length.Value - 12.5;
}
public
object
ConvertBack(
object
value, Type targetType,
object
parameter, System.Globalization.CultureInfo culture)
{
return
value;
}
}
This 12.5 is the fine tuning I was talking about. Now if you run the code so far, you will probably end up with something like this:
If you try to drag, however, you will realize that you can't actually grab the GridSplitter. This is because RadTileView is above the GridSplitter and the default background of RadTileView is transparent. But besides setting RadTileView's Background="{x:Null}", we also have to set the Background of RadTileView's panel to null. This is how the TileView should look like after the changes:
<
telerikNavigation:RadTileView
x:Name
=
"tileView1"
Background
=
"{x:Null}"
ItemTemplate
=
"{StaticResource HeaderTemplate}"
MinimizedColumnWidth
=
"{Binding Width, ElementName=column, Mode=TwoWay, Converter={StaticResource Converter}}"
MaximizeMode
=
"One"
>
<
telerikNavigation:RadTileView.ItemsPanel
>
<
ItemsPanelTemplate
>
<
Canvas
Background
=
"{x:Null}"
/>
</
ItemsPanelTemplate
>
</
telerikNavigation:RadTileView.ItemsPanel
>
<
telerikNavigation:RadTileView.ItemContainerStyle
>
<
Style
TargetType
=
"telerikNavigation:RadTileViewItem"
>
<
Setter
Property
=
"MinimizedHeight"
Value
=
"300"
/>
</
Style
>
</
telerikNavigation:RadTileView.ItemContainerStyle
>
</
telerikNavigation:RadTileView
>
Now if you run the code, you will be able to change the minimized item's width by dragging the GridSplitter.
Let's take things a little bit further. What if we want to change the height of the minimized items as well i.e. to resize the minimized items uniformly. To do this, we will have to bind the MinimizedHeight property of the items to the Width of the column (the column with x:Name="column"). Since bindings in the Setter of a property in an ItemContainerStyle are not available in Silverlight, we will have to use Telerik's container bindings.
<
UserControl.Resources
>
<
local:GridLengthConverter
x:Key
=
"Converter"
/>
<
telerik:ContainerBindingCollection
x:Key
=
"ContainerBindings"
>
<
telerik:ContainerBinding
PropertyName
=
"MinimizedHeight"
Binding
=
"{Binding Width, ElementName=column, Mode=TwoWay, Converter={StaticResource Converter}}"
/>
</
telerik:ContainerBindingCollection
>
<
DataTemplate
x:Key
=
"HeaderTemplate"
telerik:ContainerBinding.ContainerBindings
=
"{StaticResource ContainerBindings}"
>
<
Grid
>
<
TextBlock
Text
=
"{Binding}"
FontWeight
=
"Bold"
/>
</
Grid
>
</
DataTemplate
>
</
UserControl.Resources
>
Now if you run the project and resize, you will see the following output:
More or less, this is it. For further reference, please have a look at the sample project.
Telerik TileView control is available for download as part of RadControls for Silverlight/WPF at:
RadControls for Silverlight - Download Trial
RadControls for WPF - Download Trial
To check the online demos, please follow the link below:
Telerik TileView for Silverlight