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.

The UniformGrid

WPF's UniformGrid control provides a similar layout to that given by the Grid layout control. Its child controls are organised into a tabular structure of rows and columns. Unlike the Grid control, you don't have fine-grained control of the layout. The column widths and row heights cannot be modified. These sizes are set automatically to ensure that all columns are the same width and all rows are of an equal height. In addition, where the Grid control permits you to specify a cell position for each child, the UniformGrid does not.

UniformGrid Example

Let's create an example to demonstrate the UniformGrid control. Start Visual Studio and create a new WPF Application project named, "UniformGridDemo". Replace the XAML in the automatically added window with the following.

<Window x:Class="UniformGridDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="UniformGrid Demo"
        Height="200"
        Width="250">
    <UniformGrid>
        <Button Content="Button 1"/>
        <Button Content="Button 2"/>
        <Button Content="Button 3"/>
        <Button Content="Button 4"/>
    </UniformGrid>
</Window>

The above XAML creates a UniformGrid that contains four buttons. Each button has different content so that we can see where they appear in the final result. Note that there are no attached properties on the buttons to determine their position with the grid. This is because child controls are always organised according to the order in which they are defined. The first child appears at the top-left of the grid. Further child controls populate the top row of the grid first and then start to appear in lowers rows.

The resultant output for the XAML is shown below. You can see that the columns and rows are formatted so that every cell is the same size.

WPF UniformGrid Example

Interestingly, we did not specify the number of rows or columns in the grid. In this most basic configuration of a UniformGrid the number of rows will be the same as the number of columns. The total number of cells will be the lowest number possible that meets this constraint and displays all of the child controls. So, if we were to add another button we would need a grid with three rows and three columns.

Update the UniformGrid element as follows:

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

The new window has an extra column and row. As we don't have enough controls to fill the new grid, some of the cells remain empty. These empty cells fill the "Thistle" coloured area, set using the grid's Background property.

WPF UniformGrid Example with Empty Cells

27 March 2013