はじめに

前回は、Windows Mobile 6.5の.NET Compact Frameworkを使って図形を描きました。SilverlightではXMLを使って、より手軽にビジュアルに富んだユーザーインターフェースを描くことができます。今回は、前回書いた基本的な図形をXAML使って描いてみましょう。

……その前に、第11回にて紹介しましたWindows Phone Developer Tools CTPの新しいバージョンのものが4月29日にリリースされています。以前のバージョンのものは既に削除されているようです。

• http://www.microsoft.com/downloads/details.aspx?FamilyID=cabcd5ed-7dfc-4731-9d7e-3220603cad14&displaylang=en

「Visual Studio 2010の製品版に対応」とは書いているのですが、どうもVisual Studio 2010 日本語版では、Windows Phone 7向けのSilverlightプロジェクトのテンプレートが表示されません。従来通り、Developer Toolsに含まれているVisual Studio 2010 Express（英語版）を使用する必要がありそうですね。以降は、このバージョンを使用しての説明となります。

Shapeオブジェクトを使用して図形を描画

図形を描画するためのプロジェクトを作成します。Visual StudioのStart Pageから「New Project...」を選択して、Windows Phone Applicationプロジェクトを作成します。プロジェクト名は「ShapeApplication」としました。使用しないTextBlockなどは削除し、Gridのみを残しました。

<phoneNavigation:PhoneApplicationPage 
    x:Class="ShapeApplication.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phoneNavigation="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Navigation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}">
    
    <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneBackgroundBrush}">
    
    </Grid>
    
</phoneNavigation:PhoneApplicationPage>

Shapeオブジェクトを使用して図形を描画します。ShapeオブジェクトはUI要素のひとつで、基本的なコントロールと同様にパネル上に配置することができます。ここでは、Gridに対して図形を配置することとします。

線の描画を行う

まずは線を引いてみましょう。線を引くには、Lineを使用します。線の描画開始座標X1・Y1と終了座標X2・Y2を指定し、2点の座標間に直線を表示します。Strokeプロパティに色を、StrokeThicknessプロパティには線の太さを指定します。

  <!-- 直線を引く -->
  <Line Stroke="White" X1="20" Y1="40" X2="400" Y2="40" />

  <!-- 太い直線を引く -->
  <Line Stroke="OrangeRed" StrokeThickness="5" X1="100" Y1="60" X2="440" Y2="60" />

  <!-- 斜めに直線を引く -->
  <Line Stroke="Green" X1="40" Y1="80" X2="400" Y2="120" />

StrokeDashArrayプロパティに線分の長さを指定して破線を配置します。StrokeDashCapプロパティにて線分の終端部分の形状を指定します。指定可能な形状は以下の4つです。

  <!-- ドットの線を引く -->
  <Line Stroke="DeepPink" StrokeDashCap="Triangle" StrokeDashArray="5" X1="60" Y1="140" X2="340" Y2="140" />

矩形の描画を行う

矩形を描画するには、Rectangleを使用します。塗り潰した矩形を表示する場合には、Fillプロパティに色を指定します。

  <!-- 矩形を描く -->
  <Rectangle Stroke="DeepPink" Margin="20,80" Width="200" Height="200" />

  <!-- 塗りつぶされた矩形を描く -->
  <Rectangle Fill="Purple" Margin="54,206,226,394" Width="200" Height="200" />

.NET Compact Frameworkでは、2ステップの段階を踏まないと実装できませんでした。枠つきの矩形もSilverlightでは簡単に描画ができます。以下のXAMLでは、Fillプロパティに黄色、Strokeプロパティに白色の矩形です。

  <!-- 塗りつぶして枠線を引く -->
  <Rectangle Fill="Yellow" Stroke="White" StrokeThickness="5" Margin="234,190,46,410" Width="200" Height="200" />

円の描画を行う

円を描画するには、Ellipseを使用します。Widthプロパティに表示する円の縦方向の直径、Heightプロパティに表示する円の横方向の直径を指定します。円を描くにはStrokeプロパティ、塗りつぶした円を描くのはFillプロパティに色を指定します。

  <!-- 円を描く -->
  <Ellipse Stroke="White" Margin="102,320,140,254" />
  
  <!-- 塗りつぶして円を描く -->
  <Ellipse Fill="Aquamarine" Width="300" Height="300" Margin="134,436,46,64" />

多角形の描画を行う

多角形を描画するには、Polygonを使用します。Pointsプロパティに各頂点の座標を指定すると多角形を表示します。

  <Polygon Fill="White" Width="300" Height="300" Points="150,0 0,300 300,300" />

Microsoft Expression Blend 4を使ってみる

先程、図形を描画するために書いていたXAMLは、Visual Studioのコードエディタ上からXAMLを編集して図形を表示していました。Silverlightは表現の豊かな美しいグラフィックで見る人を惹きつけます。

ただVisual Studio 2010 for Windows Phoneに備わっているデザイナでは力不足な部分があります。ユーザーインターフェースをデザインするツールMicrosoft Expression Blendを使うことでその力不足な部分を補うことが可能です。

またExpression Blend単体でもアプリケーションを開発することは可能です。ビヘイビア機能を使うことで、ユーザー操作に対応するアクション、アニメーションなどをコードを書かずにドラッグ＆ドロップだけで設定できます。

Microsoft Expression Blend 4のインストール

Windows Phone 7用開発ツールが発表された時点では、Beta版だったMicrosoft Expression Blend 4もRC（製品候補）版がリリースされました。インストールの仕方からご紹介したいと思います。

引き続き、Expression BlendでWindows Phoneアプリケーションを開発するためのアドインをインストールします。

Microsoft Expression Blend Add-in Preview for Windows Phoneのインストール

Expression Blend Add-in Preview for Windows Phoneをインストールします。インストールファイルは以下のURLからダウンロードすることができます。基本的にNextボタンを押下するだけですので、説明については割愛させて頂きます。

• http://www.microsoft.com/downloads/details.aspx?FamilyID=47f5c718-9dec-4557-9687-619c0fdd3d4f&displaylang=en

Microsoft Expression Blend Software Development Kit (SDK) Preview for Windows Phoneのインストール

Expression Blend SDK Preview for Windows Phoneをインストールします。Windows Phone向けのビヘイビアを開発することができます。

インストールファイルは以下のURLからダウンロードすることができます。基本的にNextボタンを押下するだけですので、説明については割愛させて頂きます。

• http://www.microsoft.com/downloads/details.aspx?FamilyID=86370108-4c14-42ee-8855-226e5dd9b85b&displaylang=en

Expression Blend 4を使って図形を描画する

Expression Blend 4を使っても図形を描画することができます。では早速インストールしたExpression Blend 4を起動しましょう。

簡単に図形が描けるのが判ると思います。

さいごに

Expression Blendにも、Intellisenseに対応したコードエディタも搭載されていますが、Visual Studioほど使い勝手が良くはありませんので、Windows Phone 7アプリケーション開発では、ロジックを書くのにVisual Studioを使用して、ユーザーインターフェースをデザインするのにExpressionを使うのが主流になるのではないかと考えています。

今回は以上で終わりです。ありがとうございました。