Binding Pushpins to Bing Maps in Windows Phone

Question

So I need some help here - Some tutorials on how to do it.

I am trying to create a location page for my app

I need to know how to also bind two xml nodes into one for a list of pushpins and then when the user clicks on them it takes the value to another page.

I can populate the XML and the map. Below is how i currently get the stops.

    void client_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
    {
        if (e.Error == null)
        {
            if (e.Result != null)
            {
                XDocument doc = XDocument.Parse(e.Result);
                XNamespace ns = "http://schemas.datacontract.org/2004/07/BusExpress.ClassLibrary";
                var locations = (from n in doc.Descendants(ns + "ArrayOfStop")
                                  select new RootContainer
                                  {

                                      Location = (from s in n.Elements(ns + "Stop")
                                               select new Location
                                               {
                                                 latitude = s.Element(ns + "lat").Value,
                                                 longitude = s.Element(ns + "long").Value,


                                               }).ToList()
                                  }).Single();


              //  listBusStops.ItemsSource = locations.Location;


                // Do something with the list of Route Names in routeNames 
            }
        }
    } 

How can i convert that into multiple Push pins from one xml feed.

Answer 1

Update: Added more code, as well as a link to a working demo and complete source.

Note: Demo with source via my blog.

You can build a Data Template to represent how the push pins should be shown on the map.

Such as:

<phone:PhoneApplicationPage.Resources>
    <DataTemplate x:Key="PinItemTemplate">
        <my:Pushpin Location="{Binding Location}" 
                    MouseLeftButtonUp="Pushpin_MouseLeftButtonUp_1"
                    Content="{Binding Id}">
        </my:Pushpin>
    </DataTemplate>
</phone:PhoneApplicationPage.Resources>

You can then bind your bing map to this collection referencing the data template.

        <my:Map Margin="10,10,0,0"
                Name="map1"
                Center="39.95245, -75.163526"
                ZoomLevel="11"
                HorizontalAlignment="Stretch"
                VerticalAlignment="Stretch">
            <my:MapItemsControl x:Name="MapPins"
            ItemsSource="{Binding Pins}"
            ItemTemplate="{StaticResource PinItemTemplate}"
            />
        </my:Map>

You can then bind this view model as normal.

        //Load map pins
        MapViewModel view = new MapViewModel();
        view.Load();
        this.DataContext = view;

To process the pin when clicked you should be able to do the following:

private void Pushpin_MouseLeftButtonUp_1(object sender, MouseButtonEventArgs e)
{
Pushpin pin = (Pushpin)sender;
MessageBox.Show(pin.Content.ToString());
}