New TileView features
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>(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>(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; }}
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)); }}
<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>
public MainPage(){ InitializeComponent(); this.DataContext = new MyViewModel();}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.
Zarko Vidolov
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.