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 Desktop .NET

Getting Started with XAML Islands: Hosting a UWP Control in WPF and WinForms Apps

Kendo UI Web JavaScript

Custom Angular Animations in Our Kendo UI To-Do App

Desktop Mobile .NET

Is That UWP, WPF or WinForms: Bring Your Desktop App to the New Millennium with XAML Islands

Comments

Comments are disabled in preview mode.
Technologies
Topics

Latest updates in your inbox

Subscribe
Follow us