Windows Phoneには、実機が向いている方角を測るコンパス、自分がいる位置を知ることができるGPS、実機の加速度を検知する加速度計などのセンサーがついています。ここでは、カメラとこれらのセンサーを組み合わせたアプリケーションを作ってみましょう。
カメラ画像に方角と地図を表示する
このアプリケーションでは、画面の上半分のカメラ画像に方角を表す文字を重ね、さらに下半分に地図を表示させます（図1）。画面の上半分は、Windows Phoneのカメラが写している画像をリアルタイムに表示させています。さらに、画像に重ねて、実機（の背面のカメラ）が向いている方角を東西南北の文字で表示しています。ちょっとわかりにくいかもしれませんが、文字は実機の傾きに合わせて、擬似3次元的に傾けています。
下半分の画像には、今いる場所の地図を表示します。地図は、実機が向いている方角に合わせて回転します。例えば、実機が南を向いていれば、南を上にして表示する、といった具合です。
プロジェクトを作成する
アプリケーションの開発を始めましょう。開発ツールは、Windows Phone SDK 7.1と一緒にインストールされた「Visual Studio 2010 Express for Windows Phone」を利用します。Windows Phoneアプリケーションのプラットフォームには、Silverlight for Windows PhoneとXNA Frameworkの2種類が用意されていますが、ここではSilverlightを使うことにしましょう。
Windowsのスタートメニューで「Visual Studio 2010 Express for Windows Phone」を選んでツールを起動します。統合開発環境（IDE）の画面が開いたら、メニューから「ファイル」→「新しいプロジェクト」を選択してダイアログを開きます。開発言語は「Visual C#」、テンプレートは「Silverlight for Windows Phone」の「Windows Phoneアプリケーション」を選択します。「名前」の欄に適当な名前を入力して「OK」を押すとターゲットとするOSを選択するダイアログが表示されますので、Windows Phone 7.1を選びます＊1。
画面を設計する
アプリケーションのプロジェクトが作成されると、IDEの画面が現れます（図2）。画面の中央ウィンドウ左側にはアプリケーションの画面をデザインする画面（以降、デザイン画面）、右側にはアプリケーション画面のデザインに対応する「XAML（ザムル）」と呼ばれるXMLベースのマークアップ言語のコードが表示されます。
今回はアプリケーションの画面をなるべく広く使いたいので、画面に表示されている「マイアプリケーション」と「ページ名」という部分を削除してしまいましょう。デザインの画面で削除することもできますが、XAMLのコードでまとめて削除する方が簡単です。
XAMLのコードの画面を大きめに表示し（図3）、Gridタグの内側にある、背景色が青い個所のコードをすべて削除してください。デザイン画面からマイアプリケーションとページ名という文字が消えてすっきりしましたね（図4）。次に、カメラで撮影した画像を表示する部分を作りましょう。
先ほどXAMLのコードを削除した個所に、リスト1のコードを挿入します。これは、高さ（Height）480、幅（Width）480の矩形（Rectangle）を画面上部に配置し、その矩形にカメラの画像を表示するコードです。Rectangleタグで矩形を配置し、Rectangle.FillタグとVideoBrushタグを組み合わせて、矩形の内側にカメラの画像を表示させています。
矩形などの図形は、その中の領域をブラシで塗りつぶすことができます。ブラシでは、赤や青など単色で領域を塗りつぶしたり、グラデーションを描いたりするほか、画像やカメラに写った動画を表示させることができます。
