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

» 2008年03月19日 00時00分公開

編集部注：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オブジェクトの簡単なサンプルと実行例を示しますので、参考としてご使用ください。

■ 楕円：Ellipseオブジェクトサンプル

図1　Ellipseオブジェクトサンプル実行例の画像（実際にSilverlightで見たい場合は画像をクリック！）※サンプルを動かすには、事前に実行環境のインストールが必要です。→ダウンロードページ

ソース1　Ellipseオブジェクトサンプル

<Canvas 
      xmlns="http://schemas.microsoft.com/client/2007"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Width="640" Height="480"
      Background="White"
      x:Name="Page"> 

      

        <Ellipse Height="100"
      Width="100"
      Fill="Yellow"
      Stroke="Black"

          StrokeThickness="2"/>

      </Canvas>

■ 直線：Lineオブジェクトサンプル

図2　Lineオブジェクトサンプル実行例の画像（実際にSilverlightで見たい場合は画像をクリック！）※サンプルを動かすには、事前に実行環境のインストールが必要です。→ダウンロードページ

ソース2　Lineオブジェクトサンプル

<Canvas
xmlns="http://schemas.microsoft.com/client/2007"

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  Width="640" Height="480"
Background="White"
x:Name="Page">



<!-- (10,10) から (50,50) の斜線の描画（Strokeに単色を指定） -->

  <Line X1="10" Y1="10"
X2="50" Y2="50"
Stroke="Black"

    StrokeThickness="4" />



<!-- 右へ100ピクセル移動した(10,10) から (50,50) の斜線の描画（StrokeにBrushを指定） -->

  <Line X1="10" Y1="10"
X2="50" Y2="50"
StrokeThickness="4"

    Canvas.Left="100">

    <Line.Stroke>

      <RadialGradientBrush GradientOrigin="0.5,0.5"

         Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">

        <RadialGradientBrush.GradientStops>

          <GradientStop Color="Red" Offset="0" />

          <GradientStop Color="Blue" Offset="0.25" />

        </RadialGradientBrush.GradientStops>

      </RadialGradientBrush>

    </Line.Stroke>

  </Line>



<!-- (10,60) から (150,60) の水平線の描画 -->

  <Line X1="10" Y1="60"
X2="150" Y2="60"
Stroke="Black"

    StrokeThickness="4"/>

</Canvas>

　RadialGradientBrushオブジェクトについては後述します。

■ パス：Pathオブジェクトサンプル

図3　Pathオブジェクトサンプル実行例の画像（実際にSilverlightで見たい場合は画像をクリック！）※サンプルを動かすには、事前に実行環境のインストールが必要です。→ダウンロードページ

ソース3　Pathオブジェクトサンプル

<Canvas 
      xmlns="http://schemas.microsoft.com/client/2007"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Width="640" Height="480"
      Background="White"
      x:Name="Page">

       

        <Path Fill="Gold" Stroke="Black" StrokeThickness="1">

    <Path.Data>

      <EllipseGeometry Center="50,50" RadiusX="50" RadiusY="50" />

    </Path.Data>

  </Path>

      </Canvas>

■ 多角形：Polygonオブジェクトサンプル

図4　Polygonオブジェクトサンプル実行例の画像（実際にSilverlightで見たい場合は画像をクリック！）※サンプルを動かすには、事前に実行環境のインストールが必要です。→ダウンロードページ

ソース4　Polygonオブジェクトサンプル

<Canvas 
      xmlns="http://schemas.microsoft.com/client/2007"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Width="640" Height="480"
      Background="White"
      x:Name="Page">
 
      

      <!-- Pointsプロパティに多角形を示す頂点のセットを指定することで図形を生成 -->

  <Polygon Points="300,200 400,125 400,275 300,200"
Stroke="Purple"

    StrokeThickness="2">

    <Polygon.Fill>

      <SolidColorBrush Color="Blue" Opacity="0.4"/>

    </Polygon.Fill>

  </Polygon>

      </Canvas>

■ ポリライン：Polylineオブジェクトサンプル

図5　Polylineオブジェクトサンプル実行例の画像（実際にSilverlightで見たい場合は画像をクリック！）※サンプルを動かすには、事前に実行環境のインストールが必要です。→ダウンロードページ

ソース5　Polylineオブジェクトサンプル

<Canvas 
      xmlns="http://schemas.microsoft.com/client/2007"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Width="640" Height="480"
      Background="White"
      x:Name="Page">
 
      

      <!-- Pointsプロパティに線の点を示すセットを指定することで図形を生成 -->

  <Polyline Points="50,25 0,100 100,100 50,25"
Stroke="Blue"     StrokeThickness="10"
Canvas.Left="75" Canvas.Top="50" />

      </Canvas>

■ 四角形：Rectangleオブジェクトサンプル

図6　Rectangleオブジェクトサンプル実行例の画像（実際にSilverlightで見たい場合は画像をクリック！）※サンプルを動かすには、事前に実行環境のインストールが必要です。→ダウンロードページ

ソース6　Rectangleオブジェクトサンプル

<Canvas 
      xmlns="http://schemas.microsoft.com/client/2007"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Width="640" Height="480"
      Background="White"
      x:Name="Page">

       

        <Rectangle Width="100" Height="100" Fill="Blue" Stroke="Red" 

    Canvas.Top="20" Canvas.Left="20" StrokeThickness="3" />

      </Canvas>

　次のページでは、グラデーションができる「ブラシ」やベジェ曲線が使える「ジオメトリ」を解説します。より複雑なグラフィックスをお見せしましょう。

色彩のグラデーションも鮮やかにできるブラシ

　　　　　　 1|2|3 次のページへ