Using Bing Maps in WinForms

Article
11/08/2013

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.

Using Bing Maps in WinForms

Additional resources