We have been all composing Html by hand since Mosaic or Netscape hit the shelves late in the last century. Since then we have had a love and hate relationship with it. We love it because it is responsive and easy to compose by hand. We hate it because we have to do it by hand. But let’s drop Html for the moment since we have a newer and worst offender: WPF’s Xaml. Xaml is verbose and WPF’s Xaml is up there with the RSI gods. That is because, I guess, it was designed to be machine generated by Blend or Visual Studio but these two designers fall short of the mark in so many ways that it feels 1997 all over again with Blend for Frontpage and Visual Studio for Visual Interdev. No disrespect to the Visual Studio team implied, it is a hard problem to solve.

Meanwhile I got tired of writing RowDefinitions, ColumnDefinitions and VisibilityConverters by hand and decided to do something about it. That is how the MiniGrid was born. It is not a “minification “in the strict Wikipedian sense of the word but an extension to WPF’s Grid. For this release I added three properties: Visible, RowsPattern and ColumnsPattern. Visible is Boolean and it flips Visibility between Visible and Collapsed to remove the need for Converters when binding to IsChecked or IsEnabled. The other two are bit more complex.

RowsPattern and ColumnsPattern

These two properties replace the need to define Grid.RowDefinitions and Grid.ColumnsDefinitions. Instead these definitions are defined inline as a pattern. The pattern can either be a series of “a” or “*” characters for Auto and Star or it can be a number for a pixel size. The definition of a grid with three rows and three columns could be:

<Controls:MiniGrid RowsPattern=”aaa” ColumnsPattern=”a*a”/>

This grid has three Auto rows, the first column is Auto, the second is Star and the third is Auto again. A definition with pixels would be:

<Controls:MiniGrid RowsPattern=”20 25 20″ ColumnsPattern=”100 100″/>

In this example the Grid will have three rows with 20, 25 and 20 pixels from top to bottom and two columns both 100 pixels wide.

The interesting bit is that the patterns work with the designer in both Visual Studio 2008 and 2010 Beta 2 and also in Blend 3 where the patterns can be changed in the property tab. The main limitation is that you cannot mix Auto/Star with numbers and I will remove this in a future version if I ever come across the need. The code is very simple, MiniGrid derives from Grid and adds three Dependent Properties that are intercepted when their value changes.

You can download the code from here.