Arrange TileViewItem in WPF Tile View

26 May 20219 minutes to read

This section explains how to arrange and navigate to the TileView item and its alignment functionalities in the TileViewControl.

Rearrange position of TileViewItem

If you want to rearrange the TileViewItem position, drag that item and drop to anywhere you want to place it in the TileViewControl.

TileViewItems are rearranged by drag and drop

NOTE

View Sample in GitHub

Restrict rearranging of TileViewItem

You can restrict the rearranging of TileViewItem by setting the AllowItemRepositioning property value as false. The default value of AllowItemRepositioning property is true.

<syncfusion:TileViewControl AllowItemRepositioning="False"
                            Name="tileViewControl">
    <syncfusion:TileViewItem Header="Item 1" />
    <syncfusion:TileViewItem Header="Item 2" />
    <syncfusion:TileViewItem Header="Item 3" />
    <syncfusion:TileViewItem Header="Item 4" />
</syncfusion:TileViewControl>
tileViewControl.AllowItemRepositioning = false;

TileViewItems repositioning disabled

NOTE

View Sample in GitHub

Arrange TileViewItem in rows and columns

You can change the number of tileview items displayed in view by setting the value to RowCount and ColumnCount properties. The default value of RowCount and ColumnCount properties is 0.

<syncfusion:TileViewControl RowCount="6" ColumnCount="1"
                            Name="tileViewControl"  >
    <syncfusion:TileViewItem Header="Item1"/>
    <syncfusion:TileViewItem Header="Item2"/>
    <syncfusion:TileViewItem Header="Item3"/>
    <syncfusion:TileViewItem Header="Item4"/>
    <syncfusion:TileViewItem Header="Item5"/>
    <syncfusion:TileViewItem Header="Item6"/>
</syncfusion:TileViewControl>
tileViewControl.RowCount = 6;
tileViewControl.ColumnCount = 1;

TileViewItems arranged in particular rows and cloumns

NOTE

View Sample in GitHub

Arrange TileViewItem in custom order

You can change the order in which the items are displayed in TileView control using the CurrentItemsOrder list property. By default, the value of CurrentItemsOrder property is null.

NOTE

CurrentItemsOrder property works only when Virtualization is disabled i.e., IsVirtualizing property value is false.

NOTE

CurrentItemsOrder list property should contain position of all the items in the TileView control i.e., the count of CurrentItemsOrder list should be same as the count of TileView items.

NOTE

The CurrentItemsOrder list property should not contain same position for more than one item.

<Grid>
    <Grid.DataContext>
        <local:ViewModel />
    </Grid.DataContext>
    <syncfusion:TileViewControl Height="250" CurrentItemsOrder="{Binding CustomItemOrders, Mode=TwoWay}"
                                    Width="300">
        <syncfusion:TileViewItem Header="Item 1"/>
        <syncfusion:TileViewItem Header="Item 2"/>
        <syncfusion:TileViewItem Header="Item 3"/>
        <syncfusion:TileViewItem Header="Item 4"/>
        <syncfusion:TileViewItem Header="Item 5"/>
        <syncfusion:TileViewItem Header="Item 6"/>
    </syncfusion:TileViewControl>
</Grid>
public class ViewModel : NotificationObject
{
    private List<int> customItemOrders;

    public List<int> CustomItemOrders
    {
        get { return customItemOrders; }
        set
        {
            customItemOrders = value;
            this.RaisePropertyChanged(nameof(this.CustomItemOrders));
        }
    }

    public ViewModel()
    {
        CustomItemOrders = new List<int>();
        CustomItemOrders.Add(4);
        CustomItemOrders.Add(5);
        CustomItemOrders.Add(0);
        CustomItemOrders.Add(1);
        CustomItemOrders.Add(2);
        CustomItemOrders.Add(3);
    }
}

TileViewItems arranged in custom order

Change row and column size

By default, TileViewItem rows and columns size are allocated based on the control size and number of items in a control. You can change the row and column size of the TileViewItem by setting the value to RowHeight and ColumnWidth properties. The default value of RowHeight and ColumnWidth properties is auto.

<syncfusion:TileViewControl RowHeight="100" 
                            ColumnWidth="100" 
                            Name="tileViewControl">
    <syncfusion:TileViewItem Header="Item1"/>
    <syncfusion:TileViewItem Header="Item2"/>      
    <syncfusion:TileViewItem Header="Item3"/>
    <syncfusion:TileViewItem Header="Item4"/>
</syncfusion:TileViewControl>
tileViewControl.RowHeight = 100;
tileViewControl.ColumnWidth = 100;

TileViewControl rows and columns size changed

NOTE

View Sample in GitHub

You can navigate from one TileViewItem to any other TileViewItem by using the mouse click on the specific TileViewItem.

Navigation from one TileViewItem to another

If you add more items and set the row and column size to place the items that exceeds the control size, then some items are hidden from the view. You can easily navigate to the hidden items by using the scroll bar. You can enable the vertical and horizontal scroll bars by using the HorizontalScrollBarVisibility and VerticalScrollBarVisibility properties value as auto or Visible. The default value of HorizontalScrollBarVisibility and VerticalScrollBarVisibility properties is Disabled.

<syncfusion:TileViewControl ColumnWidth="100"
                            RowHeight="100" 
                            HorizontalScrollBarVisibility="Auto"
                            VerticalScrollBarVisibility="Auto" 
                            Name="tileViewControl">
    <syncfusion:TileViewItem Header="Item1"/>
    <syncfusion:TileViewItem Header="Item2"/>
    <syncfusion:TileViewItem Header="Item3" />
    <syncfusion:TileViewItem Header="Item4"/>
    <syncfusion:TileViewItem Header="Item5"/>
    <syncfusion:TileViewItem Header="Item6"/>
    <syncfusion:TileViewItem Header="Item7" />
    <syncfusion:TileViewItem Header="Item8"/>
    <syncfusion:TileViewItem Header="Item9"/>
</syncfusion:TileViewControl>
tileViewControl.RowHeight = 100;
tileViewControl.ColumnWidth = 100;
tileViewControl. HorizontalScrollBarVisibility = Visibility.Auto;
tileViewControl. HorizontalScrollBarVisibility = Visibility.Auto;

Navigate to the hidden items in TileViewControl using scroll bars

NOTE

View Sample in GitHub

Change built-in animation duration

If you want to change the animation duration of navigation, use the AnimationDuration property. The default value of AnimationDuration property is {00:00:00.7000000}.

<syncfusion:TileViewControl AnimationDuration="00:00:00.300"
                            Name="tileViewControl">
    <syncfusion:TileViewItem Header="Item1"/>
    <syncfusion:TileViewItem Header="Item2"/>
    <syncfusion:TileViewItem Header="Item3" />
    <syncfusion:TileViewItem Header="Item4"/>
</syncfusion:TileViewControl>
tileViewControl.AnimationDuration = new TimeSpan(0, 0, 0, 0, 300);

Animation time for navigation is changed

NOTE

View Sample in GitHub

Disable built-in navigation animation

By default, navigation of TileViewItem animation is enabled. If you want to disable the animation while navigation of TileViewItem, use the EnableAnimation property value as false.

<syncfusion:TileViewControl EnableAnimation="False"
                            Name="tileViewControl">
    <syncfusion:TileViewItem Header="Item1"/>
    <syncfusion:TileViewItem Header="Item2"/>
    <syncfusion:TileViewItem Header="Item3" />
    <syncfusion:TileViewItem Header="Item4"/>
</syncfusion:TileViewControl>
tileViewControl.EnableAnimation = false;

Built-in navigation animation is disabled

NOTE

View Sample in GitHub