Getting started with the Bing Maps Silverlight Control
Tuesday, 23 March 2010
Article Index
Getting started with the Bing Maps Silverlight Control
Using code
Adding Silverlight graphics


Creating the map in code

You don't have to use XAML - ever. XAML is just an object instantiation and property initialisation language. Anything you can do in XAML you can do in code and its often a good idea to see how things are done without XAML.

If you start a new Silverlight application, add the references as described in the previous section you can easily write code to add a default map to the page. Add a button using the designer and double click on it to transfer to the code editor. The following code is in C# but the same ideas apply in other languages.

First you need to add:

using Microsoft.Maps.MapControl;

to the start of the code that you can refer to map classes using short names. In the button's click handler you first create the map object:

private void button1_Click(
 object sender, RoutedEventArgs e)
 Map map = new Map();

Next you set the credentials:

 map.CredentialsProvider = 
new ApplicationIdCredentialsProvider(

and as before you have to replace KEY with your Bing Maps key. Now we can add the map object to the Grid's Children collection so that it displays:


This is all that we need an if you run this program you will see the default map as before.

There is another system of credentials based on tokens but this is being phased out in favor of the Application Id which is essentially the key you received when you registered on the site.

Simple customisation

Of course you can use a mix of XAML and code to work with the map. For example, it makes reasonable sense to create the map object in XAML:

<m:Map Name="MyMap" 
CredentialsProvider= "KEY"/>

and now that you have assigned a name to the map you can reference it and its properties in code.

You can also set many of its properties in XAML, either using the designer or the properties window. For example, you can position the map by dragging it in the designer, by adding a Margin attribute in the tag. by setting the Margin property in the property window or in code.

For a more practical example consider making the map visible using a button. First you can set the map's visibility to collapsed using XAML or the property window:

<m:Map Name="MyMap" 
CredentialsProvider= "KEY"
Visibility="Collapsed" />

and in the button's click event handler:

private void button1_Click(
object sender, RoutedEventArgs e)
MyMap.Visibility = Visibility.Visible;

Now the map only appears after the user has clicked the button.

Objects, methods and properties

The Map control has a range of methods and properties that allow you to manipulate it and there's  a range of additional objects that are used to work with it.  If you already know how to use the Javascript/AJAX map control then you will be pleased to know that many properties and objects follow the structure an naming conventions already defined - but often with slight name changes. Occasionally, however, things are done in a very different way with the result that while some things are familiar you will be left wondering how to achieve something sooner or later.

For example, the map control's Center property will move the map location to the specified latitude and longitude. In turn the latitude and longitude are specified as a suitably initialised Location object. (In the case of the Javascript control these are the SetCenter method and VELatLong object).

The easiest way to make sure you understand this is via a simple example:

function Button1_onclick() 
private void button1_Click(
object sender, RoutedEventArgs e)
MyMap.Center = new Location(55, -1.5);

then clicking the button re-centers the map on 55N, 1.5W.

In fact what happens here is that the Location object makes use of a LocationConverter (defined as an attribute) to change a range of different types of position specifications to a Location object.

If you want to extend the range of conversions you can by extending the LocationConverter and you can mark other classes of your own with the attribute so that they too can work with locations in a range of formats. The Silverlight/.NET approach to building a map control is more flexible and easier to modify than the Javascript approach.

You can adjust all of the other viewing parameters using similar methods and objects – just check the documentation.

For example there is a SetView method which can be used to set position and zoom in one go:

new Location(55, -1.5, 100), 15);}






Last Updated ( Monday, 26 July 2010 )