Facebook Like Box

Main Menu

Hiding all Tiles in RadTileView in Telerik control for WPF

In this article I will explain about addition of an extra feature in RadTileView by Telerik.

You might have used RadTiles in your application and no doubt it is very good and useful control for your existing application and besides all it is very easy to use. There might be cases in which you want to hide all the tiles from TileView on run time (e.g. from some button).

 - In straight forward way you will say that what is so diffficult in it? just bind the Visibility of all tiles to a boolean property and use BooleanToVisibilityConverter for binding. and that's it. So my answer would be Yes you are right, but the problem comes when you are using relatively new attached properties 'telerik:TileViewPanel.IsColumnsShrinkEnabled="True"' and 'telerik:TileViewPanel.IsRowsShrinkEnabled="True"'.

In the above case hiding on hiding all tile will give you exception "Sequence contains no elements"

First let me tell you what these properties do, these are used to remove the extra space between tiles within a TileView. and prevent tiles to cover whole availabe area of TileView. You might need to use these properties very often. I have tested it on Q1 2013, and bug is still there in Telerik TileViewPanel. You can check details here. I will explain a simple work arround for this.

1- Your XAML for the TileView would be like this

<Window x:Class="Hiding_All_Tiles.MainWindow"
        xmlns:Controls="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls" Title="MainWindow" Height="350" Width="525">
            <Controls:BooleanToVisibilityConverter x:Key="booltoVisibilityConverter"/>
            <Style x:Key="myTileStyle" TargetType="{x:Type telerik:RadTileViewItem}">
                <Setter Property="Visibility">
                        <Binding Path="IsTileVisible" Converter="{StaticResource booltoVisibilityConverter}"/>
                <Setter Property="Header" Value="{Binding TitleText}"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"></RowDefinition>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
            <!--<ColumnDefinition />-->
        <Button Command="{Binding HideAllCommand}" Content="HideAll" Grid.Column="1" Grid.Row="0"/>
        <telerik:RadTileView Grid.ColumnSpan="3" ItemContainerStyle="{StaticResource myTileStyle}" ItemsSource="{Binding MyTiles}" Grid.Row="1" x:Name="firstTileView" telerik:TileViewPanel.IsColumnsShrinkEnabled="True"
                                 telerik:TileViewPanel.IsRowsShrinkEnabled="True" ></telerik:RadTileView>

On next page you can see the ViewModel code for command and hiding all tiles and updated ItemContainerStyle for TileView to set binding of TileViewItem.

Add comment

Security code