次に、[ソリューション・エクスプローラー]内の「BiltShowImage.xaml」を展開して表示される、「BingMapsPage.xaml.vb」のコードを記述する。
ここではコードが長くなるため、一部省略している。全てのコードは、サンプルをダウンロードして「BingMapsPage.xaml.vb」ファイルで確認してほしい。
Protected Overrides Sub OnNavigatedTo(e As Navigation.NavigationEventArgs)
Dim myResult = DirectCast(e.Parameter, MapPosition)
Dim myLatitude = myResult.myLatitude
Dim myLongitude = myResult.myLogitude
Dim myAddress = myResult.myAddress
myMap.Center = New Location(CDbl(myLatitude), CDbl(myLongitude))
addressTextBox.Text = myAddress
Dim myEllipse As New Ellipse
With myEllipse
.Fill = New SolidColorBrush(Colors.Crimson)
.StrokeThickness = 3
.Stroke = New SolidColorBrush(Colors.Navy)
.Width = 30
.Height = 30
End With
Dim myStackPanel As New StackPanel
myStackPanel.Margin = New Thickness(5)
myStackPanel.Background = New SolidColorBrush(Colors.Navy)
myStackPanel.Visibility = Xaml.Visibility.Collapsed
Dim myTextBlock As New TextBlock
myTextBlock.Foreground = New SolidColorBrush(Colors.Red)
myTextBlock.FontSize = 24
myTextBlock.Text = myAddress
myStackPanel.Children.Add(myTextBlock)
Dim myLocation As Location
myLocation = New Location(CDbl(myLatitude), CDbl(myLongitude))
MapLayer.SetPosition(myEllipse, myLocation)
myMap.Children.Add(myEllipse)
myMap.SetView(myLocation, 12)
MapLayer.SetPosition(myStackPanel, New Location(CDbl(myLatitude), CDbl(myLongitude)))
myMap.Children.Add(myStackPanel)
AddHandler myEllipse.Tapped, Sub()
myStackPanel.Visibility = Xaml.Visibility.Visible
End Sub
AddHandler myStackPanel.Tapped, Sub()
myStackPanel.Visibility = Xaml.Visibility.Collapsed
End Sub
End Sub
End Class
MainMageから送られた値(e.Parameter)をMapPosition構造体に変換し、myResultで参照する。
myLatitude変数に構造体のmyLatitudeの値(緯度)を格納する。myLongitude変数に構造体のmyLongitudeの値(経度)を格納する。myAddress変数に構造体のmyAddressの値(住所)を格納する。
MapのCenterプロパティにDouble型に変換したmyLatitudeとmyLongitudeの値を指定する。addressTextBoxに住所を表示する。
新しいEllipseのインスタンスmyEllipseオブジェクトを作成する。FillプロパティにCrimsonを指定し、Crimson色で塗りつぶす。枠線の太さを3に指定し、枠線の色をNavyに指定する。WidthとHeightは「30」とする。直径30pxの円が描かれる。
新しいStackPanelのインスタンスmyStackpanelオブジェクトを作成する。Marginプロパティに「5」を指定して余白を設ける。背景色にNavyを指定する。初期状態ではmyStackPanelオブジェクトを非表示としておく。
次に、TextBlockの新しいインスタンスmyTextBlockオブジェクトを作成する。文字色をRedに指定する。文字サイズは24、TextプロパティにはmyAddress変数の値を指定する。myStackPanelオブジェクトにmyTextBlockオブジェクトを追加する。
myLatitudeとmyLongitudeで初期化された、新しいLocationのオブジェクト、myLocationを作成する。
MapLayerクラスのSetPositionメソッドで、マップレイヤ内に要素の位置を設定する。この場合、myLatitudeとmyLongitudeの位置に円をセットする。MapLayerクラスは、地図上の要素の位置を保持しているマップレイヤを表すクラスだ。MapにAddメソッドでmyEllipseオブジェクトを追加する。SetViewメソッドで、その住所の位置をズームインして表示させる。
同様に、MapLayerクラスのSetPositionメソッドで、マップレイヤ内に要素の位置を設定する。この場合、myLatitudeとmyLongitudeの位置にStackPanelをセットする。MapにAddメソッドでmyStackPanelオブジェクトを追加する。
円がタップされた時は、myStackPanelオブジェクトを表示する。住所の書かれたTextBlockが表示される。myStackPanelオブジェクトがタップされた時は、myStackPanelオブジェクトを非表示にする。住所の表示されたTextBlockも非表示になる。
今回はここまでだ。また次回の記事でお会いしよう。次回は、選択した画像をトリミングして保存させる方法を紹介する。
PROJECT KySS 薬師寺 国安(やくしじ くにやす)
1950年生まれ。フリーVBプログラマ。高級婦人服メーカーの事務職に在職中、趣味でVBやActiveXに取り組み、記事を執筆。2003年よりフリー。.NETやRIAに関する執筆多数。Windowsストアアプリも多数公開中(約270本)。
Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。
Microsoft MVP for Development Platforms - Windows Phone Development(Oct 2012-Sep 2013)。
Microsoft MVP for Development Platforms - Client Development(Oct 2013-Sep 2014)。
PROJECT KySSは、1997年に薬師寺聖と結成したコラボレーション・ユニット
Bing Mapsを使ってみよう(前編):Microsoftの地図サービス、Bing Mapsを使おう
今でしょ! の終わりに安齋、家入らが評価したアプリとは〜「エイっと作ろう! Windowsストア アプリ選手権」授賞式レポート
初のアジャイル/リモート開発体制でも成功できた秘訣とは〜「Windowsタブレット向けアプリ開発」先駆けインタビュー
PC制御UIの最先端Leapアプリ開発入門(3):ProcessingやWindows 8.1アプリでLeapの空間ジェスチャを使うには
Web開発者が手っ取り早くストアデビューする方法(1):Windowsストアにアプリを登録するための事前準備
連載:Windowsストア・アプリ開発入門:第1回 Windowsストア・アプリってどんなもの?
特集:次期Windows 8.1&Visual Studio 2013 Preview概説(前編):大きく変わるWindowsストア・アプリ開発 〜 ビュー状態に関連する変更点
UXClip(11):これからが本番、Windows 8アプリ開発
Windows 8提供開始、対応アプリ登場は期待できるか?Copyright © ITmedia, Inc. All Rights Reserved.