October 15th, 2009

Using the Canvas element in Blend

Silverlight 3 tutorials, 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 ‘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.

The ‘Canvas’ element can be used to group other elements up, including other ‘Canvas”. 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.
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).
(Top): No opacity.
(Middle): Opacity applied to Canvas containing elements.
(Bottom): Opacity applied to individual elements.
The DropShadow Pixel Shader effect works the same way.
(Top): No shadow.
(Middle): Shadow applied to Canvas containing elements.
(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 Canvas’ inside Canvas’.

Back Top

Responses to “Using the Canvas element in Blend”

  1. No comments yet.
  1. Learn Expression Blend in a Month! » Silverlight Buzz (,October 15, 2009)

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

  2. Links (10/15/2009) « Steve Pietrek – Everything SharePoint (,October 15, 2009)

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

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

    [...] This post was mentioned on Twitter by Silverlight News and SilverZine, Jungchan Hsieh. Jungchan Hsieh said: Using the Canvas element in Blend – http://snurl.com/sl2cs by @silverlightbuzz (via @SilverlightNews ) [...]

  4. Using the Stack Panel in Blend » Silverlight Buzz (,November 15, 2009)

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

Leave a Reply

Back Top