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.

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

The ‘Canvas‘ element can be used to group other elements up, including other ‘Canvasses‘. A ‘Canvas‘ 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 it’s Opacity set and even have Pixel Shaders applied. All items inside that ‘Canvas’ will be affected by these properties as a unit.

To draw a Canvas, first go to your tool panel, click and hold on the Grid (shown by default) icon and select ‘Canvas‘. Now draw the area you want to have as a ‘Canvas‘.

To group elements into a ‘Canvas‘, first select all the elements you want to group, then right click on them and select ‘Group into‘ and then click on ‘Canvas‘.

This can have some interesting benefits. When using Opacity Masks and Pixel Shaders on a Canvas, the effect is treated to the contents inside as one unit. For example, Opacity will not show shapes underneath other shapes like they would if treated individually (See below).

1. (Top): No opacity.
2. (Middle): Opacity applied to Canvas containing elements.
3. (Bottom): Opacity applied to individual elements.

The DropShadow Pixel Shader effect works the same way.

1. (Top): No shadow.
2. (Middle): Shadow applied to Canvas containing elements.
3. (Bottom): Shadow applied to individual elements.

Elements inside a Canvas are positioned by two values.

• Left = The ‘X’ value.
• Top = The ‘Y’ value.

The position 0,0 is set to the Canvas’ most top left point.

Grouping elements into a ‘Canvas‘ is a good thing to do if you want to move multiple elements in the same way with animation. The Canvas is used often when making games in Silverlight as they can act and be controlled independantly from the rest of the stage.

There is no limit to having multiple Canvasses inside Canvasses.

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

Before reading this post, you may need to read the following related tutorials:

• Using Images and Video in Blend
• Animating with Storyboards in Blend

Today we will be using the new 3D Projection tools in Expression Blend 3 to create the following example:

Now we are ready to play with the new Projection controls. Go to the ‘Objects and Timeline‘ tab and select the storyboard we have created, remember to switch to Animation view (F6) to allow more space to display the timeline. Select one of the ‘Rectangles‘ then go to the ‘Properties‘ tab and scroll down to the ‘Transform‘ section. Use the mouse to drag the ‘X‘ value to -90, watch how the ‘Rectangle‘ changes it’s perspective angle all the way until it is side on and therefore invisible.

Changing the ‘X‘ value will twist the ‘rectangle‘ from side to side. Changing the ‘Y‘ value will twist the ‘rectangle‘ up and down. The ‘Z‘ value will twist the ‘rectangle‘ around from above. You can use these values individually or all at once to get different perspective angles.

For this tutorial I have placed two separate images in so that we can fake the image being flipped over, once we flip the first image to a value of 90 we flip the other from -90 to 0. In my animation I use the ‘Y‘ value for the first flip and the ‘X‘ value for the second flip. The animation looks like this.

You can grab the example files for this tutorial here.

Here are several other posts showing 3D projection in action:

• Using the mouse position to control 3D
• Creating a 3D Cube
• Creating a 3D carousel
• Creating a shadow using 3D projection