Windows Phoneアプリケーション開発入門

第13回 Windows Phone 7で図形を描こう!(2)

この記事を読むのに必要な時間:およそ 4 分

はじめに

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

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

「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に対して図形を配置することとします。

図1 Silverlight for Windows Phoneでの代表的なShapeオブジェクト

図1 Silverlight for Windows Phoneでの代表的なShapeオブジェクト

線の描画を行う

まずは線を引いてみましょう。線を引くには,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つです。

Flat直線の最後の点より先に延長しないキャップ
Round高さが線の太さと等しく,長さが線の太さの半分に等しい四角形
Square高さが線の太さと等しく,長さが線の太さの半分に等しい四角形
Triangle線の太さが底辺の長さに等しい直角二等辺三角形
  <!-- ドットの線を引く -->
  <Line Stroke="DeepPink" StrokeDashCap="Triangle" StrokeDashArray="5" X1="60" Y1="140" X2="340" Y2="140" />

図2 線の描画

図2 線の描画

矩形の描画を行う

矩形を描画するには,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" />

図3 矩形の描画

図3 矩形の描画

著者プロフィール

和田健司(わだけんじ)

1982年10月12日生まれ。大阪で働くプログラマ。Microsoft MVP for Device Application Development(Jul 2010 - Jun 2011)。Windows Mobileに傾倒し今に至る。Windows Mobile向けのTipsを書いています。iPhoneアプリ開発を始めました。嫌いな食べ物はカレー。

URL: http://ch3cooh.jp/
Blog: http://d.hatena.ne.jp/ch3cooh393/

コメント

コメントの記入