Silverlight 2で.NET技術をカッコよく使おう
連載インデックスへ

Silverlight 2で.NET技術をカッコよく使おう(3)

デザインツールで始めるSilverlightアニメ/グラフィック


インフラジスティックス・ジャパン株式会社
テクニカルエバンジェリスト/デベロッパーサポートエンジニア
山田 達也
2009/2/27
連載「.NETを知らない人でも分かるSilverlight入門」の続編のSilverlight 2入門連載です。Silverlightで.NET技術をよりカッコよく簡単に使えるRIAを作ってみましょう。Silverlightそのものについて詳しく知りたい読者は、本稿と併せて特集「Silverlightは次世代のJavaScriptフレームワーク?」もご参照ください(編集部)

表現力豊かなSilverlightのグラフィック

  前回の記事「無料Visual Studioで始めるSilverlight 2超入門」では、初めてのSilverlight 2のアプリケーションを作成するということで、無料のVisual Web Developerを使ったプロジェクトの作成方法や標準コントロールの使い方を説明しましたが、やはりSilverlight 2の特徴として一番に思い浮かぶことは、その表現力の豊かさだと思います。

 今回からは数回に分けて、Silverlightアプリケーションの表現力を生かすコントロールや機能を紹介していきます。まずはSilverlightのグラフィックスコントロールをおさらいしましょう。これは以前の連載の第3回「Silverlightのリッチなグラフィックス描画サンプル集」でもXAMLコードと併せて解説しているので、詳しくはそちらをご覧ください。

カッコいいSilverlightのグラフィックを見てください


SilverlightのShapeコントロールとブラシを組み合わせた例(もっと大きな画面で見たい場合はこちら、ソースコードはこちらサンプルを動かすには、事前に実行環境のインストールが必要です。→ダウンロードページ

 SilverlightのShapeコントロールとブラシ(Brushオブジェクト)を組み合わせると、このようなグラフィックを表現できます。SilverlightのShapeコントロールには、表1のようなものが用意されています。

表1 Shapeコントロール
コントロール 説明
Rectangle 四角形
Ellipse 円・楕円
Line 2つの点の間を線で結ぶ直線
Polygon 多角形
Polyline ポリライン
Path 線、曲線など複雑な図形

 これらのコントロールは、Shapeという基本クラスを継承したコントロールなので、そのままCanvasやGridなどのコンテナ上に配置して使うことができます。

 Shapeクラスには、図形を塗りつぶすためのFillプロパティや、図形のアウトラインを指定するStrokeプロパティがあります。FillやStrokeには、色やグラデーションを表現するブラシを指定します。

表2 ブラシの種類
ブラシ 説明
SolidColorBrush 単色のブラシ
RedやBlueのように、定義済みの名前を使用するか、またはアルファチャネルを含んだ32bitsパレットで指定可能
LinearGradientBrush 線形グラデーションを構成するブラシ
RadialGradientBrush 放射線状グラデーションを構成するブラシ
ImageBrush 画像で領域を塗りつぶすブラシ
VideoBrush 動画で領域を塗りつぶすブラシ

 さらに、複雑な図形やベジェ曲線を描くときにはジオメトリ(Geometry)オブジェクトを使用します。ジオメトリについては、前述の記事をご覧ください。

Silverlightのデザインツールをインストール

 このようにSilverlightでは図形やブラシによって豊かなグラフィック表現が可能です。ただ、Visual StudioやVisual Web Developerのみで開発をしていると、1行ずつXAMLコードを編集しながらプレビューを確認するという地道な作業が必要になります。

 根っからのプログラマにとってはこれで十分なのかもしれませんが、やっぱりもっと直感的に画面のデザインをしたいと思いますよね。これを実現するのが、「Microsoft Expression Blend 2」です。マイクロソフトのサイトから評価版をダウンロードできるのでインストールしてみましょう(評価版は30日間有効です)。

 Expression Blend 2本体のインストールが終わったら、Expression Blend 2をSilverlight 2に対応させるためにService Pack1を適用する必要があります。以下のサイトからダウンロードを行いインストールしてください。

 次ページからは、Expression Blend 2を使ったSilverlightのグラフィックやアニメーションの作り方を見ていきましょう。

  1-2-3

 INDEX
Silverlight 2で.NET技術をカッコよく使おう(2)
デザインツールで始めるSilverlightアニメ/グラフィック  
Page1
表現力豊かなSilverlightのグラフィック
Silverlightのデザインツールをインストール
  Page2
初めてのExpression Blend 2
  Page3
Silverlightアニメーターになろう
アニメにマウス操作を加えて、ちょっとしたゲームアプリを
Silverlightはもっとイロイロできるよ



リッチクライアント&帳票 全記事一覧へ




HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

HTML5+UX 記事ランキング

本日 月間