Binding Bing Map Pushpin

In this post I will show you how to bind the push pin of the Bing map control using MVVM to show multiple push pin on the map control.In my last post on the Bing map which I have write for the beginners you have seen that I have displayed only one one push pin but now its time to learn how to display multiple push pin on map control.

Modal :

In Modal I have only one class (MapModal) which is used as the source for the map control which have only two properties one is the MapLocation which is of type Location( data type in the Bing map dlls used for latitude and longitude ) and the other property is the TooltipText property used to show the tool tip of the pushpin. And one function which will return the records for the map control of type observable collections.

View Modal :

In View Modal I have only one property of type ObservableCollection with name MapLocations and initialized on the default constructor of the view modal class.

View :

In View I have added the reference of the viewModal namespace in the user control tag and then by using that reference I have give the data context of the user control. Which you can see in the below code as I have set the data context of the user control and then after that I have created template for the MapItemControl which Represents an the class that uses a MapLayer as an ItemsPanel. This enables data binding using an ItemsSource and an ItemTemplate.It consist of one control which is the pushpin and I have bind the Position and the tool tip of the pushpin control.

<UserControl.DataContext >
        <viewModal:MapViewModal/>
    </UserControl.DataContext >
    <UserControl.Resources >
        <DataTemplate x:Key="PushpinTemplate">
            <bingMap:Pushpin bingMap:MapLayer.Position="{Binding MapLocation}" ToolTipService.ToolTip="{Binding TooltipText}" />
        </DataTemplate>
    </UserControl.Resources>


        <bingMap:Map CopyrightVisibility="Collapsed" LogoVisibility="Collapsed" ZoomLevel="12" 
    CredentialsProvider="AoXaZoKhVUk_qMWVOcaUMOghcav3ZXJTTi5ttGqOcuoG_YNbaY40SKUK-zHpRl2_"
                 Center="47.615820, -122.238973" >
                <bingMap:MapItemsControl ItemTemplate="{StaticResource PushpinTemplate}" ItemsSource="{Binding MapLocations}">
            </bingMap:MapItemsControl >
        </bingMap:Map >

Next is the map control which has the zoom level, copy right , logo visibility and the center of the map set and then is the MapItemscontrol , I have set the ItemTemplate which I have created in the resource of the user control and the ItemSource which is bind to the MapLocations property defined in the viewModal of the project.When you run the application you can see the output of the example as shown in the Image 1.You can download the source code from here. 

Image 1

All and any comments / bugs / suggestions are welcomed!