Over a million developers have joined DZone.

Shorter Way of Writing Grid Row and Column Definitions

DZone's Guide to

Shorter Way of Writing Grid Row and Column Definitions

· ·
Free Resource

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

And the shorter code for that? Here it is:

<Grid a:GridEx.RowDefinitions="*,*"
	  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"/>

	<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" />

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.


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}