Here is the XAML code:
<maps:Map x:Name="NearbyMap"
Center="{Binding MapCenter, Mode=TwoWay}"
ZoomLevel="{Binding ZoomLevel, Mode=TwoWay}"
>
<maptk:MapExtensions.Children>
<maptk:MapItemsControl Name="StoresMapItemsControl" ItemsSource="{Binding Treks}">
<maptk:MapItemsControl.ItemTemplate>
<DataTemplate>
<maptk:Pushpin x:Name="RouteDirectionsPushPin" GeoCoordinate="{Binding Location}" Visibility="Visible" Content="test"/>
</DataTemplate>
</maptk:MapItemsControl.ItemTemplate>
</maptk:MapItemsControl>
<maptk:UserLocationMarker x:Name="UserLocationMarker" Visibility="Visible" GeoCoordinate="{Binding MyLocation}"/>
</maptk:MapExtensions.Children>
</maps:Map>
xmlns:maps="clr-namespace:Microsoft.Phone.Maps.Controls;assembly=Microsoft.Phone.Maps"
xmlns:maptk="clr-namespace:Microsoft.Phone.Maps.Toolkit;assembly=Microsoft.Phone.Controls.Toolkit"
PushPinModel has an attribute Location which is a GeoCoordinate. Treks is an ObservableCollection<PushPinModel>
. I run this code and only the UserLocationMarker is displayed, which is my current location.
The
MapItemsControl
is currently not yet MVVM bindable ( what I am aware off ). So best way is to set it'sItemsSource
in the code behind of your view.You can still use the collection defined in your ViewModel though! Options are:
this.StoresMapItemsControl.ItemsSource = ServiceLocator.Current.GetInstance<MainViewModel>().Locations;
I finally make it work by using dependency property. I added a new class:
And in the .xaml file I have added
and now the .xaml file looks like this:
Now all the pushpins are correctly rendered.