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

Desktop .NET

Check Out What's New: Telerik UI for WPF, WinForms and UWP R3 2018 SP

Mobile .NET

Introducing New Telerik UI for Xamarin Visual Studio Item Templates

Desktop Mobile .NET

DataGrid and Calendar MultiDay View Improvements in Telerik UI for UWP R3 2018

Comments

Comments are disabled in preview mode.
Technologies
Topics

Latest updates in your inbox

Subscribe
Follow us