A Canvas is one of the Panel elements that enable layout. Each child object is rendered within the Canvas area. You control the positioning of objects inside the Canvas by specifying x and y coordinates. These coordinates are in pixels. The x and y coordinates are often specified by using the Canvas..::.Left and Canvas..::.Top attached properties. Canvas..::.Left specifies the object's distance from the left side of the containing Canvas (the x-coordinate), and Canvas..::.Top specifies the object's distance from the top of the containing Canvas (the y-coordinate).

Note:
Because absolute positioning does not take into account the size of the browser window or browser resizing, using Grid or StackPanel as a container is often a better choice. For more information, see Silverlight Layout System.

You can nest Canvas objects. When you nest objects, the coordinates used by each object are relative to its immediate containing Canvas.

Each child object must be a UIElement. In XAML, you declare child objects as object elements that are the inner XML of a Canvas object element. In code, you can manipulate the collection of Canvas child objects by getting the collection that is accessed by the Children property.

You can nest Canvas objects, because a Canvas is a type of UIElement.

In many cases, a Canvas is used solely as a container for other objects and does not have any visible properties. A Canvas is not visible if any of the following conditions are true:

• The Height property is equal to 0.

• The Width property is equal to 0.

• The Background property is equal to nullNothingnullptra null reference (Nothing in Visual Basic).

• The Opacity property is equal to 0.

• The Visibility property is equal to Visibility..::.Collapsed.

• One of the ancestor objects of the Canvas is not visible.

The following example shows how to position a rectangle 30 pixels from the left and 30 pixels from the top of a Canvas.

<Canvas Width="640" Height="480" Background="White">
    <Rectangle Canvas.Left="30" Canvas.Top="30" 
               Fill="red" Width="200" Height="200" />
</Canvas>

The preceding example produces output that is similar to the following illustration.

In the following example, the root (white) Canvas contains a nested (blue) Canvas that has Canvas..::.Left and Canvas..::.Top properties of 30. The nested blue Canvas contains a red rectangle that also has Canvas..::.Left and Canvas..::.Top values of 30. This creates the effect of a red rectangle bordered by a blue rectangle. This same layout could be achieved using a Border object.

<Canvas Width="300" Height="300" Background="White">
    <Canvas Width="250" Height="250" Canvas.Left="30" 
            Canvas.Top="30" Background="blue">

        <Rectangle Canvas.Left="30" Canvas.Top="30" 
                   Fill="red" Width="200" Height="200" />
    </Canvas>
</Canvas>

The preceding example produces output that is similar to the following illustration.

For a list of the operating systems and browsers that are supported by Silverlight, see Supported Operating Systems and Browsers.

Reference

Other Resources