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:

GitHub Gist

Love sharing? Are you a social coder? A lot of times you may wanted to share piece of code but you give up just because it was going to be a cumbersome process to create a project on CodePlex or GitHub.
I just see a simple feature of GitHub, named Gist. It's a simple method for sharing your code that you find useful for others. For example, having to implement online payment functionality for my Asp.Net MVC website I ended up with a simple PaymentController which I just shared it with GitHub.
Here is my first gist:

Why Invalid Object Name 'dbo.__MigrationHistory'?

Unfortunately I am using  Entity Framework in my project. After migration support added to Entity Framework I thought using this feature may help me feel a little better about  Entity Framework . But the way migration is implemented in EF shows that nothing has changed. Migration has lots of problems and bugs.
After carefully doing all the required cumbersome procedures  Entity Framework migration failed to work and I found no workaround until I strangely faced the exception 'Invalid Object Name 'dbo.__MigrationHistory''. This exception give me  a clue about the cause of my problems.
It seems that Entity Framework team do not use appropriate testing methods and they only care about the main courses and are very negligent about alternative cases. For example in this case they presumed that always the default schema is dbo. It creates __MigrationHistory on the default schema, but queries for it on the dbo schema.
After a while I find another problem. Entity Framework also tries to insert rows into __MigrationHistory without specifying schema name.

Ok, I wrote this code to make Entity Framework script generator apply 'dbo.' before the __MigrationHistory. I know this is naive solution but at least it works.

A WPF Technique: Decorating controls by deriving from standard control

I always consider StackPanel as Vertical StackPanel as it is Vertical by default, but why there is no layout control that is horizontal by default?. I believe it does not worth for the WPF framework to introduce one as it is very easy to write if you need one. In this post I am going to describe how easy is to create a HorizontalStackPanel and a couple of related useful notes.

Define types by deriving from WPF controls.
The simplest way to write your own controls is to derive from existing ones. You do not need to do anything else. Yes, that it, you have the same control with the same functionalities but with a different Type. For example you may derive a class from TextBlock, it still is a TextBlock but it has its own specific type, so it is behave in a slightly different in some cases, mostly when you refer the types like in a TargetType of a Style.
Here is a summary of benefits of doing so:

• Defining some common behaviour in code and not using the styles
• Easier targeting them in styles
• More readable XAML code
• Very helpful for code sharing between Silverlight and WPF

HorizontalStackPanel as an example
For example you may define a HorizontalStackPanel by deriving a type from StackPanel and setting its Orientation to Horizontal in its constructor. Actually it is not a horizontal stackpanel but it is InitialyHorizontalStackPanel as the users have the opportunity to change the orientation later using XAML or code.
Also the HorizontalAlignment in StackPanel has a default value of Stretch, you need to set it back to Left and do the same for VerticalAlignment.

public class Horizontal : StackPanel
{
    public Horizontal()
    {
        Orientation = Orientation.Horizontal;
    }
}
public class Vertical : StackPanel
{
    public Vertical()
    {
        Orientation = Orientation.Vertical;
    }
}

So now you can write these XAML code

<StackPanel>
  <StackPanel Orientation="Horizontal">
      
  </StackPanel>
</StackPanel>

This way

<s:Vertical>
  <s:Horizontal>
      
  </s:Horizontal>
</s:Vertical>

Which is much more readable and less cluttered.