October 16th, 2009

Using the Grid element in Blend

Silverlight Blend Tutorials, Working with Silverlight, by Gavin Wignall.

This post is part of a string of posts found here: Learn Blend in a Month.

The ‘Grid‘ element can be used to group other elements up, including other ‘Grids‘. A ‘Grid‘ has properties like any other element, it can be moved around, have a set height and width, have transforms including projection applied, have a background color, have its Opacity set and even have Pixel Shaders applied. All items inside that ‘Grid’ will be affected by these properties as a unit.

To read more about how ‘Grid’ properties effect their containing elements please read the previous post about the ‘Canvas’ element here.

To draw a ‘Grid’, first go to your tool panel, click the ‘Grid’ icon and draw the area you want to have as a ‘Grid‘. To group elements into a ‘Grid‘, first select all the elements you want to group, then right click on them and select ‘Group into‘ and then click on ‘Grid‘.

Elements inside a Grid are constrained to the Grid’s properties. To position an element inside a Grid you set its ‘Margin’ values and its Alignment values.

A ‘Margin’ consists of four values:

  1. Distance from the top of the containing Grid
  2. Distance from the left of the containing Grid
  3. Distance from the bottom of the containing Grid
  4. Distance from the right of the containing Grid

Horizontal Alignment’ and ‘Vertical Alignment’ each have 4 values:

  1. Align Left/Top
  2. Align Centre
  3. Align Right/Bottom
  4. Stretch

For example: If an element is set to Align Left and Top then Margin values 1 and 2 will position the element. If an element is set to align Right and Bottom then Margin values 3 and 4 will position the element. Setting Centre align will position the element in the middle and then use the Margin value to offset its position in each direction. Setting Stretch will also centre the element but if the elements ‘height’ and ‘width’ are set to ‘Auto’ then it will stretch to fill the Grids dimensions minus the Margin values.

Grids can also have their ‘Height’ and ‘Width’ values set to ‘Auto’. This will allow the Grid to automatically grow with the content inside it – this can be helpful later on when wanting to dynamically retrieve the size of changing content.

Grids can also have ‘Rows’ and ‘Columns’ defined to help position the containing elements. There is no limit to the amount of Rows or Columns a Grid can have. To add  a new Row or Column, first select the Grid and then click on the blue border to the top or left of the Grid boundaries. Rows and Columns are displayed as Blue lines (a yellow line will appear on rollover to help placement).

Rows and Columns can be moved at any point by click and dragging their triangular handle.

Content inside the Grid can be set to sit inside any Row and Column or span across multiple Rows and Columns. To change these settings, first select the element you want to effect, then go to the ‘Properties’ panel and scroll down to the ‘Layout’ section. You then have the following properties:

  • Row
  • Column
  • RowSpan
  • ColumnSpan

Grouping elements into a ‘Grid’ is a good thing to do if you want elements on your page constrained within fixed/movable areas.

There is no limit to having multiple Grids inside Grids.

Back Top

Responses to “Using the Grid element in Blend”

  1. No comments yet.
  1. Links (10/18/2009) « Steve Pietrek – Everything SharePoint (,October 19, 2009)

    [...] Using the Grid element in Blend [...]

  2. Tweets that mention Using the Grid element in Blend » Silverlight Buzz -- Topsy.com (,October 19, 2009)

    [...] This post was mentioned on Twitter by Silverlight News and Jungchan Hsieh, Tonči Jukić. Tonči Jukić said: RT @JungchanHsieh: Using the Grid element in Blend – http://snurl.com/sl2ed by @silverlightbuzz (via @SilverlightNews) [...]

  3. uberVU - social comments (,October 19, 2009)

    Social comments and analytics for this post…

    This post was mentioned on Twitter by SilverlightNews: Using the Grid element in Blend – http://snurl.com/sl2ed...

  4. Learn Expression Blend in a Month! » Silverlight Buzz (,October 19, 2009)

    [...] Using the Grid element in Blend [...]

  5. Learn Blend in a Month (22 posts) from Silverlight Buzz « Vincent Leung .NET Tech Clips (,January 28, 2010)

    [...] Using the Grid element in Blend [...]

Leave a Reply

Back Top