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
Windows 10 requirements
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.

Canvas layout panel

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 children of a Canvas (if any) are still visible even if the Canvas has any of these conditions:

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:

Constructors

Canvas() Canvas() Canvas() Canvas()

Initializes a new instance of the Canvas class.

public : Canvas()public Canvas()Public Sub New()// This API is not available in Javascript.

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.
Value
DependencyProperty DependencyProperty DependencyProperty DependencyProperty

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.
Value
DependencyProperty DependencyProperty DependencyProperty DependencyProperty

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.
Value
DependencyProperty DependencyProperty DependencyProperty DependencyProperty

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.
Parameters
element
UIElement UIElement UIElement UIElement

The object from which the property value is read.

Returns
double double double double

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.
Parameters
element
UIElement UIElement UIElement UIElement

The object from which the property value is read.

Returns
double double double double

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.
Parameters
element
UIElement UIElement UIElement UIElement

The object from which the property value is read.

Returns
int int int int

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.
Parameters
element
UIElement UIElement UIElement UIElement

The object to which the property value is written.

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.
Parameters
element
UIElement UIElement UIElement UIElement

The object to which the property value is written.

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.
Parameters
element
UIElement UIElement UIElement UIElement

The object to which the property value is written.

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

See Also