Silverlightのリッチなグラフィックス描画サンプル集：.NETを知らない人でも分かるSilverlight入門（3）（1/3 ページ）

LINE

Hatena

編集部注：Silverlightそのものについて詳しく知りたい読者は、本稿と併せて特集「Silverlightは次世代のJavaScriptフレームワーク？」もご参照ください。

Silverlightのグラフィックス機能を2回に分けて紹介

　前回「SilverlightならWeb上で高精細な動画再生も簡単？」では、Silverlightの一番の特徴となる高精細（HD）な動画の再生機能をオンラインのサンプルとともに紹介しました。第3回となる今回そして、次回第4回では、Silverlightのグラフィックスに焦点を当てて解説していきます。

　Silverlightのグラフィックスは多くの機能を持っており、それらをうまく活用することで素晴らしくリッチなアプリケーションを生み出すことができますが、大きく以下のような種類に分けることができます。

シェイプ
ブラシ
- イメージ
- ビデオ
ジオメトリ
トランスフォーム

　従来のアプリケーションは、イメージやビデオなどのグラフィックスをテキストとはまったく異なるオブジェクトとして扱っていました。一方、SilverlightやWPFでは、同じベクターデータとして扱うことで、拡大・縮小や変形、組み合わせなども自由に行い、表現力を飛躍的に高めているということはすでに周知のことです。

編集部注：ベクターデータについて詳しく知りたい読者は、「いまさら聞けないSVG、なぜ知られていないのか？」をご参照ください。

　今回説明するグラフィックスに関する事柄がすべての根幹を成すといっても過言ではありませんので、じっくりと解説していきたいと思います。さらに、次回では、いよいよアニメーションを解説することになりますが、そのための基本技術も今回の中に含まれますので、ぜひとも併せて参考にしていただけると幸いです。

　それでは、グラフィックス編の前編である第3回を見ていきましょう。

Silverlightの基本図形（Shapeオブジェクト）と描画

　SilverlightのXAMLは多くの図形をサポートしており、それら自由に組み合わせて、複雑な図形さえも表現できます。その中で一番ベースとなる「基本図形（以下、Shapeオブジェクト）」は以下の6種類です（以下リストはインデックスになっています）。

Ellipse：楕円
Line：直線
Path：パス
Polygon：多角形
Polyline：ポリライン
Rectangle：四角形

　図形に関しては説明不要であると思いますが、個人的にこの中で一番使えると思っているのが「Path」です。Pathはそのままですが、形がありません。パス言語に基づいて線（パス）を結んでいって形を作るので、好きな図形を思いのままに実現できます。

　図形描画に詳しい方であれば、すでによく知っていて使いこなしているかと思いますが、このPathを使用するにはデザインツールを使うことをおススメします。Silverlightには、「Expression Studio」（※1）という専用のデザインツール群がありますので、Silverlightのデザイン開発にはこちらを活用してください。

※1：Expression Studioには正式リリースされているバージョン1がありますが、Silverlightに未対応ですので、Expressionを使用してSilverlightを開発したい場合はExpression Studio 2を使用することになります（2008年3月の執筆時点では、Expression Studio 2 Betaが最新バージョンです。参考「Microsoft、『Expression Studio 2』のβ版をリリース」）。

　これらShapeオブジェクトにはそれぞれの描画に応じた多くのプロパティを持っていますが、共通のプロパティも存在します。それが、以下の表1のプロパティです。

**表1　Shapeオブジェクトの共通プロパティ**
プロパティ	詳細	デフォルト値
Stroke	シェイプのアウトラインをどのようにペイントするかを定義。値には色やBrushを指定	null
StrokeThickness	シェイプのアウトラインの幅を定義	0
Fill	シェイプの塗りつぶしをどのようにペイントするかを定義。値には色やBrushを指定	null

　これらの共通プロパティ以外は、それぞれのShapeオブジェクトの描画の形を指定するプロパティとその位置を指定するプロパティがほとんどです。それらについては、どう描画したいかによって使い方が大きく変わる場合がありますので、デザインツールを使用して求める形を自由自在にデザインしてもらえればと思います。

　以下にはイメージがわきやすいようにそれぞれのShapeオブジェクトの簡単なサンプルと実行例を示しますので、参考としてご使用ください。