Infragistics® WPF 2016.1
Explicitly Arrange Tiles

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);
...
Related Topics

About Tile Layout

Add Tiles to xamTileManager

Retrieve a Reference to a Tile

Change the State of a Tile

About Saving and Loading Layouts

About Tile Templates

Binding xamTileManager to Data

Allow End Users to Close Tiles

Restrict a XamTile's Size

Modify Tile Behaviors in Normal Mode

Modify Tile Behaviors in Maximized Mode

About Animations

 

 


Copyright © 2008-2016 Infragistics, Inc. All rights reserved.

E-mail your feedback on this topic.