Getting Started

Adding the RadTileView to the page

In order to use RadTileView control in your projects you have to add references to the following assemblies:

• Telerik.Windows.Controls
• Telerik.Windows.Controls.Navigation
• Telerik.Windows.Data

You can find more info here.

<UserControl x:Class="RadTileViewHelpExamples.MainPage" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"> 
    <Grid x:Name="LayoutRoot"> 
        <telerik:RadTileView> 
            <telerik:RadTileViewItem Header="Item1"> 
                <TextBlock Text="Item1 Content"/> 
            </telerik:RadTileViewItem> 
            <telerik:RadTileViewItem Header="Item2"> 
                <TextBlock Text="Item2 Content"/> 
            </telerik:RadTileViewItem> 
            <telerik:RadTileViewItem Header="Item3" > 
                <TextBlock Text="Item3 Content"/> 
            </telerik:RadTileViewItem> 
        </telerik:RadTileView> 
    </Grid> 
</UserControl> 

As you can see from the image below the items are in restored state by default.

Setting maximized item

To set an item in maximized state you can use the TileState property and set its value to Maximized.

<telerik:RadTileView> 
    <telerik:RadTileViewItem TileState="Maximized" Header="Item1"> 
        <TextBlock Text="Item1 Content"/> 
    </telerik:RadTileViewItem> 
    <telerik:RadTileViewItem Header="Item2"> 
        <TextBlock Text="Item2 Content"/> 
    </telerik:RadTileViewItem> 
    <telerik:RadTileViewItem Header="Item3" > 
        <TextBlock Text="Item3 Content"/> 
    </telerik:RadTileViewItem> 
</telerik:RadTileView> 

As you can see from the image below Item1 is now in maximized state.

Setting minimized position

To set the minimized area positions use the MinimizedItemsPosition property. It is an enumeration with the following values:

• Left
• Top
• Right
• Bottom

<telerik:RadTileView MinimizedItemsPosition="Bottom"> 
    <telerik:RadTileViewItem TileState="Maximized" Header="Item1"> 
        <TextBlock Text="Item1 Content"/> 
    </telerik:RadTileViewItem> 
    <telerik:RadTileViewItem Header="Item2"> 
        <TextBlock Text="Item2 Content"/> 
    </telerik:RadTileViewItem> 
    <telerik:RadTileViewItem Header="Item3" > 
        <TextBlock Text="Item3 Content"/> 
    </telerik:RadTileViewItem> 
</telerik:RadTileView> 

See Also

• Visual Structure
• Minimizing And Maximizing
• Rows and Columns
• Fluid Content Control