はじめに
前回はSilverlightのオブジェクトを宣言するアプリケーション記述言語「XAML」の構文について解説しました。XAMLの書き方を理解することで、オブジェクトの宣言やプロパティの設定を行うことができるようになりますが、肝心のオブジェクトの種類やプロパティを知らなければ自由にグラフィックスを作成することはできません。そこで今回は、Silverlightがサポートしているオブジェクトの機能を個別に説明していきます。
前回の記事
基本図形
Silverlightでブラウザ上に図やイメージを描画するには、表示可能なオブジェクトを宣言しなければなりません。XAMLは、さまざまなオブジェクトの構造やプロパティの初期値を宣言することができ、Silverlightに読み込まれたときに宣言に従ってインスタンス化され画面に表示されます。例えば、画面に線を引きたい場合は線を表すオブジェクトを生成し、楕円を表示したい場合は楕円を表すオブジェクトを生成すれば良いのです。
最も基本的な図形である線はLineオブジェクトで表されます。Lineオブジェクトは、指定された画面上の2点を結ぶ線を表します。
<Line .../>
Lineオブジェクトによって表示される線は、LineオブジェクトのX1、Y1、X2、Y2プロパティが指す2点を結びます。X1とY1プロパティは最初の点のX座標、Y座標をそれぞれ表し、X2とY2は終点の座標を表します。例えば、X1プロパティは次のように記述します。Y1、X2、Y2の使い方も同様です。
<object X1="Double" .../>
X1プロパティには、小数点以下を含むことができる任意の数を表すDouble型の値を指定することができます。座標は、Silverlightの画面左上隅を原点（0,0）とし、X座標が増えるほど右方向に、Y座標が増えるほど下方向に向かいます。コンピュータで一般的に用いられている座標系です。Lineは、点（X1,Y1）と点（X2,Y2）を結びます。
これで、2点を結ぶ線を宣言することができました。しかし、この状態では線の塗りつぶし方が指定されていないので、まだ画面上には表示されません。Lineオブジェクトを含め、多くの表示可能なオブジェクトは図形を塗りつぶすための方法をプロパティで指定します。図形の輪郭の塗りつぶしはStrokeプロパティで設定できます。
<object Stroke="Brush" .../>
<object> <object.Stroke> <Brush" .../> </object.Stroke> </object>
Strokeプロパティの値はBrushオブジェクトです。Brushオブジェクトは、図形をどのように塗りつぶすかを表すもので、適切なBrushを設定することで図形を色や画像で塗りつぶすことができます。複雑な構造のBrushを設定するにはプロパティ要素を用いなければなりませんが、単色で塗りつぶす場合は、色を表すColor構造体の値を直接Stroke属性に指定できます。複雑なBrushについては後述します。
<object.property = "colorString" .../>
Colorは色を表す特殊な値です。XAML上ではオブジェクトではなく、色を表す文字列、または数値を、XMLの属性の値として指定します。色は、一般的な色の名前で指定する方法と、数値で指定する方法が用意されています。名前で指定する場合はあらかじめ定められているBlackやBlue、Red、Greenといった色名を使います。数値で指定する場合は、#記号に続いて16進数で赤、緑、青の順で色の強さを表すことができます。基本的にHTMLで用いられている標準的な色の指定方法と変わりません。
加えて、Silverlightではアルファ値とscRGBをサポートしています。アルファ値は省略可能ですが、アルファ値を指定したい場合は#AARRGGBBという順で赤要素よりも手前に指定します。scRGBはsc#に続いてカンマ区切りでR,G,BまたはA,R,G,Bの順で値を指定することができます。例えば「sc#1.0, 0.5, 0.3」といった形になります。
線の太さはStrokeThicknessプロパティで指定できます。
<object StrokeThickness="Double" .../>
このプロパティには、線の太さを表すDouble型の値を指定します。値が大きいほど線は太く、小さいほど線は細くなります。
<Line xmlns="http://schemas.microsoft.com/client/2007"
X1="10" Y1="10" X2="200" Y2="100"
Stroke="Black" StrokeThickness="10"
/>
上記のXAMLコードをSilverlightで表示すると、座標（10,10）から（200,100）までの線が黒色で表示されます。
次に、長方形を表示してみましょう。長方形を表示するにはRectangleオブジェクトを用います。
<Rectangle .../>
Lineは2つの点を表す座標を指定しましたが、Rectangleオブジェクトは長方形の幅と高さを指定します。幅はWidthプロパティから、高さはHeightプロパティから指定します。これらのプロパティは、表示可能なオブジェクトに共通する重要なプロパティです。
<object Width="Double" .../>
<object Height="Double" .../>
StrokeプロパティはLineオブジェクトと同じようにRectangleオブジェクトでも利用することができます。
<Rectangle xmlns="http://schemas.microsoft.com/client/2007"
Width="200" Height="100" Stroke="Red" StrokeThickness="5"
/>
上記のXAMLコードは、幅200ピクセル、高さ100ピクセルの長方形を赤色で表示するというものです。長方形はオブジェクトを格納している親の左上隅から描画されます。画面上の任意の場所から長方形を描画したい場合は、後述するCanvasオブジェクトを用いる必要があります。
Rectangleオブジェクトとほぼ同じ性質をもつオブジェクトで、楕円形を表すEllipseオブジェクトがあります。Ellipseは、指定した幅と高さの長方形の内部に収まる楕円を描画します。
<Ellipse .../>
幅や高さはWidthとHeightプロパティで、色はStrokeプロパティで設定できます。基本的なプロパティはRectangleと変わりありません。コード02のRectangle要素をEllipse要素に置き換えるだけで、楕円を表示することができます。
<Ellipse xmlns="http://schemas.microsoft.com/client/2007"
Width="200" Height="100" Stroke="Red" StrokeThickness="5"
/>
コード03は、コード02のRectangle要素をEllipse要素に変更したものです。基本的なプロパティの使い方は同じまま、オブジェクトを変更しただけで図の形が変化しました。Silverlightでサポートされているオブジェクトを理解することで、より自由なプレゼンテーションが可能になります。
RectangleやEllipseのような閉じられている図形は、輪郭線とは別に内部を塗りつぶすことができます。内部の塗りつぶしにはFillプロパティを用います。
<object Fill="Brush" .../>
<object> <object.Fill> <Brush" .../> </object.Fill> </object>
Fillプロパティには、Strokeプロパティと同じように、内部を塗りつぶす方法を表すBrushオブジェクトを指定します。Fill属性にColorを指定すれば、指定した色で内部を塗りつぶすことができます。Strokeと組み合わせて輪郭と内部を別の色で塗りつぶすことができます。ただし、Lineのような閉じられていない図形には効果がありません。
<Ellipse xmlns="http://schemas.microsoft.com/client/2007"
Width="200" Height="100"
Fill="Red" Stroke="Black" StrokeThickness="5"
/>
上記のコードは、楕円の内部を赤色で塗りつぶす例です。Strokeを省略した場合は輪郭線無しで、内部だけを塗りつぶす楕円を表示することも可能です。Rectangleオブジェクトの場合も同様にFillを用いることができます。
