Canvas Canvas Canvas Canvas Class
Definition
Defines an area within which you can explicitly position child objects, using coordinates that are relative to the Canvas area.
public : class Canvas : Panel, ICanvaspublic class Canvas : Panel, ICanvasPublic Class Canvas Inherits Panel Implements ICanvas// This API is not available in Javascript.
<Canvas ...>
oneOrMoreUIElements
</Canvas>
-or-
<Canvas .../>
- Inheritance
- Attributes
| Device family |
Windows 10 (introduced v10.0.10240.0)
|
| API contract |
Windows.Foundation.UniversalApiContract (introduced v1)
|
Inherited Members
Inherited properties
Inherited events
Inherited methods
Examples
This 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" >
<Rectangle Canvas.Left="30" Canvas.Top="30"
Fill="Red" Width="200" Height="200" />
</Canvas>
Remarks
Canvas is a layout panel that supports absolute positioning of child elements relative to the top left corner of the canvas.

A Canvas is one of the Panel elements that enable layout. Canvas uses absolute positioning as its layout technique for its contained child elements. Each child element is rendered within the Canvas area. You control the positioning of elements 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 app window, scaling, or other user-selected sizing, using a container element that adapts to different orientations and screen settings, such as Grid or StackPanel, is often a better choice than using Canvas. For more information, see Define layouts with XAML.
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 of a Canvas must be a UIElement. In XAML, you declare child objects as content 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.
In many cases, a Canvas is used solely as a container for other objects and does not have any visible properties. A Canvas and its children (if any) are not visible if any of these conditions are true:
- The Visibility property is set to Collapsed.
- The Opacity property of the Canvas is 0.
The children of a Canvas (if any) are still visible even if the Canvas has any of these conditions:
- The Background property of the Canvas is null.
- The Height or Width property of the Canvas is 0.
A Canvas with no children and with a default Height and Width of Auto doesn't have dimensions. This is also the case if the Canvas has children but all the children have Visibility of Collapsed, or zero Height or Width.
Canvas XAML attached properties
Canvas is the host service class for several XAML attached properties. The purpose of these attached properties is to enable child elements in layout to report how they should be positioned in a Canvas parent.
These XAML attached properties are supported by Canvas:
- Canvas.Left
- Canvas.Top
- Canvas.ZIndex In order to support XAML processor access to the attached properties, and also to expose equivalent get and set operations to code, each XAML attached property has a pair of Get and Set accessor methods. For example, the GetLeft and SetLeft methods support and provide the equivalent code-only support for Canvas.Left. Alternatively, you can use the dependency property system to get or set the value of the attached property. Call GetValue or SetValue, passing the arguments of the dependency property identifier to set, and a reference to the target object on which to get or set the value.
Constructors
Properties
LeftProperty LeftProperty LeftProperty LeftProperty
Identifies the Canvas.Left XAML attached property.
public : static DependencyProperty LeftProperty { get; }public static DependencyProperty LeftProperty { get; }Public Static ReadOnly Property LeftProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the Canvas.Left XAML attached property.
Remarks
This property is only an identifier for the property system, and isn't used in most app scenarios. In most cases you set the Canvas.Left XAML attached property in XAML and won't need this identifier.
TopProperty TopProperty TopProperty TopProperty
Identifies the Canvas.Top XAML attached property.
public : static DependencyProperty TopProperty { get; }public static DependencyProperty TopProperty { get; }Public Static ReadOnly Property TopProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the Canvas.Top XAML attached property.
Remarks
This property is only an identifier for the property system, and isn't used in most app scenarios. In most cases you set the Canvas.Top XAML attached property in XAML and won't need this identifier.
ZIndexProperty ZIndexProperty ZIndexProperty ZIndexProperty
Identifies the Canvas.ZIndex XAML attached property.
public : static DependencyProperty ZIndexProperty { get; }public static DependencyProperty ZIndexProperty { get; }Public Static ReadOnly Property ZIndexProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the Canvas.ZIndex XAML attached property.
Remarks
This property is only an identifier for the property system, and isn't used in most app scenarios. In most cases you set the Canvas.ZIndex XAML attached property in XAML and won't need this identifier.
The maximum allowed value is 1000000 (one million).
Methods
GetLeft(UIElement) GetLeft(UIElement) GetLeft(UIElement) GetLeft(UIElement)
Gets the value of the Canvas.Left XAML attached property for the target element.
public : static double GetLeft(UIElement element)public static double GetLeft(UIElement element)Public Static Function GetLeft(element As UIElement) As double// This API is not available in Javascript.
The Canvas.Left XAML attached property value of the specified object.
Remarks
This method is a utility method for the property system, and isn't used in most app scenarios. In most cases you set the Canvas.Left XAML attached property in XAML and won't need this method. For more info, see the Canvas.Left attached property.
- See Also
GetTop(UIElement) GetTop(UIElement) GetTop(UIElement) GetTop(UIElement)
Gets the value of the Canvas.Top XAML attached property for the target element.
public : static double GetTop(UIElement element)public static double GetTop(UIElement element)Public Static Function GetTop(element As UIElement) As double// This API is not available in Javascript.
The Canvas.Top XAML attached property value of the specified object.
Remarks
This method is a utility method for the property system, and isn't used in most app scenarios. In most cases you set the Canvas.Top XAML attached property in XAML and won't need this method. For more info, see the Canvas.Top attached property.
- See Also
GetZIndex(UIElement) GetZIndex(UIElement) GetZIndex(UIElement) GetZIndex(UIElement)
Gets the value of the Canvas.ZIndex XAML attached property for the target element.
public : static int GetZIndex(UIElement element)public static int GetZIndex(UIElement element)Public Static Function GetZIndex(element As UIElement) As int// This API is not available in Javascript.
The Canvas.ZIndex XAML attached property value of the requested object.
Remarks
This method is a utility method for the property system, and isn't used in most app scenarios. In most cases you set the Canvas.ZIndex XAML attached property in XAML and won't need this method. For more info, see the Canvas.ZIndex attached property.
- See Also
SetLeft(UIElement, Double) SetLeft(UIElement, Double) SetLeft(UIElement, Double) SetLeft(UIElement, Double)
Sets the value of the Canvas.Left XAML attached property for a target element.
public : static void SetLeft(UIElement element, double length)public static void SetLeft(UIElement element, Double length)Public Static Function SetLeft(element As UIElement, length As Double) As void// This API is not available in Javascript.
- length
- double Double Double Double
The value to set.
Remarks
This method is a utility method for the property system, and isn't used in most app scenarios. In most cases you set the Canvas.Left XAML attached property in XAML and won't need this method. For more info, see the Canvas.Left attached property.
- See Also
SetTop(UIElement, Double) SetTop(UIElement, Double) SetTop(UIElement, Double) SetTop(UIElement, Double)
Sets the value of the Canvas.Top XAML attached property for a target element.
public : static void SetTop(UIElement element, double length)public static void SetTop(UIElement element, Double length)Public Static Function SetTop(element As UIElement, length As Double) As void// This API is not available in Javascript.
- length
- double Double Double Double
The value to set.
Remarks
This method is a utility method for the property system, and isn't used in most app scenarios. In most cases you set the Canvas.Top XAML attached property in XAML and won't need this method. For more info, see the Canvas.Top attached property.
- See Also
SetZIndex(UIElement, Int32) SetZIndex(UIElement, Int32) SetZIndex(UIElement, Int32) SetZIndex(UIElement, Int32)
Sets the value of the Canvas.ZIndex XAML attached property for a target element.
public : static void SetZIndex(UIElement element, int value)public static void SetZIndex(UIElement element, Int32 value)Public Static Function SetZIndex(element As UIElement, value As Int32) As void// This API is not available in Javascript.
- value
- int Int32 Int32 Int32
The value to set.
Remarks
This method is a utility method for the property system, and isn't used in most app scenarios. In most cases you set the Canvas.ZIndex XAML attached property in XAML and won't need this method. For more info, see the Canvas.ZIndex attached property.
- See Also