特集：Windows Phone “Mango”開発入門 たった30分で完成。初めてのWindows Phone 7.5アプリ開発 青柳 臣一 2011/09/27
Page1 Page2 Page3

■初めてのWindows Phone 7.5アプリケーション開発

●ブロジェクトの作成

　さて、少々前置きが長くなったが、実際にWindows Phone SDKを用いてアプリケーションを作ってみよう。ここでは画像の表示、保存を行うちょっとしたアプリケーションを作ってみたい。もちろん、Windows Phone SDKに付属のエミュレータでも実行可能だ。

　まずはVisual Studio 2010 Express for Windows Phoneを起動し、（メニューバーの）［ファイル］メニューの［新しいプロジェクト］から新規プロジェクトを作成しよう。以下のように、（C#やVisual Basic向けに）いくつかのテンプレートが用意されている。ここでは最も標準的な「Windows Phone アプリケーション」を選択すればよい。

Visual Studio 2010 Express for Windows Phoneのプロジェクト・テンプレート

　テンプレートからプロジェクトを作成しようとすると、次の画面のように、対象とするWindows Phone OSのバージョンを聞かれる。

対象とするWindows Phone OSのバージョンを指定する

このダイアログで対象を「7.0」とするか「7.1」とするかを指定できる。

　Windows Phone OS 7.1がWindows Phone 7.5、Windows Phone OS 7.0がWindows Phone 7だ。対象が7.0の場合は「7.0」「7.1」の両方で実行可能だ。対象が7.1の場合は7.1専用となり7.0で実行することはできない。しかし7.1で追加された多くの機能を使うことができる。7.0、7.1どちらを選択するかはアプリケーションの性質に応じて決めることになる。ここでは「7.1」を選択する。

　なお、7.0用のプロジェクトを後から7.1にアップグレードすることは簡単にできる。プロジェクトのプロパティにある［対象のWindows Phone OSのバージョン］を「7.1」に変更するだけだ。ただし、7.1から7.0へのダウングレードはサポートされないので必要であれば手作業で行うことになる。

　プロジェクトを新規作成すると、以下のような画面が表示される。このようにVisual StudioのUIデザイナ（＝［デザイン］ビュー）にはWindows Phoneの外観が表示され、ドラッグ＆ドロップなどのマウス操作でデザインすることができる。もちろん、XAMLコードを直接変更することも可能だ。UIデザイナの使用方法やXAMLコードの記述方法は、基本的にWPFやSilverlightと同じだ。WPFやSilverlightの経験があるデベロッパーにとっては、ほぼ違和感なく使用できるのではないかと思う。

UIデザイナ（＝［デザイン］ビュー）とXAMLエディタ（＝［XAML］ビュー）

●横向き対応にする

　Windows Phoneの画面解像度は480×800と決められているが、縦向きに使われることも横向きに使われることもあり得る。アプリケーションの用途によっては「向き固定」とすることも可能だが、できるだけ、どの向きでも使えるようにしておきたいところだ。当然、向きを変えればそれに応じて画面デザインも変わるようにする必要がある。といっても、Silverlightの持つ柔軟なレイアウト機能のおかげでとても簡単に対応できる。

　では、デフォルトでは縦向き専用となっているので横向きにも対応してみよう。

　まずPhoneApplicationPage（＝MainPange.xmlファイルのルート要素）のSupportedOrientationsプロパティを変更する（次の画面を参照）。これが「Portrait」となっていると「縦向き固定レイアウト」となる。これを「PortraitOrLandscape」に変更し、「縦横対応」としよう。

SupportedOrientationsプロパティ

現在のページがサポートする向きを、「縦向きのみ（Portrait）」「横向きのみ（Landscape）」「縦横両方（PortraitOrLandscape）」から選択する。

　PhoneApplicationPageのOrientationプロパティを変更すればUIデザイナ上でいろいろな向きのデザインを確認しながら編集することができる。

Orientationプロパティ

