The Canvas control

キャンバスはおそらく、パネルの中で最も単純です。デフォルトでは実質何もしません。あなた自身が指定した具体的な座標にコントロールを貼り付けるだけです。

もしあなたがかつてWinFormsのようなUIライブラリを使ったことがあるなら、これはおそらそこに戻ったような気分になさせるでしょう。だけどしかし、全ての子コントロールを完全に制御したいと思うかもしれませんが、それはユーザーがウィンドウをリサイズしても、パネルは何もしてくれないことを意味します。絶対位置に配置されたテキストを再配置する場合やコンテンツがスケーリングされる場合でも。

これについては後ほど更に述べますが、単純な例から入りましょう。これは主に、キャンバスの機能がデフォルトでどれぐらい少ないかを示します。

<Window x:Class="WpfTutorialSamples.Panels.Canvas"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Canvas" Height="200" Width="200">
	<Canvas>
		<Button>Button 1</Button>
		<Button>Button 2</Button>
	</Canvas>
</Window>

見ればわかるように、二つのボタンを作ったにも関わらず、両方が正確に同じ場所に有るので最後の一つしか見えません。キャンバスは子コントロールに座標を与えない限り何もしません。これにはキャンバスコントロールのLeft, Right, Top または Bottom 添付プロパティを使います。

これらのプロパティでキャンバスの４つのエッジからの相対位置を指定できます。デフォルトではこれらはNaN（値なし）に設定されていてキャンバスの上左のコーナーを指していますが、既に述べたように簡単に変更できます。

<Window x:Class="WpfTutorialSamples.Panels.Canvas"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Canvas" Height="200" Width="200">
	<Canvas>
		<Button Canvas.Left="10">Top left</Button>
		<Button Canvas.Right="10">Top right</Button>
		<Button Canvas.Left="10" Canvas.Bottom="10">Bottom left</Button>
		<Button Canvas.Right="10" Canvas.Bottom="10">Bottom right</Button>
	</Canvas>
</Window>

必要なプロパティしか設定していないことに注意してください。最初の二つのボタンは、X軸の値だけを指定したかったので Left と Right プロパティを使って両端から中央方向に向かってボタンを移動しました。

下部のボタンには、Left/Right と Bottom の両方を使って、それぞれの端からそれぞれ中央方向へボタンを移動しています。普通は Top または Bottom と/または Left または Right の値を指定します。

既に述べたようにキャンバスでは配置の完全な制御を行わないので、全てのコントロールを配置する十分な余裕が有るかどうかや、コントロール同士が重なってしまうかどうかを配慮しません。これはほとんど全てのダイアログのデザインに適していません。ただキャンバスは、その名前が暗示するとおり、一つの優れた用途があります。図形描画です。WPFは優れたイラストレーションを描くための多くのコントロールをキャンバスの内部に持っています。

Z-インデックス

次の例では、キャンバスにおける、Z-インデックスというもう一つの大変重要な概念を説明するために、WPFの図形に関連するいくつかのコントロールを使います。通常、キャンバスで二つのコントロールが重なった場合、マークアップの中で最後に定義されたコントロールが優先され、もう一つのコントロールの上に描画されます。しかし、Panel クラスの ZIndex 添付プロパティを使うと、これを簡単に変えられます。

最初に、Zインデックスを全く使わない例です。

<Window x:Class="WpfTutorialSamples.Panels.CanvasZIndex"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="CanvasZIndex" Height="275" Width="260">
    <Canvas>
        <Ellipse Fill="Gainsboro" Canvas.Left="25" Canvas.Top="25" Width="200" Height="200" />
        <Rectangle Fill="LightBlue" Canvas.Left="25" Canvas.Top="25" Width="50" Height="50" />
        <Rectangle Fill="LightCoral" Canvas.Left="50" Canvas.Top="50" Width="50" Height="50" />
        <Rectangle Fill="LightCyan" Canvas.Left="75" Canvas.Top="75" Width="50" Height="50" />
    </Canvas>
</Window>

それぞれの矩形は円の後で定義されているので、円の上に上書きされていて、矩形同士はあとに定義されたものが上書きされています。これを変えてみましょう。

<Window x:Class="WpfTutorialSamples.Panels.CanvasZIndex"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="CanvasZIndex" Height="275" Width="260">
    <Canvas>
        <Ellipse Panel.ZIndex="2" Fill="Gainsboro" Canvas.Left="25" Canvas.Top="25" Width="200" Height="200" />
        <Rectangle Panel.ZIndex="3" Fill="LightBlue" Canvas.Left="25" Canvas.Top="25" Width="50" Height="50" />
        <Rectangle Panel.ZIndex="2" Fill="LightCoral" Canvas.Left="50" Canvas.Top="50" Width="50" Height="50" />
        <Rectangle Panel.ZIndex="4" Fill="LightCyan" Canvas.Left="75" Canvas.Top="75" Width="50" Height="50" />
    </Canvas>
</Window>

ZIndexのデフォルト値は0ですが、それぞれの図形に新しい値を割り当てます。ルールは、ZIndexの大きな要素が、小さな要素の上に上書きされます。同じ値の場合は、後で定義されたほうが”勝ちます”。スクリーンショットを見ればわかりますが、ZIndex プロパティで全く異なる見映になります。