Version

About Tile Layout

The xamTileManager™ arranges normal tiles like a vertical WrapPanel container. However, you can change this default behavior by setting the TileLayoutOrder property exposed by xamTileManager’s NormalModeSettings property to one of the following TileLayoutOrder enum values:

  • Horizontal - Tiles are arranged left-to-right then top-to-bottom. Tiles will have a uniform height across individual rows and a uniform width down individual columns.

xamTilesControl About Tile Layout 01.png
  • HorizontalVariable - Tiles are arranged just like the Horizontal setting; however, tiles will have a uniform height across individual rows, but their widths can differ based on content.

xamTilesControl About Tile Layout 02.png
  • Vertical - Tiles are arranged top-to-bottom then left-to-right. Tiles will have a uniform height across individual rows and a uniform width down individual columns.

xamTilesControl About Tile Layout 03.png
  • VerticalVariable - Tiles are arranged just like the Vertical setting. However, tiles will have differing heights across individual rows based on content, but their widths will remain uniform down individual columns.

xamTilesControl About Tile Layout 04.png
  • UseExplicitRowColumnOnTile - You have full control over arranging tiles using a concept that is similar to the layout mechanism found in the Grid panel. This also allows you to create tiles of varying sizes.

xamTilesControl About Tile Layout 05.png

In addition to the four layout options mentioned above, each XamTile object can set the XamTileManager’s attached properties - ColumnWeight and RowWeight property. These properties determine how extra space or lack thereof is assigned to the tiles. By default, a tile is sized to fit its content. However, if you set the NormalModeSettings object’s HorizontalTileAreaAlignment or VerticalTileAreaAlignment properties to Stretch, xamTileManager will automatically resize tiles to fill up all the available space. If you do not set the ColumnWeight and RowWeight properties, xamTileManager distributes the space equally among all tiles. However, if you set the properties, xamTileManager only distributes the extra space to the tiles that specify a weight.

The ColumnWeight property acts as a percentage of the sum of column weights across tiles in a single row. The RowWeight property acts as a percent of the sum of row weights across tiles in a single column. For example, if you have four tiles in a single row and you set the first tile’s ColumnWeight property to 1 and the second tile’s ColumnWeight property to 2, xamTileManager will assign 1/3 of the extra width to the first tile and 2/3 of the extra width to the second tile. On the other hand, if xamTileManager has to reduce the size of the tiles, it resizes the first and second tile’s width while maintaining the proper ratio; but it does not resize the other two tiles.