Windows Phone 7用のアプリケーションを最初から最後まで作成します。 パート4.新しいプロジェクトの作成、ページの追加

前の部分



アプリケーションのページのサムネイルを作成し、ナビゲーションパスを決定したら、Visual Studio 2010 Express for Windows Phoneでアプリケーションの作成を開始できます。



このパートでは、次のことを学習します。

• Visual Studioで新しいWindows Phoneプロジェクトを作成する方法。
• アプリケーションに新しいページを追加する方法。
• ページのプロパティを設定する方法。
• アプリケーションバーを追加する方法。
• アプリケーションパネルアイコンを追加する方法。

開始するには、新しいWindows Phoneプロジェクトを作成できます。 Visual Studioには、いくつかのプロジェクトテンプレートが含まれています。 Windows Phoneアプリケーションプロジェクトテンプレートは、すべてのWindows Phoneテンプレートの出発点であるため、最も一般的に使用されています。

新しいSilverlight for Windows Phoneプロジェクトを作成する

1. Windows Phone Developer Toolsがインストールされていることを確認してください。
2. Visual Studioで、新しいプロジェクトを作成します。
3. [ 新しいプロジェクト ]ダイアログボックスで、 [ Silverlight for Windows Phone ]を選択し、プロジェクトテンプレートを選択します。

プロジェクトを作成すると、ソリューションエクスプローラーは次の画像のようになります。







Silverlight for Windows Phoneプロジェクトには、次のファイルが含まれています。

プロジェクトファイル	説明
Appmanifest.xml	これは、アプリケーションパッケージの作成に必要なアプリケーションマニフェストファイルです。 原則として、このファイルを編集する必要はありません。
AssemblyInfo.cs	このファイルには、メタデータの名前やバージョンなどのアセンブリ情報が含まれています。
WMAppManifest.xml	これは、モバイルアプリケーションのメタデータを含むアプリケーションマニフェストファイルです。 このファイルは、主にWindows Phoneマーケットプレイスでアプリケーションを公開するプロセスで使用されます。
アプリファイル	これらのファイルは、アプリケーションレベルのロジックを決定するために使用されます。 ユーザーインターフェイスを表示するには、 Appクラスが必要です。
MainPage.xaml	これは、ユーザーインターフェイスの作成に使用される標準のスタートページファイルです。
MainPage.xaml.cs	この分離コードファイルには、標準の開始ページのロジックが含まれています。 MainPageクラスはPhoneApplicationPageから派生しています。
ApplicationIcon.png Background.png SplashScreenImage.jpg	デフォルトのアイコンと画像ファイルは、後で置き換えることができます。

新しいページを追加する

Windows Phoneアプリは、Silverlightページモデルに基づいており、ユーザーはさまざまなコンテンツを表示する画面間を移動できます。 アプリケーションの各画面を作成するには、原則として、個別のページが作成されます。



[ 新しいアイテムの追加 ]ダイアログボックスを使用して、プロジェクトにページを追加できます。







Visual Studioで新しいWindows Phoneアプリケーションプロジェクトを作成すると、 MainPageという標準の開始ページが自動的に作成されます。 このページは移動または名前変更できますが、変更する場合は、 WMAppManifest.xmlファイルのDefaultTask要素のNavigationPageプロパティも変更する必要があります。

ページプロパティの設定

デフォルトでは、ページにはアプリケーションの名前とページの名前があります。 ページタイトルは、ページのオプションのスクロール不可能なタイトルです。 これらの名前は、XAMLビューモードまたは[プロパティ]ウィンドウで変更できます。







タイトル情報を追加するには：

1. デザインモードで、アプリケーション名またはページ名を選択します。
2. XAMLビューモードまたは[プロパティ]ウィンドウで、Textプロパティを変更します。

インターフェース設計の推奨事項：

タイトルバーのアプリケーション名は大文字でなければなりません。 ページタイトルやリスト名など、アプリケーションの残りのテキストのほとんどにすべて小文字を使用します。

アプリケーションバーの追加

アプリケーションバーは、ページがスクロールされるか画面上のキーボードが表示されるかに関係なく、常に表示される一般的なタスクまたはナビゲーションツールを表示するのに適した場所です。 アプリケーションパネルでは、ApplicationBarIconButtonコントロールとApplicationBarMenuItemコントロールを使用できます。 最も一般的なタスクにはボタンを使用し、あまり一般的でないタスクやアイコンで明確に表現するのが難しいタスクにはメニューを使用する必要があります。 アプリケーションバーの4つのボタンと5〜5つのメニュー項目に制限されています。 次の画像は、展開された状態のアプリケーションバーの例を示しています。







