UniformGrid Layout

Equal cells filled row by row, with the row and column counts derived when you leave them out.

Try in Playground

Overview

UniformGrid divides itself into equally sized cells and drops the children into them in order, left to right and then top to bottom. It is the right panel for a dashboard of tiles, a button pad, or anything where the children have no individual size opinion.

"Equal" has to be exact in a terminal, where a cell is an integer and there is no such thing as a third of one. Ten columns of space across three columns of grid gives 4 / 3 / 3, not three lots of three with a cell quietly thrown away: the remainder is handed out one cell at a time to the leading columns, so the widths always add back up to the panel. When there are more columns than there are cells to give them, the trailing columns get zero and their children are skipped — the panel draws as much as fits instead of rounding everything to zero and drawing nothing.

Properties

PropertyTypeDefaultDescription
Rowsint0Number of rows. 0 derives it from Columns and the number of non-collapsed children.
Columnsint0Number of columns. 0 derives it from Rows and the number of non-collapsed children.
BackgroundColor?nullInherited from Panel.

With both left at 0 the panel picks the nearest square: Columns becomes ceil(sqrt(n)) and Rows follows from it. Nine children give a 3×3; five give three columns over two rows. 

<!-- Explicit shape: six equal cells -->
<UniformGrid Rows="2" Columns="3">
    <Border Background="#5F0000" />
    <Border Background="#00005F" />
    <Border Background="#005F00" />
    <Border Background="#5F5F00" />
    <Border Background="#5F005F" />
    <Border Background="#005F5F" />
</UniformGrid>

<!-- Columns only: the row count follows the child count -->
<UniformGrid Columns="4">
    <TextBlock Text="A" />
    <TextBlock Text="B" />
    <TextBlock Text="C" />
    <TextBlock Text="D" />
    <TextBlock Text="E" />    <!-- starts a second row -->
</UniformGrid>

<!-- Neither set: nine children auto-derive a 3x3 -->
<UniformGrid>
    <Border /><Border /><Border />
    <Border /><Border /><Border />
    <Border /><Border /><Border />
</UniformGrid>

Key Concepts