Using Bing Maps in WinForms

In the past using Bing Maps inside a WinForm required using a web browser control and creating a interlope between managed code and JavaScript. It was painful but worked. When the Silverlight control came out it was possible to create an out of browser Silverlight application to create desktop Bing Maps applications, however this meant extra work was required to get access to lower level functionalities that are available through WPF and not Silverlight. Last August Microsoft released the Bing Maps WPF control as a beta. This makes it easier to create desktop mapping applications although it’s important to note it is still in beta so there are some bugs and it’s not full featured yet. That said this makes it easier to get Bing Maps into your WinForm applications. The following steps outline how go about getting this to work. At the end you can download the source code for a sample application.

To start we need to add some references to the Visual Studio project. You do this by right clicking on "References" in the Solution Explorer and choosing "Add Reference":

Once you have the dialog up, you want to scroll to the bottom on the .NET tab and choose the "WindowsFormsIntegration" component, and hit OK:

You will also need to add references to the Bing Maps WPF control “Microsoft.Maps.MapControl.WPF” and to System.Xaml. Since the Bing Maps control uses WPF we can’t just drop a map into a WinFrom. We need to create a WPF user control and then add it to a WPF Element Host in our WinForm.

Next we need to create a WPF user control to host our map control in. To do this you can choose "Add New Item" and under WPF choose "User Control". In my case I'm going to name it "MapUserControl":

Since I want my user control to be easy to use I’ll simple drop a map control into a grid and remove any width/height values. This will allow the map to scale with the user control. I’ll also give the map a name value of “Map”. This will make it easy to get access to the map element using code like MapUserControl.Map. Here is the XAML markup:

 <UserControl x:Class="BingMapsWinForm.MapUserControl"
             xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="https://schemas.microsoft.com/expression/blend/2008" 
             xmlns:m="clr-namespace:Microsoft.Maps.MapControl.WPF;assembly=Microsoft.Maps.MapControl.WPF">
    <Grid>
        <m:Map Name="Map"/>
    </Grid>
</UserControl>

Now the fun can begin, we can now go to the WinForm where you want to add the map and add a WPF Element Host. First build your solution. This will compile the user control and make it available later. To do this open up the Toolbox, scroll down to the “WPF Interoperability” tab and drag an “Element host” item onto your form. When you do this you will be prompted to select the hosted content, select the map user control you created.

You should now see a the map in your WinForm. Scale it out as you see fit. You can also edit the name of the control. I’ll call it MyMapUserControl.

Next you need to specify a Bing Maps key to get rid of the warning message. This can be done in a could of different ways. The easiest is to simply provide it in the constructor of the form like so:

 public Form1()
{
    InitializeComponent();

    //Set Credentials for map
    MyMapUserControl.Map.CredentialsProvider = new ApplicationIdCredentialsProvider("YOUR_BING_MAPS_KEY");
}

You can now run your application and you should end up with something like this:

This is a very basic example but can easily be enhanced. This will work will with the Bing Maps REST services. Take a look at this blog post on Bing Maps REST Service JSON libraries.

You can download the complete source code for this example here.

Comments

• Anonymous
  March 12, 2014
  For fast responses to questions try using the Bing Maps forums: social.msdn.microsoft.com/.../home If you are creating a Windows Store app then take a look at my free eBook: rbrundritt.wordpress.com/my-book

• Anonymous
  January 21, 2015
  Please specify how to make multiple pushpins on Bing Map in Windows form. .

• Anonymous
  February 10, 2015
  Is this still working? i downloaded your example but when i launch it i see the bing logo and the "zoom" bar... but  i see a gray rectangle instead  of the map...

• Anonymous
  February 18, 2015
  I'm assuming you recently downloaded the Bing Maps WPF control. The latest release has a bug in it when you try and load it with a culture setting n your computer other than en-US. An updated download is being created, but in the mean time you can get around this by using the workaround mentioned here: social.msdn.microsoft.com/.../bing-maps-wpf-control

• Anonymous
  March 09, 2015
  I'm trying to recreate this example using VB.NET in VS 2013 and I'm having trouble adding the map control to the element host.  It is not displaying in the drop down.  I downloaded the example and it does work but if I remove the map control from the element host I can't add it back into the element host. How did you add the map control to the element host?  It seems pretty basic in the example.  Why doesn't this work?

• Anonymous
  May 06, 2015
  Save my Logistic Soft Project, thanks!

• Anonymous
  August 26, 2015
  Hi Ricky, I am trying to develop a windows forms application with the Bing maps WPF. and the above mentioned worked great. But I seem to be having trouble with the scroll zoom feature. It does not work. It would be great if you could help me out ASAP TIA