Canvas

Quick start

Use Canvas when child position is part of your UI state. Unlike flow panels such as StackPanel or Grid, Canvas does not compute placement from rows, columns, or stacking order.

Minimal positioned child

<Canvas Width="320" Height="180">
  <TextBlock Text="Marker"
             Canvas.Left="24"
             Canvas.Top="18" />
</Canvas>

Two independent children

<Canvas Width="420" Height="220">
  <Button Text="Primary action"
          Width="140"
          Height="40"
          Canvas.Left="20"
          Canvas.Top="20" />

  <Border Background="#1C2C3B"
          BorderBrush="#50708F"
          BorderThickness="1"
          Padding="8"
          Canvas.Left="210"
          Canvas.Top="96">
    <TextBlock Text="Pinned note" />
  </Border>
</Canvas>

Set coordinates from code

var badge = new Label
{
    Text = "Paused"
};

Canvas.SetLeft(badge, 16f);
Canvas.SetTop(badge, 12f);
overlayCanvas.AddChild(badge);

How Canvas layout works

Canvas uses a deliberately simple layout contract. Every child is measured unconstrained, then arranged at its own explicit offset with its measured size.

• If Canvas.Left is not set, the child uses 0 for X.
• If Canvas.Top is not set, the child uses 0 for Y.
• Canvas desired width is the maximum of left + child desired width across all children.
• Canvas desired height is the maximum of top + child desired height across all children.
• Negative coordinates are allowed and can place content partially or fully outside the visible canvas region.

<Canvas>
  <TextBlock Text="Alpha"
             Canvas.Left="10"
             Canvas.Top="12" />
  <TextBlock Text="Beta"
             Canvas.Left="120"
             Canvas.Top="40" />
</Canvas>

If Alpha wants 60x20 and Beta wants 50x20, the Canvas desired size becomes at least 170x60.

Positioning API

The current Canvas implementation exposes exactly two positioning attached properties: Canvas.Left and Canvas.Top.

Position a control in XAML

<Canvas Width="500" Height="280">
  <Button x:Name="SaveButton"
          Text="Save"
          Width="120"
          Height="38"
          Canvas.Left="32"
          Canvas.Top="24" />
</Canvas>

Read and update coordinates at runtime

var currentLeft = Canvas.GetLeft(saveButton);
var currentTop = Canvas.GetTop(saveButton);

Canvas.SetLeft(saveButton, currentLeft + 12f);
Canvas.SetTop(saveButton, currentTop + 8f);

Animate a positioned element

var leftAnimation = new DoubleAnimation
{
    To = 320f,
    Duration = TimeSpan.FromMilliseconds(250)
};

Storyboard.SetTarget(leftAnimation, runner);
Storyboard.SetTargetProperty(leftAnimation, "(Canvas.Left)");

Sizing and clipping behavior

Canvas is free-positioning, not free-visibility. Children can be arranged anywhere, but rendering and hit testing are clipped to the canvas layout slot.

<Border Width="220" Height="120" BorderBrush="#3A556F" BorderThickness="1">
  <Canvas Width="220" Height="120">
    <TextBlock Text="Visible"
               Canvas.Left="12"
               Canvas.Top="12" />
    <TextBlock Text="Partially clipped"
               Canvas.Left="170"
               Canvas.Top="92" />
  </Canvas>
</Border>

That second child may still be arranged at the requested coordinates, but any pixels outside the 220x120 canvas viewport are clipped away.

Common usage patterns

HUD or overlay layer

<Canvas Width="1280" Height="720">
  <Border Background="#AA101820"
          BorderBrush="#50708F"
          BorderThickness="1"
          Padding="10,6"
          Canvas.Left="24"
          Canvas.Top="24">
    <TextBlock Text="Mission timer: 02:18" />
  </Border>

  <Label Text="Inventory"
         Canvas.Left="1110"
         Canvas.Top="24" />
</Canvas>

Freeform editor surface

<Canvas Width="900" Height="540">
  <Border Background="#182636"
          BorderBrush="#4FC7C1"
          BorderThickness="1"
          Padding="12"
          Width="220"
          Height="120"
          Canvas.Left="80"
          Canvas.Top="60">
    <TextBlock Text="Node A" />
  </Border>

  <Border Background="#182636"
          BorderBrush="#4FC7C1"
          BorderThickness="1"
          Padding="12"
          Width="220"
          Height="120"
          Canvas.Left="420"
          Canvas.Top="220">
    <TextBlock Text="Node B" />
  </Border>
</Canvas>

Popup anchor host

<Canvas Width="640" Height="360">
  <Button x:Name="AnchorButton"
          Text="Open menu"
          Width="140"
          Height="38"
          Canvas.Left="40"
          Canvas.Top="30" />

  <Popup IsOpen="True"
         PlacementTarget="{Binding ElementName=AnchorButton}" />
</Canvas>

Mixed content dashboard

<Canvas Width="760" Height="420">
  <TextBlock Text="Status" Canvas.Left="20" Canvas.Top="16" />
  <ProgressBar Width="240" Height="20" Value="68" Canvas.Left="20" Canvas.Top="44" />
  <Button Text="Retry" Width="96" Height="34" Canvas.Left="20" Canvas.Top="90" />
  <Border Width="320" Height="180" BorderBrush="#45627E" BorderThickness="1" Canvas.Left="380" Canvas.Top="20">
    <TextBlock Text="Preview area" Margin="12" />
  </Border>
</Canvas>

Canvas vs other panels

• Use Grid for forms, dashboards, and structured two-dimensional layout.
• Use StackPanel for linear vertical or horizontal flows.
• Use DockPanel for edge-based composition.
• Use Canvas for explicit coordinates and overlay composition.

Property reference

Notes and pitfalls