TileView new feature: Maximized item docking

February 10, 2011 .NET 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.

Animations, 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.

Related Posts

Developer Central .NET

Why XAML? Why Now?

Desktop .NET

New Controls, VS 2019 and .NET Core Support in Telerik UI for WPF in R1 2019

Developer Central Web Mobile

Drawing Performantly in CSS

Comments

Comments are disabled in preview mode.
Technologies
Topics
Latest Stories
in Your Inbox

Subscribe to be the first to get our expert-written articles and tutorials for developers!

Follow us