読者です 読者をやめる 読者になる 読者になる

kazuakix の日記

Windows Phone とか好きです

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
                })
        }
    };
}


動かしてみると指定座標にコントロールが表示されている事がわかります。

f:id:kazuakix:20141223233944j:plain,w240


これで MapContorl の基本的な操作はできるようになったと思います。
使い勝手もなかなかいいですね。後は...

f:id:kazuakix:20141223234407j:plain

はよ、調査はよ...。