UIデザイナ上での表示向きを指定する。

UIデザイナでの横向き表示

Orientationプロパティを指定すればUIデザイナ上で横向き表示することも可能だ。

　見ていただくと分かるとおり、テンプレートで作られた「マイ アプリケーション」や「ページ名」といったTextBlockコントロールは横向きの場合にはきちんと横幅いっぱいに広がるようになっている。これはWidth（横幅）を定数で指定せずにMargin（余白）で親パネルに対しての大きさを指定しているからだ。自分でコントロールを配置していくときにもこのように向きが変わっても対応できるように注意しよう。

　特にUIデザイナ上でマウス操作によって幅や高さを調整すると自動的にWidthやHeightに定数が記述されてしまう。こうなると大きさが固定されてしまい、向きが変わったときに画面からはみ出したり無駄な余白ができたりしてしまうことになる。プロパティ・ウィンドウやXAMLを編集してうまく調整しよう。

●ページ・デザイン

　今回のアプリケーションでは以下のようなページを作成する。まず、テンプレートで作られた「ページ名」は削除した。今回は単一ページのアプリケーションなのでわざわざページ名を表示する必要はないからだ。続いて各コントロールを配置していく。この内容については以下の画像とXAMLコードを参照してほしい。

ページ・デザイン

各コントロールの配置やプロパティ設定は下記のとおり。後述のXAMLコードをコピー＆ペーストしてもよい。

以下のとを配置するためのGridコントロール（※親要素もGridコントロールなので入れ子になる）。名称は「ImagePanel」としてある。UIデザイナで、［ツールボックス］から「Grid」を（「ContentPanel」という名前の<Grid>要素の上に）ドラッグ＆ドロップし、作成された新しい<Grid>要素（＝ImagePanelコントロール）の右クリック・メニューから［レイアウトのリセット］−［すべて］を実行して、Height／WidthプロパティやMarginプロパティを削除しておく。 さらに、ImagePanelコントロールの親コントロールであるContentPanelコントロールを選択したうえで、UIデザイナ上で該当要素の右クリック・メニューから［グリッド行］−［後ろへ挿入］を実行する。これにより、2行1列のグリッドが作成される。   画像を表示するためのImageコントロール。名称は「image1」。ImagePanelコントロールの1行目に追加して、先ほどと同様に［レイアウトのリセット］−［すべて］を行い、Stretchプロパティに「UniformToFill」を設定する。   「コメント」というテキストを表示するTextBlockコントロール。名称は「textBlock1」。ImagePanelコントロールの1行目に追加して、先ほどと同様に［レイアウトのリセット］−［すべて］を行い、HorizontalAlignmentプロパティに「Center」を、VerticalAlignmentプロパティに「Center」を、Foregroundプロパティに「Red」を、FontWeightプロパティに「Bold」を（＝［B］ボタンをクリック）、FontSizeプロパティに「48」を、Textプロパティに「」（＝空文字）を設定する。 さらに、RenderTransformプロパティを使用して30度傾けてみた。具体的には、［XAML］ビューで<TextBlock>要素内のコンテンツとして、「<TextBlock.RenderTransform><RotateTransform Angle="-30"/></TextBlock.RenderTransform>」というコードを手動で追記した。   コメントを入力するためのTextBoxコントロール。名称は「TextBox1」。このコントロールは、ImagePanelコントロールとは別のGridコントロールに追加することにしよう。 ImagePanelコントロールの2行目にGridコントロールを［ツールボックス］からドラッグ＆ドロップし、作成された要素の右クリック・メニューから［レイアウトのリセット］−［すべて］を実行し、さらに［グリッド例］−［後ろへ挿入］を実行する。 その<Grid>要素の1列目の上に、（［コメント］という入力欄用のラベルとなる）TextBlockコントロールを追加して、［レイアウトのリセット］−［すべて］を行い、VerticalAlignmentプロパティに「Center」を、Textプロパティに「コメント」を設定する。この<Grid>要素の1列目は［Width］プロパティは「Auto」とし、ついでに2列目は［Width］プロパティは「*」（スター）にする。 そして、<Grid>要素の2列目の上に目的のTextBoxコントロールを追加して、［レイアウトのリセット］−［すべて］を行い、Textプロパティに「」（＝空文字）を設定する。最後に、前述のContentPanelコントロールを選択して、その2行目の［Height］プロパティを「Auto」にする。

