Shorter way of writing Grid row and column definitions

If you are using Grid based layout in your application, you know how writing row and column definitions can quickly become tedious. And it also occupies a lot of space. Since I needed a less verbose way to quickly define the layout, I quickly thought of writing a custom attached property that will generate those definitions.

On the image below you can see the result: a 2×2 grid containing another 2×2 grind inside one of its cell.

A simple grid based layout

A simple grid based layout

And the shorter code for that? Here it is:

<Grid a:GridEx.RowDefinitions="*,*"
	  a:GridEx.ColumnDefinitions="*,*"
	  Grid.Row="1" Margin="12">

	<Grid a:GridEx.RowCol="*,*|*,*">
		<Rectangle Fill="Red" />
		<Rectangle Fill="Green" Grid.Column="1"/>
		<Rectangle Fill="Blue" Grid.Row="1" />
		<Rectangle Fill="Yellow" Grid.Row="1" Grid.Column="1"/>
	</Grid>

	<TextBlock  Text="Upper left"/>
	<TextBlock Grid.Row="1" Text="Lower left"/>
	<TextBlock Grid.Column="1" Text="Upper right"/>
	<TextBlock Grid.Row="1" Grid.Column="1" Text="Lower right" />
</Grid>

The first two line show the shorter way for writing row and column definitions independently while in the line 5 you can see how to quickly define both row and column definitions in a single line. These two attached properties parse the strings and fill the right definitions.

Full source code can be found at github: tpetrina/wp-helpers. You can also use the above syntax in your projects by adding a NuGet package WindowsPhone.Helpers.

Last updated by at .