Category / Section
How can set the equal height and width for all the rows and columns of TileViewItem in TileView control
1 min read
We can set the same height and width for all rows in TileView control, by using the “RowHeight”, “ColumnWidth” property.
The following code snippet will explain about it.
XAML
<syncfusion:TileViewControl Name="tileViewControl1" > <syncfusion:TileViewItem Height="140" Width="120" Header="Features"> <TextBlock Text="Drag and drop to reposition with great live animations as you would have experienced and come to expect in mobile devices. Touch enabled - simply pinch or stretch to interactively zoom the view. Maximization and Minimization of specific tiles." TextWrapping="Wrap"/> </syncfusion:TileViewItem> <syncfusion:TileViewItem Height="150" Width="100" Header="Minimized Item Orientation"> <TextBlock Text="Minimized items can be positioned in different places such as the left, top, bottom, and right. This can be done by using the Minimized Items Orientation feature. Once a particular item is maximized, the other items will be minimized and shifted to the left, top, right, or bottom of the maximized item based on the orientation that was set." TextWrapping="Wrap"/> </syncfusion:TileViewItem> <syncfusion:TileViewItem Height="130" Width="130" Header="Minimized Area Percentage" > <TextBlock Text="Once a particular item is maximized, other items inside the Tile View control will be minimized. The height and width of the minimized area can be controlled by using the Minimized Items Percentage feature." TextWrapping="Wrap"/> </syncfusion:TileViewItem> <syncfusion:TileViewItem Height="145" Width="140" Header="TileView Item State"> <TextBlock Text="A tile-view item has three states: Maximized, Minimized, and Normal. If a particular item is set to be maximized, that item will display in its maximized state, and other items will be minimized when the control is loaded. The control allows to rearrange the items according to the need." TextWrapping="Wrap"/> </syncfusion:TileViewItem> </syncfusion:TileViewControl>
C#
public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); double maxitemHeight = (tileViewControl1.Items[0] as TileViewItem).Height; double maxitemwidth = (tileViewControl1.Items[0] as TileViewItem).Width; for (int i = 0; i < tileViewControl1.Items.Count; i++) { TileViewItem item = tileViewControl1.Items[i] as TileViewItem; if (item.Height > maxitemHeight) { maxitemHeight = item.Height; } if(item.Width > maxitemwidth) { maxitemwidth = item.Width; } } tileViewControl1.RowHeight = new GridLength(maxitemHeight); tileViewControl1.ColumnWidth = new GridLength(maxitemwidth); } }
The output for the above code is shown below:
Before:
By default.
After:
Maximum height as its RowHeight and maximum width as ColumnWidth.