　以上のようにコントロールを配置してプロパティを設定すると、該当部分のXAMLコードは以下のようになる。

……省略…… <!--TitlePanel は、アプリケーション名とページ タイトルを格納します--> <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">   <TextBlock x:Name="ApplicationTitle" Text="サンプルアプリケーション" Style="{StaticResource PhoneTextNormalStyle}"/> </StackPanel> <!--ContentPanel - 追加コンテンツをここに入力します--> <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">   <Grid.RowDefinitions>     <RowDefinition Height="*"/>     <RowDefinition Height="Auto"/>   </Grid.RowDefinitions>   <Grid x:Name="ImagePanel" Grid.Row="0">     <Image x:Name="image1" Stretch="UniformToFill" />     <TextBlock x:Name="textBlock1"            HorizontalAlignment="Center" VerticalAlignment="Center"            Foreground="Red" FontWeight="Bold" FontSize="48" Text="">       <TextBlock.RenderTransform>         <RotateTransform Angle="-30"/>       </TextBlock.RenderTransform>     </TextBlock>   </Grid>   <Grid Grid.Row="1">     <Grid.ColumnDefinitions>       <ColumnDefinition Width="Auto"/>       <ColumnDefinition Width="*"/>     </Grid.ColumnDefinitions>     <TextBlock Grid.Column="0" Text="コメント" VerticalAlignment="Center"/>     <TextBox x:Name="textBox1" Grid.Column="1"/>   </Grid> </Grid> ……省略……

ページ・デザインのXAMLコード

●実行してみよう

　まだページ・デザインをしただけで何の機能もない状態ではあるが、実行してみることはできる。［デバッグ］メニューの［デバッグ開始］、もしくは、F5キーで実行開始だ。ただ、その前にメニューバーのすぐ下にあるコンボボックスを確認してほしい。ここでエミュレータで実行するのか、PCに接続しているWindows Phone端末で実行するかを選択することができる。もちろん実機で実行するには開発者アンロックが必要だ。

実行対象の選択

Windows Phone DeviceとすればPCに接続している端末で実行開始となり、Windows Phone Emulatorを選択するとエミュレータで実行開始する。(JA)はエミュレータが日本語版であることを示している。

　以下がエミュレータで実行してみた例だ。

エミュレータでの実行例

各番号の項目については後述の本文を参考にしてほしい。

　のところに表示されているのはフレームレートなどの情報だ。デザインの確認などでこれが邪魔となる場合は、App.xaml.cs／App.xaml.vbファイルの以下の1行をコメントアウトしてしまうか、「false」とすれば非表示にできる。

// 現在のフレーム レート カウンターを表示します。 Application.Current.Host.Settings.EnableFrameRateCounter = true; ' 現在のフレーム レート カウンターを表示します。 Application.Current.Host.Settings.EnableFrameRateCounter = True

フレームレート情報を非表示にする場合にコメントアウトするコード（上：App.xaml.cs、下：App.xaml.vb）

　また、エミュレータの右上の方にマウスを持って行くとが表示される。ここでエミュレータの表示サイズや縦向き横向きの指定ができる。

　次のページで、さらに作り込んでいこう。

INDEX
	[特集] Windows Phone “Mango”開発入門
	たった30分で完成。初めてのWindows Phone 7.5アプリ開発
	1．Windows Phoneとは？／無料でそろう開発環境
	2．ブロジェクトの作成／横向き対応／ページ・デザイン／実行
	3．アプリケーションバー／画像を開く／コメント表示／画像保存／画像読み込み

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）