はじめに
前回は、
……その前に、
「Visual Studio 2010の製品版に対応」
Shapeオブジェクトを使用して図形を描画
図形を描画するためのプロジェクトを作成します。Visual StudioのStart Pageから
<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要素のひとつで、
![図1 Silverlight for Windows Phoneでの代表的なShapeオブジェクト 図1 Silverlight for Windows Phoneでの代表的なShapeオブジェクト](/assets/images/dev/serial/01/windows-phone/0013/thumb/TH800_001.png)
線の描画を行う
まずは線を引いてみましょう。線を引くには、
<!-- 直線を引く -->
<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 線の描画](/assets/images/dev/serial/01/windows-phone/0013/thumb/TH250_002.png)
矩形の描画を行う
矩形を描画するには、
<!-- 矩形を描く -->
<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では、
<!-- 塗りつぶして枠線を引く -->
<Rectangle Fill="Yellow" Stroke="White" StrokeThickness="5" Margin="234,190,46,410" Width="200" Height="200" />
![図3 矩形の描画 図3 矩形の描画](/assets/images/dev/serial/01/windows-phone/0013/thumb/TH250_003.png)
円の描画を行う
円を描画するには、
<!-- 円を描く -->
<Ellipse Stroke="White" Margin="102,320,140,254" />
<!-- 塗りつぶして円を描く -->
<Ellipse Fill="Aquamarine" Width="300" Height="300" Margin="134,436,46,64" />
![図4 円の描画 図4 円の描画](/assets/images/dev/serial/01/windows-phone/0013/thumb/TH250_004.png)
多角形の描画を行う
多角形を描画するには、
<Polygon Fill="White" Width="300" Height="300" Points="150,0 0,300 300,300" />
![図5 三角形の描画 図5 三角形の描画](/assets/images/dev/serial/01/windows-phone/0013/thumb/TH250_005.png)
Microsoft Expression Blend 4を使ってみる
先程、
ただVisual Studio 2010 for Windows Phoneに備わっているデザイナでは力不足な部分があります。ユーザーインターフェースをデザインするツールMicrosoft Expression Blendを使うことでその力不足な部分を補うことが可能です。
またExpression Blend単体でもアプリケーションを開発することは可能です。ビヘイビア機能を使うことで、
Microsoft Expression Blend 4のインストール
Windows Phone 7用開発ツールが発表された時点では、
![図6 ソフトウェアライセンスに読んだらAcceptボタンを押下します。 図6 ソフトウェアライセンスに読んだらAcceptボタンを押下します。](/assets/images/dev/serial/01/windows-phone/0013/thumb/TH800_006.png)
![図7 プロダクトキーを入力します。hereと書かれたリンクテキストをクリックするとブラウザが開きます。 図7 プロダクトキーを入力します。hereと書かれたリンクテキストをクリックするとブラウザが開きます。](/assets/images/dev/serial/01/windows-phone/0013/thumb/TH800_007.png)
![図8 Expression Studioのトライアル用のプロダクトキーが取得出来ます。キーワードを入力してください。 図8 Expression Studioのトライアル用のプロダクトキーが取得出来ます。キーワードを入力してください。](/assets/images/dev/serial/01/windows-phone/0013/thumb/TH800_008.png)
![図9 正しいキーワードが入力出来たらトライアル用プロダクトキーが表示されます。このキーを先ほどのテキストボックスに入力します。 図9 正しいキーワードが入力出来たらトライアル用プロダクトキーが表示されます。このキーを先ほどのテキストボックスに入力します。](/assets/images/dev/serial/01/windows-phone/0013/thumb/TH800_009.png)
![図10 キーが無事認証されたら、Nextボタンを押下しましょう。 図10 キーが無事認証されたら、Nextボタンを押下しましょう。](/assets/images/dev/serial/01/windows-phone/0013/thumb/TH800_010.png)
![図11 しかしここでトラブルが発生しました。Expression Blend 3 SDKがインストールされていると競合してExpression Blend 4をインストールすることができません。 図11 しかしここでトラブルが発生しました。Expression Blend 3 SDKがインストールされていると競合してExpression Blend 4をインストールすることができません。](/assets/images/dev/serial/01/windows-phone/0013/thumb/TH800_011.png)
![図12 コントロールパネルからExpression Blend 3 SDKをアンインストールします。 図12 コントロールパネルからExpression Blend 3 SDKをアンインストールします。](/assets/images/dev/serial/01/windows-phone/0013/thumb/TH800_012.png)
![図13 競合が解決されました。Installボタンを押下してください。インストールを開始します。 図13 競合が解決されました。Installボタンを押下してください。インストールを開始します。](/assets/images/dev/serial/01/windows-phone/0013/thumb/TH800_013.png)
![図14 これでExpression Blendのインストールは完了です。お疲れ様でした。 図14 これでExpression Blendのインストールは完了です。お疲れ様でした。](/assets/images/dev/serial/01/windows-phone/0013/thumb/TH800_014.png)
引き続き、
Microsoft Expression Blend Add-in Preview for Windows Phoneのインストール
Expression Blend Add-in Preview for Windows Phoneをインストールします。インストールファイルは以下のURLからダウンロードすることができます。基本的にNextボタンを押下するだけですので、
![図15 Expression Blend Add-in Preview for Windows Phoneのインストール画面 図15 Expression Blend Add-in Preview for Windows Phoneのインストール画面](/assets/images/dev/serial/01/windows-phone/0013/thumb/TH800_015.png)
Microsoft Expression Blend Software Development Kit (SDK) Preview for Windows Phoneのインストール
Expression Blend SDK Preview for Windows Phoneをインストールします。Windows Phone向けのビヘイビアを開発することができます。
インストールファイルは以下のURLからダウンロードすることができます。基本的にNextボタンを押下するだけですので、
![図16 Expression Blend SDK Preview for Windows Phoneのインストール画面 図16 Expression Blend SDK Preview for Windows Phoneのインストール画面](/assets/images/dev/serial/01/windows-phone/0013/thumb/TH800_016.png)
Expression Blend 4を使って図形を描画する
Expression Blend 4を使っても図形を描画することができます。では早速インストールしたExpression Blend 4を起動しましょう。
![図17 ProjectsタブのNew Project...を選択します 図17 ProjectsタブのNew Project...を選択します](/assets/images/dev/serial/01/windows-phone/0013/thumb/TH300_017.png)
![図18 Windows Phone Applicationを選択します 図18 Windows Phone Applicationを選択します](/assets/images/dev/serial/01/windows-phone/0013/thumb/TH800_018.png)
![図19 アセットからシェイプをドラッグ&ドロップします 図19 アセットからシェイプをドラッグ&ドロップします](/assets/images/dev/serial/01/windows-phone/0013/thumb/TH800_019.png)
![図20 グリッドに円が配置されます 図20 グリッドに円が配置されます](/assets/images/dev/serial/01/windows-phone/0013/thumb/TH800_020.png)
簡単に図形が描けるのが判ると思います。
さいごに
Expression Blendにも、
今回は以上で終わりです。ありがとうございました。