Say no to Verbose XAML with EasyGrid!

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:



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

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.

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.