Canvas オブジェクト

Canvas は、図形やコントロールを含み、位置を指定するためのオブジェクトです。どの Silverlight XAML ファイルも、最低ひとつの Canvas を持っています。このドキュメントでは、Canvas オブジェクトについて紹介し、その子オブジェクトをどのように追加し、位置やサイズを指定するのかを解説します。このドキュメントは以下のセクションで構成されます。

Canvas にオブジェクトを追加する
オブジェクトの位置を指定する
幅や高さの制御
Canvas オブジェクトのネスト（入れ子）
次のステップ

Canvas にオブジェクトを追加する

Canvas は、他のオブジェクトを含み、位置を指定します。 Canvas にオブジェクトを追加するには、<Canvas> タグの間に、そのオブジェクトを挿入します。以下の例では、Ellipse オブジェクトを Canvas に追加しています。この Canvas はルート要素なので、namespace 宣言を含んでいます。

[hide XAML]

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    
  <Ellipse 
     Height="200" Width="200"
     Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />
</Canvas>

[hide] [restart]

Canvas は、オブジェクトをいくつでも含むことができます。他の Canvas オブジェクトを含むこともできます。

オブジェクトの位置を指定する

Canvas におけるオブジェクトの位置を指定するためには、オブジェクトが持つ Canvas.Left と Canvas.Top という付属プロパティ（attached property）を設定します。 Canvas.Left プロパティは、オブジェクトと親となる Canvas の左端との距離を指定するものです。また、Canvas.Top 付属プロパティは、オブジェクトと親 Canvas の上端からの距離を指定します。以下の例では、前の例の楕円（Ellipse）を Canvas の左から 30ピクセル、上から 30ピクセル移動させています。

[hide XAML]

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Ellipse 
      Canvas.Left="30" Canvas.Top="30" 
      Height="200" Width="200"
      Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />
</Canvas>

[hide] [restart]

以下の図は、Canvas の座標系と前の例の Ellipse を強調して示しています。

Zオーダー

デフォルトでは、Canvas におけるオブジェクトの Zオーダーは、宣言された順になります。後で宣言されたオブジェクトが、先に宣言されたオブジェクトよりも前に表示されます。以下の例では、3 つの Ellipse（楕円）オブジェクトを作成しています。最後に宣言された（緑色の）Ellipse が、他の Ellipse オブジェクトよりも手前に表示されます。

[hide XAML]

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  
  <Ellipse 
      Canvas.Left="5" Canvas.Top="5" 
      Height="200" Width="200"
      Stroke="Black" StrokeThickness="10" Fill="Silver" />
      
  <Ellipse 
      Canvas.Left="50" Canvas.Top="50" 
      Height="200" Width="200"
      Stroke="Black" StrokeThickness="10" Fill="DeepSkyBlue" />      
      
  <Ellipse 
      Canvas.Left="95" Canvas.Top="95" 
      Height="200" Width="200"
      Stroke="Black" StrokeThickness="10" Fill="Lime" />     
              
</Canvas>

[hide] [restart]

Canvas においては、この動作を Canvas.ZIndex 付属プロパティを設定することで変更できます。大きな値ほど手前になり、小さな値ほど奥になります。以下のサンプルは、前のものに似ていますが、Ellipse オブジェクトのZオーダーを逆順にしています。このため、最初に宣言した（灰色の）Ellipse が手前に表示されます。

[hide XAML]

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  
  <Ellipse 
      Canvas.ZIndex="3"
      Canvas.Left="5" Canvas.Top="5" 
      Height="200" Width="200"
      Stroke="Black" StrokeThickness="10" Fill="Silver" />
      
  <Ellipse 
      Canvas.ZIndex="2"
      Canvas.Left="50" Canvas.Top="50" 
      Height="200" Width="200"
      Stroke="Black" StrokeThickness="10" Fill="DeepSkyBlue" />      
      
  <Ellipse 
      Canvas.ZIndex="1"
      Canvas.Left="95" Canvas.Top="95" 
      Height="200" Width="200"
      Stroke="Black" StrokeThickness="10" Fill="Lime" />     
              
</Canvas>

[hide] [restart]

幅や高さの制御

Canvas、図形、その他の要素は Width と Height というプロパティを持っており、これらのサイズを指定することができます。以下の例では、200 ピクセルの幅と、200 ピクセルの高さを持つ Ellipse を作成しています。なお、百分率（パーセント）サイズはサポートされていません。

[hide XAML]

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Ellipse 
      Canvas.Left="30" Canvas.Top="30" 
      Height="200" Width="200"
      Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />

</Canvas>

[hide] [restart]

次の例は、親の Canvas オブジェクトの Width と Height を 200 に設定して、緑色の背景を与えています。

[hide XAML]

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Width="200" Height="200"
   Background="LimeGreen">
    
  <Ellipse 
    Canvas.Left="30" Canvas.Top="30" 
    Height="200" Width="200"
    Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />
</Canvas>

[hide] [restart]

この例を実行する場合、緑色の正方形が Canvas であり、灰色の背景が Canvas で見えなくなっているホストコントロールの部分です。 Ellipse が、Canvas の境界をはみ出した場合でも、クリッピングされないことに注意してください。 Width と Height は、設定しない限り、デフォルトでゼロになっています。

Canvas オブジェクトのネスト（入れ子）

Canvas は、他の Canvas オブジェクトを含むことができます。以下の例では、2 つの別の Canvas オブジェクトを含む Canvas オブジェクトを作成しています。

[hide XAML]

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Canvas Height="50" Width="50" Canvas.Left="30" Canvas.Top="30"
      Background="blue"/>
  
  <Canvas Height="50" Width="50" Canvas.Left="130" Canvas.Top="30"
      Background="red"/>
</Canvas>

[hide] [restart]

次のステップ

次のトピック、描画と塗りつぶしでは、複雑な図形を作成したり、単色・グラデーション・イメージで塗りつぶす方法を解説します。