databinding BingMaps Control Wp7 MVVM

Ok, so a similar treatment for the Bing Maps control as for previous posts on the Pivot and Panorama controls. So starting out with a standard Windows Phone Application project…

Straight into the xaml:

            <Maps:Map x:Name="map" Grid.Row="1">
                <Maps:MapItemsControl ItemsSource="{Binding PushPins}">
                    <Maps:MapItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Maps:Pushpin Location="{Binding Location}" 
                                          Template="{StaticResource PushpinControlTemplate1}">
                            </Maps:Pushpin>
                        </DataTemplate>
                    </Maps:MapItemsControl.ItemTemplate>
                </Maps:MapItemsControl>
            </Maps:Map>

From this you can see I intend to bind the Map control’s ItemSource to my PushPins collection. Each PushPin item will have a bound location and I have a custom template for the PushPin UI. Let’s take a look at the template first:

    <phone:PhoneApplicationPage.Resources>
        <ControlTemplate x:Key="PushpinControlTemplate1" TargetType="Maps:Pushpin">
            <Grid Height="116" Width="155">
                <Ellipse Fill="#FFA3A3BE" Stroke="Black" Margin="0"/>
                <Image Source="{Binding PinSource}"/>
            </Grid>
        </ControlTemplate>
    </phone:PhoneApplicationPage.Resources>

The template contains an ellipse and an Image with it’s source data bound also so we can vary the display at run-time for each item.

Here’s my view model:

    public class ViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        public void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }

        private ObservableCollection<PushPinModel> _pushPins;

        public ObservableCollection<PushPinModel> PushPins
        {
            get { return _pushPins; }
            set
            {
                if (_pushPins != value)
                {
                    _pushPins = value;
                    OnPropertyChanged("PushPins");
                }
            }
        }
    }

Very simple, just an ObservableCollection of PushPinModel’s:

    public class PushPinModel : INotifyPropertyChanged
    {
        public PushPinModel() { ; }
        private GeoCoordinate _location;

        private string _pinSource;

        public string PinSource
        {
            get { return _pinSource; }
            set
            {
                if (_pinSource != value)
                {
                    _pinSource = value;
                    OnPropertyChanged("PinSource");
                }
            }
        }

        public GeoCoordinate Location
        {
            get { return _location; }
            set
            {
                if (_location != value)
                {
                    _location = value;
                    OnPropertyChanged("Location");
                }
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        public void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }

Again, very simple a GeoCoordinate to describe the map location and a string property describing the image to display on the push pin.

Nearly done, just need to set the DataContext with some dummy data…

 

DataContext = new ViewModel
    {
        PushPins = new ObservableCollection<PushPinModel>
                        {
                            new PushPinModel
                                {
                                    Location = new GeoCoordinate(51.569593, 10.103504),
                                    PinSource = "ApplicationIcon.png"
                                },
                            new PushPinModel
                                {
                                    Location = new GeoCoordinate(-45.569593, 1.103504),
                                    PinSource = "ApplicationIcon.png"
                                }
                        }
    };

And here’s the result.

Technorati Tags: BingMaps,Control,MVVM,treatment,Pivot,Panorama,Application,Name,Grid,MapItemsControl,ItemsSource,PushPins,ItemTemplate,DataTemplate,Pushpin,Location,Template,StaticResource,From,ItemSource,collection,item,custom,PhoneApplicationPage,Resources,ControlTemplate,TargetType,Width,Ellipse,Fill,Black,Margin,Image,Source,PinSource,data,Here,ViewModel,event,PropertyChangedEventHandler,PropertyChangedEventArgs,ObservableCollection,PushPinModel,_pushPins,Very,GeoCoordinate,_location,_pinSource,Again,DataContext,ApplicationIcon,result,propertyName

WordPress Tags: BingMaps,Control,MVVM,treatment,Pivot,Panorama,Application,Name,Grid,MapItemsControl,ItemsSource,PushPins,ItemTemplate,DataTemplate,Pushpin,Location,Template,StaticResource,From,ItemSource,collection,item,custom,PhoneApplicationPage,Resources,ControlTemplate,TargetType,Width,Ellipse,Fill,Black,Margin,Image,Source,PinSource,data,Here,ViewModel,event,PropertyChangedEventHandler,PropertyChangedEventArgs,ObservableCollection,PushPinModel,_pushPins,Very,GeoCoordinate,_location,_pinSource,Again,DataContext,ApplicationIcon,result,propertyName