Wahlin on .NET

Silverlight XAML Primer 1: Exploring Canvases

Dan walks you through the role the Canvas element plays in XAML documents.

• By Dan Wahlin
• 11/26/2007

The version of XAML found in Silverlight is a scaled-down version of the XAML found in Windows Presentation Foundation (WPF) applications. Although not as robust as WPF, the subset of XAML found in Silverlight is still quite powerful and provides many important features that allow various activities to be performed, such as object animation and transformation.

XAML documents can be saved with any file extension since they're simply XML files, but the standard file extension is .XAML. Because XAML is based on XML rules, it's important to note that case matters and that all XAML start elements must have corresponding end elements. Several other XML rules apply, as well. You can read the complete XML specification here if you need to brush up on the XML syntax rules.

Because XAML is a key component in Silverlight applications, the next few columns will focus on different parts of the XAML specification available in Silverlight and explain how they can be used. In this first article, I'll focus on the role that the <Canvas> element plays in XAML documents.

The Role of the Canvas Element
HTML developers and designers use various types of container tags to group related content in a Web page. The <div> element is especially popular these days since it can be combined with CSS to provide a flexible layout for Web pages without requiring tables. Although Silverlight doesn't support the <div> element, it does provide a <Canvas> element that can be used to group related content. The <Canvas> element acts like the <div> element in many regards and can have children nested inside of it.

The <Canvas> element is defined in the following way by the Silverlight 1.0 SDK: "Defines an area within which you can explicitly position child elements by using coordinates that are relative to the area."

A <Canvas> acts as the "root" element of any XAML document and defines one or more XML namespaces. An example of defining a root <Canvas> element in a XAML document is shown in this code:

<Canvas xmlns="http://schemas.microsoft.com/client/2007">

</Canvas> 

Although additional namespaces can optionally be defined, the namespace shown in this code is required. You may come across other Silverlight XAML samples that use a WPF namespace URI of http://schemas.microsoft.com/ winfx/2006/xaml/presentation. While this URI also works in Silverlight XAML documents, the URI shown in the code above is recommended since it determines the type of intellisense that you'll get in products such as Visual Studio 2008 and Expression Blend 2.

In addition to being the root element, multiple <Canvas> elements can be defined in a nested manner within a XAML document to group related child controls. Many types of child controls can be nested inside of canvas such as shapes, media, text, transformations and more.

The <Canvas> element exposes several properties such as Background, Canvas.Left, Canvas.Top, Canvas.ZIndex, Clip, Cursor, Height, Name, Opacity, OpacityMask, RenderTransform, Resources, Triggers, Visibility and Width. Most of these properties have fairly obvious purposes while others such as Clip, RenderTransform and Resources aren't as obvious and will be discussed in later articles. The code below shows an example of using a few of the properties available on the canvas object and how they can be defined on a nested canvas.

<Canvas xmlns="http://schemas.microsoft.com/client/2007">

    <Canvas Name="ShapesCanvas" Canvas.Left="10" Canvas.Top="10" 
    Height="300" Width="300" Background="#efefef">

     <!-- Canvas Children -->

  </Canvas>

</Canvas>

The nested canvas object shown in the above code defines a name of ShapesCanvas and specifies that it should be placed 10 pixels in from the left and 10 pixels down from the top of the parent canvas. It also defines a height and width of 300 pixels and a light gray background color. Child controls can be placed in either of the two canvases as appropriate for the application.

The <Canvas> element is a key player in the world of XAML that's used to group related child objects. It's analogous to the HTML <div> element in many ways, which should make using and understanding it more straightforward if you've worked with HTML before. In the next article, I'll begin discussing different types of child objects that can be defined and used in Silverlight XAML documents.