インターフェース設計の推奨事項：

アプリケーションバーを使用して、一般的なアプリケーションタスクを実行します。 実行頻度の低いアクションをアプリケーションパネルメニューに配置します。



新しいページを作成すると、XAMLファイルにコメントセクションが自動的に含まれます。このセクションを使用して、アプリケーションパネルをすばやく追加できます。







アプリケーションパネルを追加するには：

1. XAMLビューモードで、アプリケーションバーセクションのコメントを解除します。
2. 必要に応じて、ボタン、メニュー項目、およびテキストを変更します。

次のXAMLコードは、Fuel Trackerアプリケーションの燃料補給ページにアプリケーションパネルを実装します。これは、アプリケーションのメインナビゲーションポイントとして機能します。 この例では、ボタンはC＃コードのClickイベントハンドラーに関連付けられています。 イベントハンドラーをクリックして、別のページにジャンプします。

< phone:PhoneApplicationPage.ApplicationBar > < shell:ApplicationBar IsVisible ="True" IsMenuEnabled ="True" > < shell:ApplicationBarIconButton IconUri ="/Images/fillup.png" Text ="add fill-up" Click ="FillupButton_Click" IsEnabled ="False" /> < shell:ApplicationBarIconButton IconUri ="/Images/car.png" Text ="add car" Click ="CarButton_Click" /> </ shell:ApplicationBar > </ phone:PhoneApplicationPage.ApplicationBar > * This source code was highlighted with Source Code Highlighter .

1. < phone:PhoneApplicationPage.ApplicationBar > < shell:ApplicationBar IsVisible ="True" IsMenuEnabled ="True" > < shell:ApplicationBarIconButton IconUri ="/Images/fillup.png" Text ="add fill-up" Click ="FillupButton_Click" IsEnabled ="False" /> < shell:ApplicationBarIconButton IconUri ="/Images/car.png" Text ="add car" Click ="CarButton_Click" /> </ shell:ApplicationBar > </ phone:PhoneApplicationPage.ApplicationBar > * This source code was highlighted with Source Code Highlighter .
   
   
   
   
2. < phone:PhoneApplicationPage.ApplicationBar > < shell:ApplicationBar IsVisible ="True" IsMenuEnabled ="True" > < shell:ApplicationBarIconButton IconUri ="/Images/fillup.png" Text ="add fill-up" Click ="FillupButton_Click" IsEnabled ="False" /> < shell:ApplicationBarIconButton IconUri ="/Images/car.png" Text ="add car" Click ="CarButton_Click" /> </ shell:ApplicationBar > </ phone:PhoneApplicationPage.ApplicationBar > * This source code was highlighted with Source Code Highlighter .
   
   
   
   
3. < phone:PhoneApplicationPage.ApplicationBar > < shell:ApplicationBar IsVisible ="True" IsMenuEnabled ="True" > < shell:ApplicationBarIconButton IconUri ="/Images/fillup.png" Text ="add fill-up" Click ="FillupButton_Click" IsEnabled ="False" /> < shell:ApplicationBarIconButton IconUri ="/Images/car.png" Text ="add car" Click ="CarButton_Click" /> </ shell:ApplicationBar > </ phone:PhoneApplicationPage.ApplicationBar > * This source code was highlighted with Source Code Highlighter .
   
   
   
   
4. < phone:PhoneApplicationPage.ApplicationBar > < shell:ApplicationBar IsVisible ="True" IsMenuEnabled ="True" > < shell:ApplicationBarIconButton IconUri ="/Images/fillup.png" Text ="add fill-up" Click ="FillupButton_Click" IsEnabled ="False" /> < shell:ApplicationBarIconButton IconUri ="/Images/car.png" Text ="add car" Click ="CarButton_Click" /> </ shell:ApplicationBar > </ phone:PhoneApplicationPage.ApplicationBar > * This source code was highlighted with Source Code Highlighter .
   
   
   
   
5. < phone:PhoneApplicationPage.ApplicationBar > < shell:ApplicationBar IsVisible ="True" IsMenuEnabled ="True" > < shell:ApplicationBarIconButton IconUri ="/Images/fillup.png" Text ="add fill-up" Click ="FillupButton_Click" IsEnabled ="False" /> < shell:ApplicationBarIconButton IconUri ="/Images/car.png" Text ="add car" Click ="CarButton_Click" /> </ shell:ApplicationBar > </ phone:PhoneApplicationPage.ApplicationBar > * This source code was highlighted with Source Code Highlighter .
   
   
   
   
6. < phone:PhoneApplicationPage.ApplicationBar > < shell:ApplicationBar IsVisible ="True" IsMenuEnabled ="True" > < shell:ApplicationBarIconButton IconUri ="/Images/fillup.png" Text ="add fill-up" Click ="FillupButton_Click" IsEnabled ="False" /> < shell:ApplicationBarIconButton IconUri ="/Images/car.png" Text ="add car" Click ="CarButton_Click" /> </ shell:ApplicationBar > </ phone:PhoneApplicationPage.ApplicationBar > * This source code was highlighted with Source Code Highlighter .
   
   
   
   
7. < phone:PhoneApplicationPage.ApplicationBar > < shell:ApplicationBar IsVisible ="True" IsMenuEnabled ="True" > < shell:ApplicationBarIconButton IconUri ="/Images/fillup.png" Text ="add fill-up" Click ="FillupButton_Click" IsEnabled ="False" /> < shell:ApplicationBarIconButton IconUri ="/Images/car.png" Text ="add car" Click ="CarButton_Click" /> </ shell:ApplicationBar > </ phone:PhoneApplicationPage.ApplicationBar > * This source code was highlighted with Source Code Highlighter .
   
   
   
   
8. < phone:PhoneApplicationPage.ApplicationBar > < shell:ApplicationBar IsVisible ="True" IsMenuEnabled ="True" > < shell:ApplicationBarIconButton IconUri ="/Images/fillup.png" Text ="add fill-up" Click ="FillupButton_Click" IsEnabled ="False" /> < shell:ApplicationBarIconButton IconUri ="/Images/car.png" Text ="add car" Click ="CarButton_Click" /> </ shell:ApplicationBar > </ phone:PhoneApplicationPage.ApplicationBar > * This source code was highlighted with Source Code Highlighter .
   
   
   
   

