Monthly Archives: August 2013

WPF Autogrid – Drop-in Replacement For Grid

A flexible, easy to configure replacement for the standard WPF Grid control

Download WpfAutoGrid from Nuget.

AutoGrid lets you reduce the amount of xaml when using grids for layout by allowing you to define rows and columns as simple properties and alleviating you from having to explicitly specify the row and column a child control belongs to.

Partially based on work by Rachel Lim.

Standard WPF Grid

    <RowDefinition Height="35" />
    <RowDefinition Height="35" />
    <ColumnDefinition Width="100" />
    <ColumnDefinition Width="auto" />

  <Label Grid.Row="0" Grid.Column="0"/>
  <TextBox Grid.Row="0" Grid.Column="1"/>
  <Label Grid.Row="1" Grid.Column="0"/>
  <TextBox Grid.Row="1" Grid.Column="1"/>

AutoGrid (Same output as above)

<AutoGrid RowCount="2" RowHeight="35" Columns="100,auto">
  <Label />
  <TextBox />
  <Label />
  <TextBox />

Notice how in the example above we didn’t need to specify the row and column that each element belonged to; AutoGrid automatically figures out what row and column we wanted based on our configuration of the grid. AutoGrid uses a row first or column first arrangement for its auto layout which can changed by setting the Orientation property.

Don’t want AutoGrid to position elements automatically? OK

Explicit assignment of columns and rows still works too. This allows you to upgrade more easily. Most of time you can mix both without much trouble, but take care that this is not always the case.

Defining a even spaced 6×6 grid with a default margin of 10 for all cells

<local:AutoGrid ColumnCount="6" ColumnWidth="*" RowHeight="*" RowCount="6" ChildMargin="10" />

Grid with relative based column widths and fixed row height

<local:AutoGrid Columns="2*,5*" RowCount="6" RowHeight="25" />

Orientation=”Horizontal” (default)

In this example, labels will fall in the first column, and textboxes will be in the second column

<AutoGrid RowCount="2" RowHeight="35" Columns="100,auto">
  <Label />     <!-- Col=0, Row=0 -->
  <TextBox />   <!-- Col=1, Row=0 -->
  <Label />     <!-- Col=0, Row=1 -->
  <TextBox />   <!-- Col=1, Row=1 -->


In this example, labels will fall in the first row, and textboxes will be in the second row

<AutoGrid RowCount="2" RowHeight="35" Columns="100,auto" Orientation="Vertical">
  <Label />     <!-- Col=0, Row=0 -->
  <TextBox />   <!-- Col=0, Row=1 -->
  <Label />     <!-- Col=1, Row=0 -->
  <TextBox />   <!-- Col=1, Row=1 -->

Project and code are hosted on GitHub: