xaml UniformGrid


Example

Uniform grid will place all it's children in a grid layout, each child in it's own cell. All the cells will have the same size. It can be thought to be a shorthand to a grid where all the row and column definitions are set to *


Default rows and columns

By default the UniformGrid will try to create an equal number of rows and columns. When a row will become to long, it will add a new column.

This code will produce a grid of 3x3 with the first 2 rows filled and the last with one button:

<UniformGrid>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
</UniformGrid>

Specified rows / columns

You can tell the UniformGrid exactly how many rows and/or column you wish to have.

<UniformGrid Columns="2" >
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
</UniformGrid>

NOTE: in case both rows and columns are set, and there are more children than cells, the last children in the grid won't be displayed


FirstColumn Property

Once the Columns property is set, you can set the FirstColumn property. This property will enter x empty cells to the first row before the first child is displayed. FirstColumn must be set to a number smaller than the Columns property.

In this example the first button will be displayed in the first row's second column:

<UniformGrid Columns="2" FirstColumn="1">
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
</UniformGrid>