![xamTilesControl Explicitly Arrange Tiles 01.png](images/xamTilesControl_Explicitly_Arrange_Tiles_01.png)
When you set the NormalModeSettings object’s TileLayoutOrder property to UseExplicitRowColumnOnTile, you are responsible for arranging XamTile objects into columns and rows by setting the XamTileManager’s attached properties - Column, ColumnSpan, Row and RowSpan. The Column, ColumnSpan, Row and RowSpan properties work just like their Grid panel counterparts. If you do not set a value for these properties, they will default to 0 just like the Grid panel. This will cause xamTileManager to stack all tiles on top of each other in the upper left-hand corner.
The following example code demonstrates how to explicitly arrange tiles.
In XAML:
<ig:XamTileManager Name="xamTileManager1"> <!--Enable explicit layout--> <ig:XamTileManager.NormalModeSettings> <ig:NormalModeSettings TileLayoutOrder="UseExplicitRowColumnOnTile" /> </ig:XamTileManager.NormalModeSettings> <ig:XamTile Header="Tile 1" Content="Content Area" ig:XamTileManager.Column="0" ig:XamTileManager.Row="0" ig:XamTileManager.RowSpan="4" ig:XamTileManager.ColumnSpan="1" /> <ig:XamTile Header="Tile 2" Content="Content Area" ig:XamTileManager.Column="1" ig:XamTileManager.Row="0" ig:XamTileManager.RowSpan="2" ig:XamTileManager.ColumnSpan="2" /> <ig:XamTile Header="Tile 3" Content="Content Area" ig:XamTileManager.Column="1" ig:XamTileManager.Row="2" ig:XamTileManager.RowSpan="2" ig:XamTileManager.ColumnSpan="2" /> <ig:XamTile Header="Tile 4" Content="Content Area" ig:XamTileManager.Column="3" ig:XamTileManager.Row="0" ig:XamTileManager.RowSpan="4" ig:XamTileManager.ColumnSpan="1" /> </ig:XamTileManager>
In Visual Basic:
Imports Infragistics.Controls.Layouts ... Me.xamTileManager1.NormalModeSettings.TileLayoutOrder = _ TileLayoutOrder.UseExplicitRowColumnOnTile Dim tile1 As New XamTile With _ {.Header = "Tile 1", .Content = "Content Area"} XamTileManager.SetColumn(tile1, 0) XamTileManager.SetRow(tile1, 0) XamTileManager.SetRowSpan(tile1, 4) XamTileManager.SetColumnSpan(tile1, 4) Dim tile2 As New XamTile With _ {.Header = "Tile 2", .Content = "Content Area"} XamTileManager.SetColumn(tile1, 1) XamTileManager.SetRow(tile1, 0) XamTileManager.SetRowSpan(tile1, 2) XamTileManager.SetColumnSpan(tile1, 2) Dim tile3 As New XamTile With _ {.Header = "Tile 3", .Content = "Content Area"} XamTileManager.SetColumn(tile1, 1) XamTileManager.SetRow(tile1, 2) XamTileManager.SetRowSpan(tile1, 2) XamTileManager.SetColumnSpan(tile1, 2) Dim tile4 As New XamTile With _ {.Header = "Tile 4", .Content = "Content Area"} XamTileManager.SetColumn(tile1, 3) XamTileManager.SetRow(tile1, 0) XamTileManager.SetRowSpan(tile1, 4) XamTileManager.SetColumnSpan(tile1, 1) Me.xamTileManager1.Items.Add(tile1) Me.xamTileManager1.Items.Add(tile2) Me.xamTileManager1.Items.Add(tile3) Me.xamTileManager1.Items.Add(tile4) ...
In C#:
using Infragistics.Controls.Layouts; ... this.xamTileManager1.NormalModeSettings.TileLayoutOrder = TileLayoutOrder.UseExplicitRowColumnOnTile; XamTile tile1 = new XamTile { Header = "Tile 1", Content = "Content Area" }; XamTileManager.SetColumn(tile1, 0); XamTileManager.SetRow(tile1, 0); XamTileManager.SetRowSpan(tile1, 4); XamTileManager.SetColumnSpan(tile1, 4); XamTile tile2 = new XamTile { Header = "Tile 2", Content = "Content Area" }; XamTileManager.SetColumn(tile1, 1); XamTileManager.SetRow(tile1, 0); XamTileManager.SetRowSpan(tile1, 2); XamTileManager.SetColumnSpan(tile1, 2); XamTile tile3 = new XamTile { Header = "Tile 3", Content = "Content Area" }; XamTileManager.SetColumn(tile1, 1); XamTileManager.SetRow(tile1, 2); XamTileManager.SetRowSpan(tile1, 2); XamTileManager.SetColumnSpan(tile1, 2); XamTile tile4 = new XamTile { Header = "Tile 4", Content = "Content Area" }; XamTileManager.SetColumn(tile1, 3); XamTileManager.SetRow(tile1, 0); XamTileManager.SetRowSpan(tile1, 4); XamTileManager.SetColumnSpan(tile1, 1); this.xamTileManager1.Items.Add(tile1); this.xamTileManager1.Items.Add(tile2); this.xamTileManager1.Items.Add(tile3); this.xamTileManager1.Items.Add(tile4); ...