Windows 10 SDK: Bing Maps Control

With the pre-release of the Windows 10 SDK, I thought I'd have a go with it to see what's new, what's changed and how I can use this knowledge in my own apps.

 

The new map control, personally, has to be one of the most needed changes. Although there weren't any major issues with the Bing Maps SDK, the map control that it provided was not MVVM friendly. There were no dependency properties to bind to, making the implementation hard in an environment that works completely on the MVVM framework.

 

With the Universal Maps Control in the Windows 10 SDK preview, we see a major shift from the old Bing Maps control to this major MVVM friendly control that can be used with all the Windows platforms using the Universal App Platform (UAP) without any changes to code.

 

The MapControl is now part of the Windows.UI.Xaml.Controls namespace. If you've created a previous application that integrates with the old Bing Maps control, you'll find the new implementation minimal since the changes are only slight.

To get yourself started with adding a map to your XAML page, it's as easy as:

<maps:MapControl x:Name="myMap" HorizontalAlignment="Left" />

This core map control has bindings for ZoomLevel, Heading, DesiredPitch and many more. However, before you get frustrated that there is no Items or ItemsSource binding, this is because the MapControl requires a child element for binding items to it. This is done as follows:

<maps:MapControl x:Name="myMap" HorizontalAlignment="Left">
       <maps:MapItemsControl x:Name="MapItems" ItemsSource="{Binding}" />
 </maps:MapControl>

The fun doesn't end there though. Since this is essentially a ListView, we have the ability to build up an ItemTemplate for the Map to render your items as:

<maps:MapControl x:Name="myMap" HorizontalAlignment="Left">
   <maps:MapItemsControl x:Name="MapItems" ItemsSource="{Binding}">
      <maps:MapItemsControl.ItemTemplate>
         <DataTemplate>
            <Button x:Name="MapItemButton" Background="Transparent">
               <StackPanel>
                  <Border Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
                     <TextBlock Text="{Binding Title}"/>
                  </Border>
                  <Image Source="{Binding ImageSourceUri}" maps:MapControl.Location="{Binding Location}">
                     <Image.Transitions>
                        <TransitionCollection>
                           <EntranceThemeTransition/>
                        </TransitionCollection>
                     </Image.Transitions>
                  </Image>
               </StackPanel>
            </Button>
         </DataTemplate>
      </maps:MapItemsControl.ItemTemplate>
   </maps:MapItemsControl>
</maps:MapControl>

This makes it much easier for developers to create maps within their applications in an MVVM friendly way with the freedom to customise them as they wish.

 

There are some major improvements with the updates to the universal app model that will see more controls across WinRT being unified so that they can be used across multiple devices and multiple platforms.

 

Let me know in the comments below if you've had a go with the Windows 10 SDK preview and what you think of some of the changes you've found!