Telerik blogs

What's new in Telerik TileView control for Silverlight/WPF

July 19, 2010 Release 0 Comments


With the Q2 2010 release, RadTileView supports two major new features:

  • Animation optimization
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.
  • Scrolling of the minimized items

 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

Telerik TileView for WPF

XAML

Comments

Comments are disabled in preview mode.