Canvas コントロール

Last Updated 2011/09/21

Panel クラスから派生するクラスの中で、Canvas コントロールは異色です。というのは、このコントロール内の子要素を唯一絶対的な座標値で位置決めをするからです。ただし、子要素として UI コントロールを設定してはいけません。そのためのコントロールではないからです。つまり、Canvas という名前から想像できるように、図形コントロールをレイアウトするためのものです。

Canvas コントロールのプロパティのうち、重要なものは次の 5 つです。

• Bottom
• Left
• Right
• Top
• ZIndex

すべて添付プロパティ、つまり、アタッチ可能なプロパティで、子要素のプロパティであるかのようにして設定することができます。ZIndex プロパティはいわゆる Z オーダーを指定するもので、値の小さいもの（負数可能）要素ほど上に表示されます。ZIndex プロパティの設定がない場合は、要素を配置した順番で上に表示されます。

<Window x:Class="CanvasTest.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Window1" Height="300" Width="300">

  <Canvas>
    <Rectangle Fill="Orange" Width="60" Height="60" Canvas.Left="30" Canvas.Top="20" />
    <Ellipse Fill="YellowGreen" Width="60" Height="60" Canvas.Left="60" Canvas.Top="40"/>

    <Rectangle Fill="Orange" Width="60" Height="60" Canvas.Left="150" Canvas.Top="20" Canvas.ZIndex="1"/>
    <Ellipse Fill="YellowGreen" Width="60" Height="60" Canvas.Left="180" Canvas.Top="40"/>
  </Canvas>

</Window>

ところで、Bottom、Left、Right、Top の各プロパティは Canvas コントロールの各辺の端部からの距離です。たとえば、Canvas.Left は左端からの距離です。

なお、Canvas クラスのもう一つの特徴は要素を重ねることができる点です。つまり、Canvas クラス以外のパネルコントロールは子要素を重ねることはできませんが、Canvas クラスだけは可能です。

−以上−