Windows Phone で MapControl を使う (その 3)

地図ネタ 3 日目、MapContorol にコントロールを表示させます。

表示させるコントロールを作る

ViewModel を作る

今日も ViewModel から作ります。

と言ってもあまり表示させたい項目もないので名前と座標、あと表示用の座標くらいにしておきます。

public class MapItemPanelViewModel : BindableBase
{
    private string   _name;
    private Geopoint _location;

    public string Name
    {
        get { return _name; }
        set { SetProperty(ref _name, value); }
    }

    public Geopoint Location
    {
        get { return _location; }
        set { SetProperty(ref _location, value); }
    }

    public string Point
    {
        get { return string.Format("({0:f4},{1:f4})", 
            Location.Position.Longitude, Location.Position.Latitude); }
    }
}

View を作る

これを表示するための View としてユーザーコントロールを作ってみました。

f:id:kazuakix:20141223231103j:plain

今回はシンプルに Grid の中に TextBlock を 2 つ置いただけです。

MapControl に表示させる

ViewModel の修正

昨日の MainPageViewModel に MapItemPanelViewModel のリストを追加します。

public ObservableCollection<MapItemPanelViewModel> Pins { get; set; }

MapContorol の修正

MapItemsContorol の ItemsSource に上記のリストを指定します。また、DataTemplate に最初に作ったユーザーコントロールを指定し、それぞれに座標を指定してやることで地図上に表示することができます。

<Maps:MapControl MapServiceToken="{StaticResource MapServiceToken}">
    <Maps:MapItemsControl ItemsSource="{Binding Pins}">
        <Maps:MapItemsControl.ItemTemplate>
            <DataTemplate>
                <local:MapItemPanel 
                    Maps:MapControl.Location="{Binding Location}" />
            </DataTemplate>
        </Maps:MapItemsControl.ItemTemplate>
    </Maps:MapItemsControl>
</Maps:MapControl>

尚、Blend とかでテンプレートの編集ができると思ったのですがうまくいかなかったので直接 XAML を書いていきました。

データについても手を抜いてコードで追加しています。

public MainPageViewModel()
{
    Pins = new ObservableCollection<MapItemPanelViewModel>
    {
        new MapItemPanelViewModel
        {
            Name     = "od_10z",
            Location = new Geopoint(
                new BasicGeoposition
                {
                    Longitude = -155.2965,
                    Latitude  =   19.4221
                })
        },
        new MapItemPanelViewModel
        {
            Name     = "kazuakix",
            Location = new Geopoint(
                new BasicGeoposition
                {
                    Longitude = -155.2934,
                    Latitude  =   19.4275
                })
        }
    };
}