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.