WPF Grid Layout Simplified Using Rows and Columns Attached Properties

A major problem with WPF and XAML is that XAML code tends to be very cluttered and after a little your XAML code gets too much complicated. In a recent project I suggested to define new controls by deriving from existing controls, so you can assign a shorter name to them or avoiding setting the same property the same value for thousand of time(e.g. Horizontal orientation stack panel).

Here is another tip to make you XAML code less cluttered. One area that you may find it hard to write and read and maintain is Grid layout control. Defining RowDefinitions and ColumnDefinitions waste too much space and adds too unnecessary lines of code. Hence it become too complicated to handle it.
The solution I am sugessting here is to use some attached properties to define RowDefinitions and ColumnDefinitions in a smarter way.
You can fetch the code for attached properties here: https://gist.github.com/2234500
This code adds these attached properties to Grid

• Grid.Rows
• Grid.Columns

and adds these attached properties to UIElemnet

• Cell

Grid.Rows and Grid.Columns are same thing but one is for specifying rows and one is for columns. These two properties are simply text value which you can set it according to the following Rules:

• Separate items with semi colon(;) , Example "auto;auto;*"
• Use auto for adding an Auto sized row or column , Example "auto;auto"
• Specify * for adding an star sized row or column, Example "1*,2*, *"
• Specify only a number for adding a fixed size row or column, Example "200,200,100"
• Append # followed by a number to add multiple rows and columns of same sizing. "1*#4,auto"
• The number of starts in an item will multiplies star factor. Example "**,***,*" instead of "2*,3*,*"

XAML Sample:

<Grid s:Grid.Rows="auto;1*;auto;auto" s:Grid.Columns="*#5;auto"> ... </Grid>

Adds 4 rows to grid which are all Auto sized except the second row which occupies all remained space. Also adds 5 star columns followed by an Auto sized column.
Implementaion
As I said this is simply 3 attached properties which allows you to specify the rows and columns using a textual representation. Here is the function which converts the textual value into a GridLength value:

public static GridLength ParseGridLength(string text)
{
    text = text.Trim();
    if (text.ToLower() == "auto")
        return GridLength.Auto;
    if (text.Contains("*"))
    {
        var startCount = text.ToCharArray().Count(c => c == '*');
        var pureNumber = text.Replace("*", "");
        var ratio = string.IsNullOrWhiteSpace(pureNumber) ? 1 : double.Parse(pureNumber);
        return new GridLength(startCount * ratio, GridUnitType.Star);
    }
    var pixelsCount = double.Parse(text);
    return new GridLength(pixelsCount, GridUnitType.Pixel);
}

And here is the function which makes # operator working:

public static IEnumerable<GridLength> Parse(string text)
{
    if (text.Contains("#"))
    {
        var parts = text.Split(new[] { '#' }, StringSplitOptions.RemoveEmptyEntries);
        var count = int.Parse(parts[1].Trim());
        return Enumerable.Repeat(ParseGridLength(parts[0]), count);
    }
    else
    {
        return new[] { ParseGridLength(text) };
    }
}

And finally the attached property change callback:

var grid = d as System.Windows.Controls.Grid;
var oldValue = e.OldValue as string;
var newValue = e.NewValue as string;
if (oldValue == null || newValue == null)
    return;
 
if (oldValue != newValue)
{
    grid.ColumnDefinitions.Clear();
    newValue
        .Split(new[] { ';' }, StringSplitOptions.RemoveEmptyEntries)
        .SelectMany(Parse)
        .Select(l => new ColumnDefinition { Width = l })
        .ToList().ForEach(grid.ColumnDefinitions.Add);
}

The above code is for Columns attached property but this is the same for Rows attached property as well.

The whole source code for these attached properties: