Canvas Canvas Canvas Class

Defines an area within which you can explicitly position child objects, using coordinates that are relative to the Canvas area.

Syntax

Declaration

public class Canvaspublic class CanvasPublic Class Canvas
<Canvas ...>
  oneOrMoreUIElements
</Canvas>
-or-
<Canvas .../>

Inheritance Hierarchy

Inherited Members

Inherited properties

, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,
Tag
Tag
Tag
, , , , , , , , , , , , , , , , , , , , , , , , ,

Inherited events

, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

Inherited methods

, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

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 LeftProperty and TopProperty attached properties. LeftProperty specifies the object's distance from the left side of the containing Canvas (the x-coordinate), and TopProperty 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:

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>

Constructors summary

Initializes a new instance of the Canvas class.

Properties summary

Identifies the LeftProperty XAML attached property.

Identifies the TopProperty XAML attached property.

Identifies the ZIndexProperty XAML attached property.

Methods summary

Gets the value of the LeftProperty XAML attached property for the target element.

Gets the value of the TopProperty XAML attached property for the target element.

Gets the value of the ZIndexProperty XAML attached property for the target element.

Sets the value of the LeftProperty XAML attached property for a target element.

Sets the value of the TopProperty XAML attached property for a target element.

Sets the value of the ZIndexProperty XAML attached property for a target element.

Constructors

  • Canvas()
    Canvas()
    Canvas()
    Canvas()

    Initializes a new instance of the Canvas class.

    public Canvas()public New()Public Sub New()public Canvas()

Properties

  • LeftProperty
    LeftProperty
    LeftProperty
    LeftProperty

    Identifies the LeftProperty XAML attached property.

    public static DependencyProperty LeftProperty { get; }public static DependencyProperty LeftProperty { get; }Public Static ReadOnly Property LeftProperty As DependencyPropertypublic static DependencyProperty LeftProperty { get; }

    Property Value

    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 LeftProperty XAML attached property in XAML and won't need this identifier.

  • TopProperty
    TopProperty
    TopProperty
    TopProperty

    Identifies the TopProperty XAML attached property.

    public static DependencyProperty TopProperty { get; }public static DependencyProperty TopProperty { get; }Public Static ReadOnly Property TopProperty As DependencyPropertypublic static DependencyProperty TopProperty { get; }

    Property Value

    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 TopProperty XAML attached property in XAML and won't need this identifier.

  • ZIndexProperty
    ZIndexProperty
    ZIndexProperty
    ZIndexProperty

    Identifies the ZIndexProperty XAML attached property.

    public static DependencyProperty ZIndexProperty { get; }public static DependencyProperty ZIndexProperty { get; }Public Static ReadOnly Property ZIndexProperty As DependencyPropertypublic static DependencyProperty ZIndexProperty { get; }

    Property Value

    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 ZIndexProperty XAML attached property in XAML and won't need this identifier.

Methods

  • GetLeft(UIElement)
    GetLeft(UIElement)
    GetLeft(UIElement)
    GetLeft(UIElement)

    Gets the value of the LeftProperty 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 doublepublic static double GetLeft(UIElement element)

    Parameters

    Returns

    • double
      double
      double

      The LeftProperty 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 LeftProperty XAML attached property in XAML and won't need this method. For more info, see the LeftProperty attached property.

  • GetTop(UIElement)
    GetTop(UIElement)
    GetTop(UIElement)
    GetTop(UIElement)

    Gets the value of the TopProperty 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 doublepublic static double GetTop(UIElement element)

    Parameters

    Returns

    • double
      double
      double

      The TopProperty 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 TopProperty XAML attached property in XAML and won't need this method. For more info, see the TopProperty attached property.

  • GetZIndex(UIElement)
    GetZIndex(UIElement)
    GetZIndex(UIElement)
    GetZIndex(UIElement)

    Gets the value of the ZIndexProperty 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 intpublic static int GetZIndex(UIElement element)

    Parameters

    Returns

    • int
      int
      int

      The ZIndexProperty 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 ZIndexProperty XAML attached property in XAML and won't need this method. For more info, see the ZIndexProperty attached property.

  • SetLeft(UIElement, Double)
    SetLeft(UIElement, Double)
    SetLeft(UIElement, Double)
    SetLeft(UIElement, Double)

    Sets the value of the LeftProperty 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 voidpublic static void SetLeft(UIElement element, Double length)

    Parameters

    • element

      The object to which the property value is written.

    • length
      System.Double
      System.Double
      System.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 LeftProperty XAML attached property in XAML and won't need this method. For more info, see the LeftProperty attached property.

  • SetTop(UIElement, Double)
    SetTop(UIElement, Double)
    SetTop(UIElement, Double)
    SetTop(UIElement, Double)

    Sets the value of the TopProperty 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 voidpublic static void SetTop(UIElement element, Double length)

    Parameters

    • element

      The object to which the property value is written.

    • length
      System.Double
      System.Double
      System.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 TopProperty XAML attached property in XAML and won't need this method. For more info, see the TopProperty attached property.

  • SetZIndex(UIElement, Int32)
    SetZIndex(UIElement, Int32)
    SetZIndex(UIElement, Int32)
    SetZIndex(UIElement, Int32)

    Sets the value of the ZIndexProperty XAML attached property for a target element.

    public static void SetZIndex(UIElement element, Int32 value)public static void SetZIndex(UIElement element, Int32 value)Public Static Function SetZIndex(element As UIElement, value As Int32) As voidpublic static void SetZIndex(UIElement element, Int32 value)

    Parameters

    • element

      The object to which the property value is written.

    • value
      System.Int32
      System.Int32
      System.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 ZIndexProperty XAML attached property in XAML and won't need this method. For more info, see the ZIndexProperty attached property.

Device family

Windows 10 (introduced v10.0.10240.0)

API contract

Windows.Foundation.UniversalApiContract (introduced v1)

Attributes

Windows.Foundation.Metadata.ComposableAttribute
Windows.Foundation.Metadata.ContractVersionAttribute
Windows.Foundation.Metadata.MarshalingBehaviorAttribute
Windows.Foundation.Metadata.StaticAttribute
Windows.Foundation.Metadata.ThreadingAttribute
Windows.Foundation.Metadata.WebHostHiddenAttribute

Details

Assembly

Windows.UI.Xaml.Controls.dll