.NET 4.0+

WPF Layout Controls - UniformGrid

by Richard Carr, published at http://www.blackwasp.co.uk/WPFUniformGrid.aspx

The eighth part of the Windows Presentation Foundation Fundamentals tutorial examines the UniformGrid. This container control automatically organises its children into a grid with evenly sized columns, and rows that are all of the same height.

ClipToBounds

The ability for a UniformGrid's children to appear outside of the layout control is something that is common to many controls. Some controls will automatically clip their contents when they are "out of bounds". Others, like the UniformGrid, continue to render their children despite them being outside of their allocated area.

If you do not wish to allow this, you can set the ClipToBounds property of a control to True. This will sometimes mean that child controls are only partially displayed. In most cases with a UniformGrid, entire controls will be outside the boundary rectangle so will be simply removed, as in the following example:

<UniformGrid Rows="2" Columns="2" Background="Thistle" Margin="5 5 5 55" ClipToBounds="True">
    <Button Content="Button 1" Margin="5"/>
    <Button Content="Button 2" Margin="5"/>
    <Button Content="Button 3" Margin="5"/>
    <Button Content="Button 4" Margin="5"/>
    <Button Content="Button 5" Margin="5"/>
</UniformGrid>

The fifth button is no longer displayed:

FirstColumn Property

Sometimes you will want to skip some cells at the start of the grid, rather than placing the first control in the first column. You can do this with the FirstColumn attribute. A value of zero means that the first child control will appear in the first column of the top row. This is the default position. Higher values specify that a number of cells in the top row will be left empty. The maximum permitted value is one less than the number of columns in the grid.

In the following grid we skip two columns. The first control is placed into the third column, which is actually column number 2. As with the Grid layout control, the UniformGrid's first column is column zero.

<UniformGrid Columns="3" Rows="3" FirstColumn="2" Background="Thistle">
    <Button Content="Button 1"/>
    <Button Content="Button 2"/>
    <Button Content="Button 3"/>
    <Button Content="Button 4"/>
    <Button Content="Button 5"/>
</UniformGrid>

The resultant window has two empty cells in the top row. This forces the fifth child control into a third row.

FlowDirection

The last property that we'll look at for the UniformGrid is another property that is shared by many controls. In general, FlowDirection specifies whether the content of a control is laid out from left to right or from right to left.

This property is of particular use in the UniformGrid due to the restrictions you have in positioning child controls. If you set the property to LeftToRight, the behaviour is as we have seen in previous examples. If you change it to RightToLeft, the first child control appears in the top-right cell. Further controls fill the top row from right to left before moving into lower rows.

The following simple example switches the flow direction for a grid.

<UniformGrid FlowDirection="RightToLeft" Background="Thistle">
    <Button Content="Button 1"/>
    <Button Content="Button 2"/>
    <Button Content="Button 3"/>
</UniformGrid>

The results are shown below: