EasyGrid C# Class

EasyGrid is a simple enhancement to the basic Grid layout panel in WPF/Silverlight.  The sole purpose of EasyGrid is to eliminate the verbose markup that clutters your XAML when you define Grids with many rows and columns.

EasyGrid provides a "mini-language" that lets you create all of the rows and columns of the grid by simply providing a value to the EasyGrid's Data property.

Before getting into the mini-language specifics, lets look at an example.  Say we want to define a Grid that contains 4 columns, the first and last a fixed width, and the middle two variable, and 12 rows.  You would wind up with markup something like this:

<Grid x:Name="LayoutRoot" Background="LightGray">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="30"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="30"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
</Grid>

If you're anything like me, looking at markup like this gives you a headache!  The EasyGrid version looks like this:

<scg:EasyGrid x:Name="LayoutRoot" Background="LightGray" Data="C 30 * * 30 R 12x*">
</scg:EasyGrid>

The EasyGrid Mini-Language

The EasyGrid performs its magic via the Data property, which contains a string that represents all of the rows and columns of the grid.  The Data property actually has two modes of operation, a simple mode and a verbose(?!?) mode.

Simple Mode

In the simple mode, you can create a grid with a number of rows and columns that all have the "*" sizing specifier by using this syntax:

Data="CxR"

where C represents the number of desired columns and R represents the number of desired rows.

For example:

Data="12x30"

Verbose Mode

In this mode, you use tokens to specify rows and columns.  You can also use the "x" character to represent a number of rows or columns with the same sizing specification.

C - A "C" in the Data string means that the next token(s) will define grid columns.

R - A "R" in the Data string means that the next token(s) will define grid rows.

# - A number token (for example "12" defines a row or column with a fixed size.

#* - A number followed by a * (for example 4*) defines a row or column with a proportional size.  You can also optionally leave out the number and just specify "*".

Auto - The "Auto" token defines a row or column with an automatic size.

#x(token) - When there is a #x preceding a token, it means that the row or column will be repeated the specified number of times.  For example, C 5x3* creates 5 columns with sizing of 3*.

That's all there is to the EasyGrid.  Use it in your projects and "say no to verbose XAML!".

Download the EasyGrid component.