WPF 標準コントロールデモアプリ › Canvas

Canvas Graphics

Canvas は絶対位置指定を使用するレイアウトパネルです。子要素は Canvas の添付プロパティ（Top、Left、Right、Bottom）を使用して明示的な座標に配置されます。精密なコントロールが必要な描画アプリケーションやアニメーションに最適です。

概要

WPF の Canvas は絶対座標によるレイアウトを提供するパネルです。 Grid や StackPanel などが相対的・自動的なサイズ配置を行うのに対し、Canvas では各子要素の位置をピクセル単位で明示的に指定します。これにより、精密な配置が必要な描画アプリやゲーム UI、カスタムダイアグラムに適しています。

子要素の配置は Canvas の添付プロパティ（Canvas.Left、Canvas.Top、 Canvas.Right、Canvas.Bottom）を使用します。 Left と Right、Top と Bottom は同時に使用できません。設定されていない軸の位置はデフォルトで 0 になります。

Canvas は子要素の測定に無限大のサイズを与えるため、子要素は自然なサイズで描画されます。 Canvas 自体はデフォルトではコンテンツに合わせたサイズ計算を行わないため、明示的に Width/Height を設定するか、親コンテナからサイズを受け取る必要があります。

アニメーションとの組み合わせも強力です。Canvas.Left や Canvas.Top にアニメーションを適用することで、要素を画面上で滑らかに移動させるアニメーションを簡単に実装できます。

画面キャプチャ

デモしているプロパティ

以下のプロパティが WPF 標準コントロールデモアプリでインタラクティブにデモされています。アプリ上でリアルタイムに各プロパティを変更してその動作を確認できます。

プロパティ	設定値	説明
`Top / Left / Right / Bottom (Canvas attached)`	`double`	子要素の Canvas 内での位置を設定する添付プロパティです。`Left=50, Top=30` と設定すると、Canvas の左端から 50px、上端から 30px の位置に配置されます。`Right` や `Bottom` は Canvas の右端・下端を基準にした配置（例えばウォーターマークや固定フッター要素を右下に固定）に使います。設定した結果、要素は指定した端からのオフセット位置に描画されます。はまりやすいポイント：`Left` と `Right` を同一要素に同時に設定しても要素はリサイズされません。要素は自然サイズのままで `Left` の値が優先されて位置が決まるため、両方設定しても「両端に合わせて伸縮する」とはなりません。
`ZIndex (Panel attached)`	`int`	子要素の描画順序（Z 順）を制御します。選択ハンドルを内容の上に重ねたい場合やツールチップを他要素の上に表示したいなど、特定の要素を前面に出したい時に使用します。値が大きい要素は小さい要素の上に描画されます。はまりやすいポイント：すべての要素の ZIndex は既定値が 0 のため、明示的に設定しない場合は XAML 上で後に定義された要素（子コレクションで後の要素）が前面に来ます。この暗黙の順序に頼らず、重なりを制御したい要素には ZIndex を明示的に設定してください。

XAML 使用例

Canvas を使った絶対位置配置と Z 順の例です：

<Canvas Width="400" Height="300" Background="LightGray">
  <!-- 左上から 50px, 上から 30px に配置 -->
  <Rectangle Canvas.Left="50" Canvas.Top="30"
             Width="100" Height="60" Fill="Blue" />

  <!-- ZIndex で前面に表示 -->
  <Ellipse Canvas.Left="80" Canvas.Top="60"
           Width="80" Height="80" Fill="Red"
           Panel.ZIndex="1" />

  <!-- アニメーションで移動 -->
  <Button Content="移動" Canvas.Left="200" Canvas.Top="150">
    <Button.Triggers>
      <EventTrigger RoutedEvent="Button.Click">
        <BeginStoryboard>
          <Storyboard>
            <DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)"
                             To="300" Duration="0:0:1" />
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger>
    </Button.Triggers>
  </Button>
</Canvas>

主な使用例

描画アプリケーション — ユーザーが図形を自由に配置・移動できる描画ツールの描画エリアとして使用します。
アニメーション — 要素を画面上で自由に移動させるアニメーションの配置コンテナとして使用します。
カスタムダイアグラム — フローチャートや組織図など、要素の厳密な配置が必要なダイアグラムの描画に使用します。
Viewbox との組み合わせ — Viewbox でラップすることで、解像度に依存しないスケーラブルなベクター描画を実現できます。
ゲーム UI — 絶対座標で要素を配置・移動する必要がある簡単なゲームのプレイフィールドとして活用します。

ヒントとベストプラクティス

通常のフォームには使用しない — 一般的なフォームやウィンドウレイアウトには Grid や StackPanel が適切です。Canvas は精密な位置制御が必要な場合のみ使用します。
Canvas にサイズを設定する — Canvas は子要素のサイズに合わせた自動リサイズを行わないため、Width/Height を明示的に設定するか、親コンテナからサイズを受け取る設計にします。
ZIndex で重なりを制御する — 要素が重なる場合は Panel.ZIndex 添付プロパティを使って描画順序を明示的に指定します。
ヒットテストに注意 — Background が null の Canvas はマウスイベントを受け取りません。クリック検出が必要な場合は Background を Transparent に設定します。
null 背景でのヒットテスト透過 — Background=null（デフォルト）の Canvas はマウスイベントが透過して下層の要素に届きます。Canvas 全体でマウスイベントをキャプチャしたい場合は必ず Background="Transparent" を設定します。
要素の重なりと ZIndex — 同じ ZIndex 値を持つ要素が重なった場合、XAML で後に定義された子（子コレクションの後ろにある要素）が前面に表示されます。重なりを意図的に制御するには子要素の順序を変えるか Panel.ZIndex を明示的に設定します。
Viewbox と組み合わせてスケーラブルに — 固定サイズで設計した Canvas を Viewbox でラップすれば、どんなサイズの画面でも適切にスケールされます。

ソースコード

このデモ画面のソースコードは GitHub で公開しています。アプリ内の「コード表示」ボタンから各プロパティの実際の XAML を確認できます。

GitHub で Canvas のソースコードを見る →