Arrange TileViewItem in WPF Tile View Control

18 Nov 20189 minutes to read

This section explains how to arrange and navigate to the TileView item and its alignment functionalities in the WPF Tile View Control.

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 WPF Tile View Control.

TileViewItems are rearranged by drag and drop

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

View Sample in GitHub

Arrange TileViewItem in rows and columns

You can change the number of TileViewItem’s 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

View Sample in GitHub

Arrange TileViewItem in custom order

You can change the order in which the items are displayed in WPF Tile View Control using the CurrentItemsOrder list property. By default, the value of CurrentItemsOrder property is null.

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

CurrentItemsOrder list property should contain position of all the items in the WPF Tile View Control i.e., the count of CurrentItemsOrder list should be same as the count of TileViewItem’s.

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

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

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

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

View Sample in GitHub