< phone:PhoneApplicationPage.ApplicationBar > < shell:ApplicationBar IsVisible ="True" IsMenuEnabled ="True" > < shell:ApplicationBarIconButton IconUri ="/Images/fillup.png" Text ="add fill-up" Click ="FillupButton_Click" IsEnabled ="False" /> < shell:ApplicationBarIconButton IconUri ="/Images/car.png" Text ="add car" Click ="CarButton_Click" /> </ shell:ApplicationBar > </ phone:PhoneApplicationPage.ApplicationBar > * This source code was highlighted with Source Code Highlighter .

ヒント：

アプリケーションパネルでは、追加したテキストは自動的に小文字で表示されます。

アプリケーションバーのアイコン

Windows Phone Developer Toolsと共にインストールされるいくつかのアプリケーションパネルアイコンがあります 。 これらのアイコンは、次のいずれかの場所にあります。

• 32ビットオペレーティングシステムの場合：C：\ Program Files \ Microsoft SDKs \ Windows Phone \ v7.0 \ Icons
• 64ビットオペレーティングシステムの場合：C：\ Program Files（x86）\ Microsoft SDKs \ Windows Phone \ v7.0 \ Icons

独自のアプリケーションpaneliアイコンを作成する必要がある場合、アイコンは次の要件を満たしている必要があります。

• サイズは48ピクセルx 48ピクセルです。
• 透明な背景に白いはずです。
• アプリケーションパネルに表示されるため、円の画像は含まれません。

以下は、Fuel Trackerアプリで使用されるアプリバーアイコンです。







以下は、アプリケーションバーのアイコンが暗いテーマと明るいテーマでどのように見えるかを示しています。







アプリケーションパネルアイコンを追加するには：

1. アイコンファイルをプロジェクトに追加し、 ビルドアクションをContentに設定します。
2. XAMLコードで、次のスニペットに示すように、ApplicationBarIconButton要素のIconUriプロパティを画像の相対URIに設定します。

1. < シェル：ApplicationBarIconButton IconUri = "/ Images / appbar.save.rest.png"
2. テキスト = "Save Car" クリック = "SaveButton_Click" />

*このソースコードは、 ソースコードハイライターで強調表示されました。

次の部分