Articles in this section
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.

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied