Article
06/13/2011

Canvas

Microsoft Silverlight will reach end of support after October 2021. Learn more.

Defines an area within which you can explicitly position child elements by using coordinates that are relative to the area.

<Canvas   ...>
  oneOrMoreUIElements
</Canvas>
-or-
<Canvas   .../>

XAML Values

Value	Description
oneOrMoreUIElements	One or more of the following object elements that derive from UIElement: Border (Silverlight 2), Canvas, Ellipse, Glyphs, Grid (Silverlight 2), Image, InkPresenter, Line, MediaElement, PasswordBox (Silverlight 2), Path, Polygon, Polyline, Rectangle, Shape, StackPanel (Silverlight 2), TextBlock, TextBox (Silverlight 2). Object elements defined here become members of the Children collection when scripting accesses the Children property at run time.

oneOrMoreUIElements

One or more of the following object elements that derive from UIElement: Border (Silverlight 2), Canvas, Ellipse, Glyphs, Grid (Silverlight 2), Image, InkPresenter, Line, MediaElement, PasswordBox (Silverlight 2), Path, Polygon, Polyline, Rectangle, Shape, StackPanel (Silverlight 2), TextBlock, TextBox (Silverlight 2). Object elements defined here become members of the Children collection when scripting accesses the Children property at run time.

Derived Objects

InkPresenter

Methods

AddEventListener, CaptureMouse, Equals, FindName (DependencyObject), GetHost, GetParent, GetValue, ReleaseMouseCapture, RemoveEventListener, SetValue

Properties

Background (Elements), Canvas.Left, Canvas.Top, Canvas.ZIndex, Children (Panel), Clip, Cursor, Effect (Silverlight 3), Grid.Column (Silverlight 2), Grid.ColumnSpan (Silverlight 2), Grid.Row (Silverlight 2), Grid.RowSpan (Silverlight 2), Height (UIElement), HorizontalAlignment (Silverlight 2), IsHitTestVisible, IsItemsHost (Silverlight 3), Language (Silverlight 2), Margin (Silverlight 2), MaxHeight (Silverlight 2), MaxWidth (Silverlight 2), MinHeight (Silverlight 2), MinWidth (Silverlight 2), Name (DependencyObject), Opacity (UIElement), OpacityMask, Projection (Silverlight 3), RenderTransform, RenderTransformOrigin, Resources, Style (Silverlight 2), Tag, TextOptions.TextHintingMode (Silverlight 3), Triggers, UseLayoutRounding (Silverlight 2), VerticalAlignment (Silverlight 2), Visibility, Width (UIElement)

Events

GotFocus, KeyDown, KeyUp, Loaded, LostFocus, MouseEnter, MouseLeave, MouseLeftButtonDown, MouseLeftButtonUp, MouseMove, MouseWheel (Silverlight 3)

Managed Equivalent

Canvas is the direct equivalent. However, for use as a page root element, UserControl is typically more appropriate when using the managed API.

Remarks

In the JavaScript API for Silverlight, a Canvas object is typically the root element for the XAML that is the Source property of a Silverlight plug-in.

A Canvas can contain child elements, which are rendered within the Canvas area. Each child element must be a UIElement. In XAML, you declare child elements as object elements that are the inner XML of a Canvas object element.

In script, you can manipulate the collection of Canvas child objects by getting the collection that is accessed by the Children property.

You can nest Canvas elements, 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 one or more 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 null.
The Opacity property is equal to 0.
The Visibility property is equal to Collapsed.
One of the ancestor objects of the Canvas is not visible.

In the JavaScript API for Silverlight, keyboard events are available only to the root element, or focusable controls (TextBox, PasswordBox). Canvas is a typical root element, so often is a common object that has key event handling.

Share via