BlackWaspTM

This web site uses cookies. By using the site you accept the cookie policy.This message is for compliance with the UK ICO law.

Windows Presentation Foundation
.NET 4.0+

WPF Layout Controls - UniformGrid

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.

Specifying the Number of Columns and Rows

You do not have to allow a UniformGrid to choose the number of columns and rows automatically. You can specify the number of columns that you require with the Columns property. Once set, the number of rows becomes variable whilst the columns are fixed. Again, the grid will be the smallest size possible to show all of its child controls.

The following updated UniformGrid has two columns and five controls. This requires three rows with the last row only partially populated.

<UniformGrid Columns="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 is shown below:

WPF UniformGrid Example with Fixed Columns

In a similar manner you can specify the number of rows in a UniformGrid. This time you use the Rows property and omit the Columns value. The grid will determine the lowest number of columns required to ensure the correct number of rows before positioning the child elements.

In the following grid there are five controls to be organised into two rows. This means that three columns are needed. The final row will include an empty cell.

<UniformGrid Rows="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 above XAML gives the following results:

WPF UniformGrid Example with Fixed Rows

If you wish, you can set the number of rows and columns by using both properties for a single UniformGrid. As before, the grid will automatically organise the cells to ensure they are the same size. If there are not enough child controls to fill such a grid the final cells will be empty. If, however, the grid has too few cells for the number of child controls the results are quite interesting. Rather than clipping the additional controls, they are placed outside of the grid, following the same location pattern as their predecessors.

We can see this with a simple example. The grid below has two rows and two columns, allowing cells for four controls. As we have defined five buttons, the fifth will appear outside of the grid's allocated space. I've added margins to the grid and the buttons so that they are all visible within the Window area.

<UniformGrid Rows="2" Columns="2" Background="Thistle" Margin="5 5 5 55">
    <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 results are shown below. The shaded background shows the extent of the UniformGrid. Note that the fifth button appears outside of this area.

WPF UniformGrid Example with Fixed Rows and Columns

27 March 2013