Telerik blogs

New TileView features

by Zarko Vidolov
June 25, 2011 Release 0 Comments


We are happy to announce that with the Q2 2011 Beta we are adding a couple of new features which will help you to customize the layout of the RadTileView even more.

There are three new TileViewPanel properties:

  • IsRowsShrinkEnabled and IsColumnsShrinkEnabled

Those two properties are effecting the arrange of the items in Restored state. With them you’ll be able to have restored items with different sizes without this causing the appearance of blank spaces between them.

Example:

<telerik:RadTileView ColumnsCount="1"
              RowHeight="Auto"
              telerik:TileViewPanel.IsRowsShrinkEnabled="True">
    <telerik:RadTileViewItem RestoredHeight="100">1</telerik:RadTileViewItem>
    <telerik:RadTileViewItem RestoredHeight="200">2</telerik:RadTileViewItem>
    <telerik:RadTileViewItem RestoredHeight="300">2</telerik:RadTileViewItem>
</telerik:RadTileView>
Result:

(Note that when you use IsRowShrinkEnabled you'd better set the RowHeight to Auto)

  • IsSizeBoundToPosition

This property is available when you’re in shrinking mode (you’ve set IsRowsShrinkEnabled and/or IsColumnsShrinkEnabled to True). If IsSizeBoundToPosition is set to True the items will change their size on position change – on the initial loading the RadTileView remembers the sizes that are set to the corresponding positions (by setting size to the items on this positions) and after that no matter which item you set to (lets say) position zero it will take the initial position zero size.

There’s one new RadTileView property:

  • IsItemsSizeInPercentages

If this property is set to True the RestoredWidth and RestoredHeight of the RadTileViewItems will be converted to percentage of the RadTileView size.

For example if you define a RadTileView like this:

<telerik:RadTileView ColumnWidth="Auto"
                    IsItemsSizeInPercentages="True"
                    telerik:TileViewPanel.IsColumnsShrinkEnabled="True">
    <telerik:RadTileViewItem RestoredHeight="100" RestoredWidth="20">1</telerik:RadTileViewItem>
    <telerik:RadTileViewItem RestoredHeight="50" RestoredWidth="80">2</telerik:RadTileViewItem>
</telerik:RadTileView>
the result will be:

(note that the items sizes will stay proportional even if you resize RadTileView, because they will recalculate)

Below I'll create an example which will take advantage of all new RadTileView features.

Lets start with the TileViewItem view model:

public class MyTileViewItem : ViewModelBase
{
    private double restoredWidth;
    private double restoredHeight;
 
    public string Header { get; set; }
    public string Content { get; set; }
    public double RestoredWidth
    {
        get
        {
            return this.restoredWidth;
        }
        set
        {
            if (this.RestoredWidth != value)
            {
                this.restoredWidth = value;
                OnPropertyChanged("RestoredWidth");
            }
        }
    }
    public double RestoredHeight
    {
        get
        {
            return this.restoredHeight;
        }
        set
        {
            if (this.RestoredHeight != value)
            {
                this.restoredHeight = value;
                OnPropertyChanged("RestoredHeight");
            }
        }
    }
 
    public MyTileViewItem(string header, string content, double rWidth, double rHeight)
    {
        this.Header = header;
        this.Content = content;
        this.RestoredWidth = rWidth;
        this.RestoredHeight = rHeight;
    }
}
and the MainPageViewModel:

public class MyViewModel
{
    private ObservableCollection<MyTileViewItem> items;
 
    public ObservableCollection<MyTileViewItem> Items
    {
        get
        {
            return this.items;
        }
        set
        {
            this.items = value;
        }
    }
 
    public MyViewModel()
    {
        this.items = new ObservableCollection<MyTileViewItem>();
 
        this.items.Add(new MyTileViewItem("Item 1", "Content of item 1", 40, 30));
        this.items.Add(new MyTileViewItem("Item 2", "Content of item 2", 20, 40));
        this.items.Add(new MyTileViewItem("Item 3", "Content of item 3", 30, 40));
        this.items.Add(new MyTileViewItem("Item 4", "Content of item 4", 10, 50));
        this.items.Add(new MyTileViewItem("Item 5", "Content of item 5", 25, 45));
        this.items.Add(new MyTileViewItem("Item 6", "Content of item 6", 15, 35));
        this.items.Add(new MyTileViewItem("Item 7", "Content of item 7", 50, 25));
        this.items.Add(new MyTileViewItem("Item 8", "Content of item 8", 10, 20));
        this.items.Add(new MyTileViewItem("Item 9", "Content of item 9", 25, 25));
        this.items.Add(new MyTileViewItem("Item 10", "Content of item 10", 25, 35));
        this.items.Add(new MyTileViewItem("Item 11", "Content of item 11", 40, 35));
        this.items.Add(new MyTileViewItem("Item 12", "Content of item 12", 10, 30));
    }
}
As you can see we added twelve items with different sizes. Now we have to define the RadTileView and set some Templates and Bindings:

<Grid.Resources>
    <telerik:ContainerBindingCollection x:Key="bindings">
        <telerik:ContainerBinding Binding="{Binding RestoredHeight, Mode=TwoWay}" PropertyName="RestoredHeight" />
        <telerik:ContainerBinding Binding="{Binding RestoredWidth, Mode=TwoWay}" PropertyName="RestoredWidth" />
    </telerik:ContainerBindingCollection>
</Grid.Resources>
<telerik:RadTileView x:Name="myTileView"
                     ColumnsCount="4"
                     ColumnWidth="Auto"
                     ItemsSource="{Binding Items}"
                     RowHeight="Auto"
                     MinimizedColumnWidth="250"
                     MinimizedRowHeight="150"
                     PreservePositionWhenMaximized="True"
                     IsItemsSizeInPercentages="True"
                     telerik:TileViewPanel.IsSizeBoundToPosition="True"
                     telerik:TileViewPanel.IsRowsShrinkEnabled="True"
                     telerik:TileViewPanel.IsColumnsShrinkEnabled="True">
    <telerik:RadTileView.ItemTemplate>
        <DataTemplate telerik:ContainerBinding.ContainerBindings="{StaticResource bindings}">
            <TextBlock Text="{Binding Header}" />
        </DataTemplate>
    </telerik:RadTileView.ItemTemplate>
    <telerik:RadTileView.ContentTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Content}" />
        </DataTemplate>
    </telerik:RadTileView.ContentTemplate>
</telerik:RadTileView>
The last thing to do is set the DataContext and start the application:

public MainPage()
{
    InitializeComponent();
 
    this.DataContext = new MyViewModel();
}
The result should be:

You can download the sample project from here and see the online demos here.

 

A trial version of the Telerik RadCrontrols can be downloaded from here:

RadControls for Silverlight – Download Trial

RadControls for WPF – Download Trial

Every feed back will be highly appreciated. 

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.