October 16th, 2009

Using the Grid element in Blend

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:

Distance from the top of the containing Grid

Distance from the left of the containing Grid

Distance from the bottom of the containing Grid

Distance from the right of the containing Grid

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

Align Left/Top

Align Centre

Align Right/Bottom

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.