イメージ
Web上にアップロードされているJPEGまたはPNGフォーマットの画像ファイルをURIで指定し、Silverlight上で表示することができます。画像ファイルを表示するにはImageオブジェクトを用います。Imageオブジェクトもまた、RectangleやTextBlockのように画面に表示されるオブジェクトの1つとして管理されます。
<Image .../>
表示する画像はSourceプロパティで指定します。
<object Source="string" .../>
Sourceプロパティには、画像ファイルの位置を表すURIを指定します。このURIの画像ファイルがImageオブジェクトとして表示されます。Imageオブジェクトの幅と高さは、Sourceプロパティに指定されている画像ファイルの幅と高さが用いられますが、WidthプロパティとHeightプロパティから幅と高さを指定できます。画像ファイルの幅と高さと異なる場合は伸縮されて表示されます。
<Image xmlns="http://schemas.microsoft.com/client/2007"
Source="logo.jpg" Width="360" Height="100"
/>
コード06は、logo.jpgファイルを幅360ピクセル、高さ100ピクセルで表示するImageオブジェクトを表しています。
Brushによる塗りつぶし
図の輪郭線や、楕円や長方形のような閉じた図形の内部はBrushオブジェクトを用いて塗りつぶすことができます。
Must use derived objects.
Brushオブジェクトは、空間の内部を塗りつぶす方法を表す抽象オブジェクトです。抽象オブジェクトは共通する基本機能のみを宣言し、具体的な処理は派生するオブジェクトに委ねる不完全なオブジェクトです。Brushから派生するオブジェクトをBrushという抽象的な概念でまとめるために必要なもので、このオブジェクト自身をインスタンス化することはなく、XAMLでもBrush要素を指定することはありません。塗りつぶし方法はBrushオブジェクトの派生オブジェクトで実装されます。
これまで、LineやRectangle、EllipseオブジェクトのStrokeやFillプロパティで指定した色は、暗黙的に単色で内部を塗りつぶすSolidColorBrushオブジェクトを生成していました。このSolidColorBrushオブジェクトはBrushオブジェクトから派生しています。よってBrushとして利用することができます。
<SolidColorBrush .../>
SolidColorBrushオブジェクトには、塗りつぶす色を表すColorプロパティが用意されています。StrokeやFill属性で色を指定した場合は、暗黙的に生成されたSolidColorBrushオブジェクトのColorプロパティに指定した色が設定されていたのです。
<object Color="Color" .../>
もちろん、暗黙的に行われたこの一連の過程はプロパティ要素を用いて明示的に記述することも可能です。
<Rectangle xmlns="http://schemas.microsoft.com/client/2007"
Width="200" Height="100"
> <Rectangle.Fill> <SolidColorBrush Color="Green" /> </Rectangle.Fill> </Rectangle>
上記のコードはRectangleオブジェクトのFillプロパティの設定にRectangle.Fillプロパティ要素を用いています。明示的にオブジェクトをプロパティに設定するには、属性ではなくプロパティ要素を書かなければなりません。そして、Rectangle.Fillプロパティ要素の子要素としてSolidColorBrushオブジェクトが指定されています。
SolidColorBrush以外にもBrushオブジェクトを継承しているオブジェクトが存在します。他のBrushを継承するオブジェクトを使えば、単色以外の方法で図形の内部を塗りつぶすことができます。例えばImageBrushオブジェクトは画像ファイルを用いて図形の内部を塗りつぶします。つまりテクスチャです。
<ImageBrush .../>
ImageBrushもまた、SolidColorBrushと同様にBrushから派生しています。そのため、SolidColorBrushオブジェクトとは違うオブジェクトですが、Brushオブジェクトを設定することができるプロパティなどには共通して指定できます。
ImageBrushオブジェクトは、色の代わりにImageSourceプロパティに塗りつぶしに使用する画像ファイルを指定します。
<object ImageSource="string" .../>
ImageSourceには、画像ファイルのURIを指定します。ここで指定したURIの画像ファイルを図形の内部に表示します。デフォルトでは、画像ファイルは塗りつぶすオブジェクトのサイズに伸縮されます。
<Ellipse xmlns="http://schemas.microsoft.com/client/2007"
Width="200" Height="100" Stroke="Black" StrokeThickness="4"
> <Ellipse.Fill> <ImageBrush ImageSource="logo.jpg" /> </Ellipse.Fill> </Ellipse>
上記のコードはEllipseオブジェクトによる楕円の内部の塗りつぶしにImageBrushを利用しています。ImageBrushはlogo.jpgファイルを塗りつぶし用の画像ファイルとして使用します。楕円の内部に指定した画像ファイルが表示されることを確認してください。
