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”:

image

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:

image

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”:

image

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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://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.

image

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:

image

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.

About these ads

19 thoughts on “Using Bing Maps in WinForms

    • Documentation on how to get a Bing Maps key can be found here. Once you have a key you just have to set the key like this:
      MyMapUserControl.Map.CredentialsProvider = new ApplicationIdCredentialsProvider(“YOUR_BING_MAPS_KEY”);

  1. Dear Mr. Brundritt,
    I found your topics about working with bing maps in windows presentation foundation but i need to develop application which is strictly done in windows form aplication. Specifically, my task is to draw electric substations on map (like pins) which are connected by straight lines based on data I pull from mysql databases. The part of pulling data from databases is done and that is not a problem but I stuck in this part of my task. Honestly, I don’t really know differencies beetwen WPF and WFA but we had a class where we only worked in classic WFA and databases communication part is done in WFA so I need to finish drawing maps part in WFA. Can you somehow direct me?

    Looking forward to your answer, best regards!

    • There are two way for you to use Bing Maps in a Windows Form app. The first method is to use the Bing Maps WPF control as described in that blog post. The second method is to use a web browser control and create the interlop connections for all the calls to the map. The first method is the best method to use. Based on your message it sounds like you are working with your data without using Entity Framework which is alright. Basically all you have to do is take your data in what ever format it is in and convert it into the proper shape classes that the map understands; Pushpin, MapPolyline, MapPolygon. Once you do that you can easily add the data to the map.

  2. ‘System.Windows.Forms.Integration.ElementHost’ does not contain a definition for ‘Map’ and no extension method ‘Map’ accepting a first argument of type ‘System.Windows.Forms.Integration.ElementHost’ could be found (are you missing a using directive or an assembly reference?)

    I followed all of your instructions from this blog for example above and tried to make project on my own but this is what happens when I try to build :(

    http://imageshack.us/photo/my-images/14/probbe.jpg/

    I have a feeling a made some stupid mistake, help please

    • A couple of things you need to do. The first thing is add WPF to the end of your using like so: using Microsoft.Maps.MapControl.WPF;

      Also, put quotes around your Bing Maps key as it is meant to be a string.

      If you still have issues ensure you have created the UserControl for the map.

    • That seems odd. Perhaps in the MapUserControl change the name of property from “Name” to “x:Name”. I’ll email you a working code sample for you to compare.

    • I had this same problem and it was just silly, I renamed the element instead of the control inside the element
      scroll down to the very bottom of properties and you will see the proper place to name the control.

  3. Is there any command or solution to draw something on map if given only by coordinates?

    I always forget to thank you for your patience and help, thank you so much, Sir.

  4. Thank you for taking the time to write this Ricky. The writing style style doesn’t make it the easiest example to follow, but I am getting there. However, I have 2 errors:

    1. ‘MyProject.MapUserControl’ does not contain a definition for ‘Map’ and no extension method ‘Map’ accepting a first argument of type ‘MyProject.MapUserControl’ could be found (are you missing a using directive or an assembly reference?)

    This error occurs on the line where we are setting the Bing Maps Key. I copied the XML you provided for the usercontrol, so have the following xml:

    I have tried changing the name to Map2 etc but it doesnt pick it up.

    2. In the constructor of the MapUserControl the designer added InitializeComponent();. But I am getting the error: “The name ‘InitializeComponent’ does not exist in the current context …\MapUserControl.xaml.cs”.

    Any suggestions for these?
    Thanks
    Kevin

  5. got it! I had copied your xaml for the user control, but of course your namespace is BingMapsWinForm, but mine is not. The perils of copy and paste!

  6. Pessoa, tive um pouco de dificuldade pois tive o mesmo problema do Kevin(O nome ‘InitializeComponent’ não existe no contexto atual …). Se você tentar copiar e colar o XAML do tutorial passado pelo rbrundritt , pode acontecer o problema do XAML não conseguir recuperar o nameSpace onde estar o construtor da classe do userControl. Abaixo segue um exemplo:

    namespace TutorialRbrundritt
    {
    ///
    /// Interaction logic for MainWindow.xaml
    ///
    public partial class MainWindow
    {
    //…
    }
    }

    Tive essa dificuldade, pois criei uma biblioteca de userControl para os WPF ficando diferente do turorial deste blog.

  7. Most examples that I have seen are wpf, win app store and silverlight. I will appreciate if anyone can point me to a web based application example using bing REST Api.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s