Two new features in Telerik TileView

by XAML Team | Comments 3

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

Changing item's visibility

Using the Visibility property of the TileViewItems you can now choose which items you see at any given moment.

Dynamically setting item's position

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:

  • If there is a Maximized item it will always be on position zero and if you set another item to position zero it will automatically maximize.
  • The position change swaps the items i.e. if you set item Foo’s position to three it will go there and the item that was on position three will go to item Foo’s previous position.
  • When you initially set positions to the items, if you don’t specify a position or try to set a position that is already occupied the item will go to the first available.

Example

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"
        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>
<UserControl x:Class="TileViewPositionExample.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"
xmlns:telerikInput="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"
xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"  
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>
 
<telerikNavigation:RadTileView x:Name="myTileView" Grid.Row="0" Width="800" Height="500"
ItemTemplate="{StaticResource headerTemplate}" ContentTemplate="{StaticResource contentTemplate}">
</telerikNavigation:RadTileView>

<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">
<telerikInput: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>
</Grid>
</UserControl>
<UserControl x:Class="TileViewPositionExample.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"
xmlns:telerikInput="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"
xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"  
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>
 
<telerikNavigation:RadTileView x:Name="myTileView" Grid.Row="0" Width="800" Height="500"
ItemTemplate="{StaticResource headerTemplate}" ContentTemplate="{StaticResource contentTemplate}">
</telerikNavigation:RadTileView>

<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">
<telerikInput: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>
</Grid>
</UserControl>
<UserControl x:Class="TileViewPositionExample.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"
xmlns:telerikInput="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"
xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"  
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>
 
<telerikNavigation:RadTileView x:Name="myTileView" Grid.Row="0" Width="800" Height="500"
ItemTemplate="{StaticResource headerTemplate}" ContentTemplate="{StaticResource contentTemplate}">
</telerikNavigation:RadTileView>

<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">
<telerikInput: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>
</Grid>
</UserControl
<UserControl x:Class="TileViewPositionExample.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"
xmlns:telerikInput="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"
xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"  
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>
 
<telerikNavigation:RadTileView x:Name="myTileView" Grid.Row="0" Width="800" Height="500"
ItemTemplate="{StaticResource headerTemplate}" ContentTemplate="{StaticResource contentTemplate}">
</telerikNavigation:RadTileView>

<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">
<telerikInput: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>
</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:

TileViewPositionExample

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

Telerik TileView for WPF

And download a trial version of the Telerik RadControls from here:

RadControls for Silverlight - Download Trial

RadControls for WPF - Download Trial

,
Team Leader,
Windows Phone Team

 

3 Comments

Stelios
Nice example.  The new features of setting tile position and visibility are great as well as the new events. However, I have not seen an example (blogs/forums) of saving/loading the layout tile (positions) similar to how the RadDocking controls performs save/load layout out of the box. Is this something that will be available for the RadTileView soon?  If it's not available with this release do you have an example of how to do that?  
Jesus Estevez
Hi, I think this sample project doesn't work. am I right?
I downloaded and doesn't compile
Jesus Estevez
Hi, I think this sample project doesn't work. am I right?
I downloaded and doesn't compile

Comments

  1.    
     
    		 
    		  
       
  3. (optional, emails won't be shown on public pages)
  4. (optional)
Read more articles by XAML Team - or - read latest articles in Developer Tools
Bloggers Archive Tags
Product Families