Canvas Class

Inheritance Hierarchy

System.Object
  System.Windows.DependencyObject
    System.Windows.UIElement
      System.Windows.FrameworkElement
        System.Windows.Controls.Panel
          System.Windows.Controls.Canvas
            System.Windows.Controls.InkPresenter

Syntax

'Declaration
Public Class Canvas _
 Inherits Panel

public class Canvas : Panel

<Canvas ...>
  oneOrMoreUIElements
</Canvas>

Constructors

Top

Properties

Top

Attached Properties

Top

Methods

Top

Events

Top

Fields

Top

Remarks

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).

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 nulla 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.

Examples

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.

👁 Rectangle positioned 30 down and 30 over.

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.

👁 One rectangle inside another.

Version Information

Silverlight

Supported in: 5, 4, 3

Silverlight for Windows Phone

Supported in: Windows Phone OS 7.1, Windows Phone OS 7.0

Platforms

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

Thread Safety

Any public static (Shared in Visual Basic) members of this type are thread safe. Any instance members are not guaranteed to be thread safe.

See Also

Reference

Other Resources