はじめに

RTWのリリース後、今までWindows Phone 7アプリケーションはC#でしか開発ができませんでしたが、VB.NET開発者向けに「Microsoft Visual Basic CTP for Windows Phone Developer Tools」が9月23日にリリースされています。

• http://www.microsoft.com/downloads/en/details.aspx?FamilyID=a808a69d-6119-47b7-b858-262be5c49915&displaylang=en

Windows Mobile 6.5でVB.NETを使っていた方々にも、Windows Phone 7アプリケーション開発へ参入していけるのではないかと思っています。まだCTP版ということでMarketplaceへは登録ができないようです。ただC#のRTWと環境的には変わりありませんので、アドインの完成までにVB.NETでアプリケーションを作っておくのもよいかもしれませんね。

RTWからの新しいコントロール「Bing Maps」

さて、Windows Phone Develop Tools RTWから標準コントロールとして、Bing Maps Contorlが追加されました。今回はBing Maps Controlを使って少し遊んでみましょう。

実際にVisual Studio上からの操作に入る前に、MapコントロールにBing Maps Keyを設定しておかないと、アプリケーションの実行時に以下のスクリーンショットのようにエラーが表示されてしまいます。

Bing Maps Keyを取得する

Bing Mapsの利用にはKeyが必要になりますので、Bing Maps Account Centerより取得しましょう。Windows Live IDをお持ちの方は、オレンジ色のボタン「Sign in」をクリックしてください。Windows Live IDをお持ちでない方は「Create」を選択してください。

必要事項を明記のうえ、Mapsアカウントを作成します。

アカウントの作成が問題なく完了すると、アカウントの詳細情報が書かれた画面へ遷移しますが、ここでは特に必要な情報はありません。

左端にあるメニューの中から「Create or view keys」を探してください。Bing Maps Keyの発行を行いましょう。

過去にBing Maps Keyを発行したアプリについても情報が記載されています。今回は新しくKeyを作成しましょう。「⁠Application name」「⁠Application URL」「⁠Application Type」の欄を記入し、右下の「Create key」をクリックしてください。

こちらもキーの作成が問題なく完了すると、同じ画面の下の方にBing Maps Keyが表示されます。のちほどこのKeyを使います。

Bing Maps Sampleアプリを作ってみよう

ツールバーの［File⁠］⁠→［⁠New Project］を選択します。Mapコントロールで遊ぶだけですので、Windows Phone Applicationを選択しましょう。名前は適当に「Bing Maps Sample」と付けましょう。

ToolboxからMapコントロールを選び、ドラッグアンドドロップでMainPageに配置してください。以下のようなXAMLになっているかと思います。

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <my:Map Height="596" HorizontalAlignment="Left" 
            Margin="0,6,0,0" Name="map1" 
            VerticalAlignment="Top" Width="450" />
</Grid>

CredentialsProviderプロパティに先ほど取得したBing Maps Keyを入れてください。

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <my:Map Height="596" HorizontalAlignment="Left" 
            Margin="0,6,0,0" Name="map1" 
            VerticalAlignment="Top" Width="450" 
            CredentialsProvider="【Bing Maps Keyを入れる】" />
</Grid>

さてアプリを実行してみましょう。エラーが消えているのが確認できましたでしょうか。

位置座標を設定して表示する

大阪駅を中心に表示させてみましょう。大阪駅の位置は大ざっぱですが、34.701189, 135.496016辺りになります。一番簡単なのはプロパティウィンドウで設定を行うことです。

コードから動的に場所を変更したい場合は、上記と同じくCenterプロパティに位置座標を設定してください。MainPage.xamlにSystem.Device.Location名前空間をusing宣言しておきます。

// for location
using System.Device.Location;

マップのLoadedイベントで、位置情報をCenterプロパティに設定します。

private void map1_Loaded(object sender, RoutedEventArgs e)
{
    map1.Center = new GeoCoordinate(34.701189, 135.496016);
}

航空写真モードで表示する

Mapコントロールに対する操作を行うため、コメントアウトされているApplicationBarIconButtonを有効にします。

一つ目のIconButtonでは地図の表示モードを「地図」表示に、二つ目ののIconButtonでは、「⁠写真」表示で切り替えをします。

<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
          <shell:ApplicationBarIconButton 
            IconUri="/Images/icon.png" 
            Click="btnRoadMode_Click" Text="地図" />
          <shell:ApplicationBarIconButton 
            IconUri="/Images/icon.png" 
            Click="btnAerialMode_Click" Text="写真" />
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

ソースコードのほうに、btnAerialMode_ClickメソッドとbtnRoadMode_Clickメソッドを作ります。btnChangeMode_Clickメソッドは、地図の表示モードを切り替えるにはModeプロパティにインスタンスを設定します。

表示モードを地図にするにはRoadModeのインスタンスを設定します。

private void btnRoadMode_Click(object sender, EventArgs e)
{
    map1.Mode = new Microsoft.Phone.Controls.Maps.RoadMode();
}

航空写真で表示するには、AerialModeのインスタンスを設定します。

private void btnAerialMode_Click(object sender, EventArgs e)
{
    map1.Mode = new Microsoft.Phone.Controls.Maps.AerialMode();
}

さいごに

Bing Mapsコントロールを使って、Windows Phone 7で地図を表示するのはいかがでしたでしょうか。まだWindows Phone 7自体が日本で発売される予定がないためか、路地レベルの地図には対応していないようでした。この辺りは今後のアップデートに期待したいですね。

次回は、引き続きBing Mapsコントロールを活用したTipsをご紹介します。よりWindows Phone 7らしいセンサーを使った地図の活用もご紹介していけたらと思います。

以上で今回は終わりです。ありがとうございました。