CodeZine(コードジン)

特集ページ一覧

Silverlight入門(2)-図形やテキストを扱うオブジェクト

図形、イメージ、テキストなどの描画や塗りつぶしのやり方

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2007/11/26 14:00
目次

イメージ

 Web上にアップロードされているJPEGまたはPNGフォーマットの画像ファイルをURIで指定し、Silverlight上で表示することができます。画像ファイルを表示するにはImageオブジェクトを用います。Imageオブジェクトもまた、RectangleやTextBlockのように画面に表示されるオブジェクトの1つとして管理されます。

Imageオブジェクト
<Image .../>

 表示する画像はSourceプロパティで指定します。

Sourceプロパティ
<object Source="string" .../>

 Sourceプロパティには、画像ファイルの位置を表すURIを指定します。このURIの画像ファイルがImageオブジェクトとして表示されます。Imageオブジェクトの幅と高さは、Sourceプロパティに指定されている画像ファイルの幅と高さが用いられますが、WidthプロパティとHeightプロパティから幅と高さを指定できます。画像ファイルの幅と高さと異なる場合は伸縮されて表示されます。

コード06 test.xaml
<Image xmlns="http://schemas.microsoft.com/client/2007"
Source="logo.jpg" Width="360" Height="100"
/>
実行結果
実行結果

 コード06は、logo.jpgファイルを幅360ピクセル、高さ100ピクセルで表示するImageオブジェクトを表しています。

Brushによる塗りつぶし

 図の輪郭線や、楕円や長方形のような閉じた図形の内部はBrushオブジェクトを用いて塗りつぶすことができます。

Brushオブジェクト
Must use derived objects.

 Brushオブジェクトは、空間の内部を塗りつぶす方法を表す抽象オブジェクトです。抽象オブジェクトは共通する基本機能のみを宣言し、具体的な処理は派生するオブジェクトに委ねる不完全なオブジェクトです。Brushから派生するオブジェクトをBrushという抽象的な概念でまとめるために必要なもので、このオブジェクト自身をインスタンス化することはなく、XAMLでもBrush要素を指定することはありません。塗りつぶし方法はBrushオブジェクトの派生オブジェクトで実装されます。

 これまで、LineやRectangle、EllipseオブジェクトのStrokeやFillプロパティで指定した色は、暗黙的に単色で内部を塗りつぶすSolidColorBrushオブジェクトを生成していました。このSolidColorBrushオブジェクトはBrushオブジェクトから派生しています。よってBrushとして利用することができます。

SolidColorBrushオブジェクト
<SolidColorBrush .../>

 SolidColorBrushオブジェクトには、塗りつぶす色を表すColorプロパティが用意されています。StrokeやFill属性で色を指定した場合は、暗黙的に生成されたSolidColorBrushオブジェクトのColorプロパティに指定した色が設定されていたのです。

Colorプロパティ
<object Color="Color" .../>

 もちろん、暗黙的に行われたこの一連の過程はプロパティ要素を用いて明示的に記述することも可能です。

コード07 test.xaml
<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 .../>

 ImageBrushもまた、SolidColorBrushと同様にBrushから派生しています。そのため、SolidColorBrushオブジェクトとは違うオブジェクトですが、Brushオブジェクトを設定することができるプロパティなどには共通して指定できます。

 ImageBrushオブジェクトは、色の代わりにImageSourceプロパティに塗りつぶしに使用する画像ファイルを指定します。

ImageSourceプロパティ
<object ImageSource="string" .../>

 ImageSourceには、画像ファイルのURIを指定します。ここで指定したURIの画像ファイルを図形の内部に表示します。デフォルトでは、画像ファイルは塗りつぶすオブジェクトのサイズに伸縮されます。

コード08 test.xaml
<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ファイルを塗りつぶし用の画像ファイルとして使用します。楕円の内部に指定した画像ファイルが表示されることを確認してください。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:Silverlight入門

著者プロフィール

  • 赤坂 玲音(アカサカ レオン)

    平成13年度「全国高校生・専門学校生プログラミングコンテスト 高校生プログラミングの部」にて最優秀賞を受賞。 2005 年度~ Microsoft Most Variable Professional Visual Developer - Visual C++。 プログラミング入門サイト Wis...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5