Telerik blogs

TileView new feature: Maximized item docking

by Zarko Vidolov
Last Updated: May 27, 2021 Published: February 10, 2011 2 min read Web 0 Comments

 

With the Q1 2011 the RadTileView will support a couple of new features. One of them is the Windows 7 like docking for maximizing an item.

To use this feature will be easy and intuitive. The first thing you'll have to do is turn it on using the IsDockingEnabled property, then drag an item to the desired maximize position(note that depending on the position a respective MaximizeArea will appear) and drop it there.

Example

Here I'll show you how to create a simple RadTileView with docking. First let's add a RadTileView, some DataTemplates and styles for the RadTileView and the RadTileViewItems:

<Grid.Resources>
    <DataTemplate x:Key="itemTemplate">
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="Item" />
            <TextBlock Text="{Binding Name}" />
        </StackPanel>
    </DataTemplate>
    <DataTemplate x:Key="contentTemplate">
        <TextBlock FontStyle="Italic" FontSize="48" Foreground="#FFFFFF" Text="{Binding Name}"
                        HorizontalAlignment="Center" VerticalAlignment="Center" />
    </DataTemplate>
    <Style TargetType="telerik:RadTileViewItem">
        <Setter Property="Background" Value="#06749b" />
    </Style>
    <Style TargetType="telerik:RadTileView">
        <Setter Property="IsDockingEnabled" Value="True" />
        <Setter Property="MinimizedRowHeight" Value="100" />
        <Setter Property="MinimizedColumnWidth" Value="150" />
        <Setter Property="PreservePositionWhenMaximized" Value="True" />
        <Setter Property="ItemTemplate" Value="{StaticResource itemTemplate}" />
        <Setter Property="ContentTemplate" Value="{StaticResource contentTemplate}" />
    </Style>
</Grid.Resources>
<telerik:RadTileView ItemsSource="{Binding}" />
... then let's add the items:


public MainPage()
{
    InitializeComponent();
 
    this.DataContext = SimpleItem.Generate(12);
}
 
public class SimpleItem
{
    public string Name { get; set; }
 
    public static IEnumerable<SimpleItem> Generate(int count)
    {
        List<SimpleItem> items = new List<SimpleItem>();
 
        for (int i = 0; i < count; i++)
        {
            items.Add(new SimpleItem()
            {
                Name = i.ToString(),
            });
        }
        return items;
    }
}


Now if you drag an item to one of the docking positions you'll get something like this:

... and if you drop it there:

 

What's next

This is just one of the new features that will be available with the Q1 Beta and later with the official release. Please stay tuned for upcoming posts, demos and examples showing the rest of the features.

For now you can read the blog post for some of the other new features or  download and play with the new bits.

Silverlight, XAML
About the Author

Zarko Vidolov

is a .Net developer in Telerik XAML division. In his work he is mainly responsible for RadDiagram, RadTileView, RadBreadcrumb and RadPersistenceFramework development and implementation. Apart from work he enjoys reading and snowboarding.

Comments

Comments are disabled in preview mode.