Binding Pushpins in ObservableCollection to Bing Maps Control WP7

Question

I'm working on a Windows Phone 7 Project (Mango) and am trying to bind Pushpins to my silverlight Bing Maps control using an ObservableCollection, but it wont work. I've been sat here for the last 5 hours, scouring the internet and other questions on stackoverflow and have implemented some answers but can't find one which works :(

I would be very grateful for any ideas as to why its not working. I'm pretty sure its to do with my XAML as my ObservableCollection is populated correctly (checked at runtime using breakpoints) with valid Locations. For the moment my ObservableCollection is only populated with two locations, however I will be looking to increase this number when I start using the Bing RouteService.

Here is the code:

public partial class MapView : PhoneApplicationPage
{
    private readonly CredentialsProvider bingMapsCredentials = new ApplicationIdCredentialsProvider(App.BingMapsKey);
    private GeoCoordinate geoDestination;
    private GeoCoordinate geoCurrentLocation;
    public ObservableCollection<PushpinModel> PushpinCollection { get; set; }

    public MapView()
    {
        InitializeComponent();

        geoDestination = new GeoCoordinate(54.975556, -1.621667);
        geoCurrentLocation = new GeoCoordinate(53.463056, -2.291389);

        CreatePushpins();
    }

    private void CreatePushpins()
    {
        PushpinModel currentLocationModel = new PushpinModel();
        PushpinModel destinationLocationModel = new PushpinModel();

        currentLocationModel.Location = geoCurrentLocation;
        destinationLocationModel.Location = geoDestination;

        PushpinCollection = new ObservableCollection<PushpinModel>();
        PushpinCollection.Add(currentLocationModel);
        PushpinCollection.Add(destinationLocationModel);
    }

Below is the PushpinModel Class:

using System.Device.Location;

namespace NavigationApp
{
    public class PushpinModel
    {
       public GeoCoordinate Location { get; set; }
    }
}

And below is the offending XAML (I think!):

<phone:PhoneApplicationPage 
    x:Class="NavigationApp.MapView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:NavigationApp"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True" 
    xmlns:my="clr-namespace:Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.Controls.Maps">
    <phone:PhoneApplicationPage.Resources>
        <local:PushpinModel x:Key="PushpinModel" />
        <DataTemplate x:Key="LogoTemplate">
            <my:Pushpin Location="{Binding Location}" Background="#FFB6DE2E" />
        </DataTemplate>
    </phone:PhoneApplicationPage.Resources>

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="0"/>
            <RowDefinition Height="768*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"></StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1">
            <my:Map Height="520" HorizontalAlignment="Left" Margin="6,6,0,0" Name="map1" VerticalAlignment="Top" Width="468" ZoomBarVisibility="Collapsed" ZoomLevel="1" CredentialsProvider="{Binding bingMapsCredentials}" >
                <my:MapItemsControl Name="Pushpinsss" ItemTemplate="{StaticResource LogoTemplate}" ItemsSource="{Binding PushpinCollection}" >
                 </my:MapItemsControl>
            </my:Map>
        </Grid>
    </Grid>    
</phone:PhoneApplicationPage>

If you need anymore Code/Info then just let me know :) Thanks Ryan

Solution

Changed ObservableCollection to:

        private ObservableCollection<PushpinModel> PushpinCollection;
    public ObservableCollection<PushpinModel> pushpinCollection
    {
        get
        {
            return PushpinCollection;
        }
    }

And XAML is now:

 <my:MapItemsControl Name="Pushpinsss" ItemTemplate="{StaticResource LogoTemplate}" ItemsSource="{Binding pushpinCollection}" >

Answer 1

From your code it seams you forgot to set the DataContext . You can do this with:

public MapView()
{
    InitializeComponent();

    geoDestination = new GeoCoordinate(54.975556, -1.621667);
    geoCurrentLocation = new GeoCoordinate(53.463056, -2.291389);

    CreatePushpins();
    DataContext = this;
}

By the why, you can only bind to properties. So this won't work:

private readonly CredentialsProvider bingMapsCredentials = 
    new ApplicationIdCredentialsProvider(App.BingMapsKey);

XAML:

<my:Map ...  CredentialsProvider="{Binding bingMapsCredentials}" ... />

Use a wrapper propery instead:

private readonly CredentialsProvider bingMapsCredentials = 
    new ApplicationIdCredentialsProvider(App.BingMapsKey);

public CredentialsProvider BingMapsCredentials 
{ 
     get { return bingMapsCredentials; } 
}

XAML:

<my:Map ...  CredentialsProvider="{Binding BingMapsCredentials}" ... />

There is a good overview about DataBinding on MSDN (it's about WPF but the most part also applies for WP7)