Bing Maps

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 through 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 as 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 achieved 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. As 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 a lot easier for developers to create maps within their applications in an MVVM friendly way with the freedom to customise it as they wish.

There are some major improvements with the updates to the universal app model which 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!

Author James Croft

James is a .NET developer for Black Marble Ltd. with over 5 years app development experience in Microsoft platforms. He enjoys blogging, helping others learn to code, making YouTube videos, spending time with his girlfriend but most of all, penguins.

More posts by James Croft

Join the discussion 7 Comments

  • How to add a Draggable pin functionality in Windows 10 UWP MapControl?

  • Travis says:

    I changed the target to Build 10586 and it works. Thanks

  • b16bkostas says:

    I have error when use
    namespace maps is not defind
    The type ‘maps:MapControl’ was not found. Verify that you are not missing an assembly reference and that all referenced assemblies have been built.
    MapControl is not supported in a Windows Universal project.

    • James Croft says:

      Have you added the XAML namespace for the MapControl? If not, paste this into your Page/UserControl at the root with the other namespaces:

      xmlns:maps=”using:Windows.UI.Xaml.Controls.Maps”

      Hope this helps 🙂

  • […] /* 0) { ratingctl00_cphMiddle_cphContent_tr3w45fwwvre_itemRating = result['Rating']; SetCurrentRating('ctl00_cphMiddle_cphContent_tr3w45fwwvre_itemRating_pnlHolder', result['Rating'], "disabled fullStar", "disabled emptyStar", true); if(votesCountctl00_cphMiddle_cphContent_tr3w45fwwvre_itemRating!=null) { votesCountctl00_cphMiddle_cphContent_tr3w45fwwvre_itemRating ++; SetVotesCount('ctl00_cphMiddle_cphContent_tr3w45fwwvre_itemRating_lblUsersRated', '(' + votesCountctl00_cphMiddle_cphContent_tr3w45fwwvre_itemRating + ' votes)'); } SetRatingCookie('r', 'i36620', '1'); } else if (result['Status'] == 1) { alert('The session has expired. Please refresh the page to be able to vote!'); } } /* ]]> */ (0 votes) 0 comments   /   posted by Silverlight Show on Mar 25, 2015 Tags:   windows-10 , windev , james-croft Read original post at James Croft's Blog […]

Leave a comment