表示可能なオブジェクト
表示可能なオブジェクトは、すべてUIElementと呼ばれる抽象的な基本オブジェクトから派生しています。UIElementを継承している表示可能なオブジェクトは、UIElementで宣言されている基本的なメンバをサポートしているため、基本的な操作方法はすべて共通しています。UIElementを継承している表示可能なオブジェクトとは、具体的には線や長方形、楕円、テキスト、画像など、2次元のベクタグラフィックスを構成する基本的な要素となります。上記のLineやEllipse、Rectangleオブジェクトも、UIElementを継承しています。これに対してBrushなど、直接表示することのないオブジェクトはUIElementとは関係ありません。
Must use derived objects.
XAMLでUIElement要素を指定してUIElementオブジェクトを生成することはありません。このオブジェクトは、表示可能なオブジェクトに共通する基本的な機能を宣言することが役割です。UIElementから派生する表示可能なオブジェクトのプロパティの一部はUIElementで宣言されています。例えば、EllipseやRectangleで利用したWidthやHeightプロパティはUIElementオブジェクトのものです。そのため、他のUIElementを継承しているオブジェクトでも共通して利用できます。
Canvasオブジェクト
これまで、線、長方形、楕円オブジェクトなどを個別に表示するXAMLコードを書いてきましたが、これらを同時に表示するには、複数のオブジェクトを格納できるコンテナ（入れ物）が必要になります。CanvasオブジェクトはUIElementから派生する表示可能なオブジェクトの1つですが、他のオブジェクトとは異なり図を表示するものではなく、純粋に他のUIElementを格納するコンテナとして機能します。Canvasオブジェクトは、UIElementオブジェクトを任意の数だけ格納し、指定された座標から表示してくれます。
<Canvas ...> oneOrMoreUIElements </Canvas>
<Canvas .../>
oneOrMoreUIElementsに、任意の数のUIElementを継承するオブジェクトの要素を指定することができます。Canvasオブジェクトは、任意の数のUIElementオブジェクトを管理するVisualCollectionオブジェクトをChildrenプロパティに保有しています。実際には、XAMLで指定したCanvas要素の子要素は、このVisualCollectionオブジェクトに格納されますが、XAML側で意識する必要はありません。
<Canvas xmlns="http://schemas.microsoft.com/client/2007"> <Rectangle Width="200" Height="200" Stroke="Black" StrokeThickness="5" /> <Ellipse Width="300" Height="100" Stroke="Red" StrokeThickness="2" /> </Canvas>
上記のコードは、黒い長方形を表すRectangleオブジェクトと赤い楕円形を表すEllipseオブジェクトを同時に表示します。このように、複数のオブジェクトを表示するには、オブジェクトの入れ物となるCanvasオブジェクトを利用します。
コード09では、長方形、楕円形が共にCanvasオブジェクトの左上隅に配置されていました。オブジェクトを任意の座標に移動させるにはCanvas.LeftプロパティとCanvas.Topプロパティを使います。これらのプロパティはUIElementオブジェクトで宣言されているため、UIElementを継承する表示可能なオブジェクトはすべて保有しています。
<object Canvas.Left="Double" .../>
<object Canvas.Top="Double" .../>
Canvas.Leftプロパティはオブジェクトの左隅のX座標、Canvas.Topプロパティはオブジェクトの上部のY座標を指定します。これらのプロパティはオブジェクトが親Canvasを持っている場合にのみ機能します。Canvas内にあるオブジェクトは、これらのプロパティに指定されている値をオブジェクトの左上隅の座標として表示されます。
<Canvas xmlns="http://schemas.microsoft.com/client/2007"> <Rectangle Canvas.Left="200" Canvas.Top="100" Width="200" Height="200"
Stroke="Black" StrokeThickness="5"
/> <Ellipse Canvas.Left="50" Canvas.Top="30" Width="300" Height="100"
Stroke="Red" StrokeThickness="2"
/> </Canvas>
上記のコードは、Canvas.LeftとCanvas.Topプロパティを用いてRectangleとEllipseオブジェクトの座標を設定しています。子オブジェクトは、親Canvasの左上隅を原点（0,0）と解釈し、そこからの相対座標で描画されます。
最後に
前回のXAMLの文法に続いて、本稿ではXAMLからさまざまなオブジェクトを宣言する方法について解説しました。XAMLで宣言されたオブジェクトは、設定されているプロパティなどに基づいて描画されるため、XAMLとSilverlightオブジェクトを理解することで、ある程度自由に図形やイメージを表示させることができるようになります。しかし、これらはSilverlight起動時に生成されるオブジェクトの静的な宣言であり、プログラム的な振舞を持つことはできません。ユーザーからの入力などに反応し、何らかのデータ処理を行うにはJavaScriptでプログラムを書く必要があります。当然、スクリプトからもSilverlightオブジェクトを操作できます。
もちろん、JavaScriptを使わなくてもXAMLを新しいベクタグラフィックス用のフォーマットとして活用する手段もあるでしょう。データベースに接続して処理を行った結果を、サーバ側スクリプトで動的に生成されたXAMLでグラフ表示するといった使い方もあるかもしれません。
