Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

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="*,*"
	  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.

Topics:

Published at DZone with permission of Toni Petrina, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

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

{{ parent.tldr }}

{{ parent.urlSource.name }}