Windows Phone 7 - the Bing Maps Control
Written by Ian Elliot   
Monday, 27 September 2010
Article Index
Windows Phone 7 - the Bing Maps Control
Customising code
Pushpins
Adding Silverlight graphics

Banner

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:

 

<my:Map 
Name="map1" 
Height="500" 
Width="450"
CredentialsProvider="KEY"
/>
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:

 

<my:Map 
Name="map1" 
Height="500" 
Width="450"
CredentialsProvider="KEY"
Visibility="Collapsed" />
and in the button's click event handler:

 

private void button1_Click(
object sender, RoutedEventArgs e)
{
map1.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 and naming conventions already defined - but often with slight name changes.

If you already know the Silverlight desktop map control then you the same observation applies. In general things are organised in the same way but occasionally there are differences that have been introduced to allow the Phone control to work with other specifically phone hardware. 

For example, the map control's Center property will move the map location to the specified latitude and longitude as it does in both the Javascript and desktop control. But instead of using a Location object to set the position you have to use a GeoCoordinate 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)
{
  map1.Center=new GeoCoordinate(55, -1.5);

}

to make this work as written you also have to add

using System.Device.Location;
then clicking the button re-centers the map on 55N, 1.5W.

The GeoCoordinate class is used to create position aware applications not just mapping apps. As well as specifying position it can also be used to specify a velocity and direction of travel for example.

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:
MyMap.SetView(map1.SetView(
new GeoCoordinate(55, -1.5),15);
Alternatively you can set the zoom in a separate step:
 map1.ZoomLevel = 17;

In a real Windows Phone the user can zoom and pan the map using gestures but there is also a zoom control that you can display. This is useful when you are trying things out using the simulator:

map1.ZoomBarVisibility = Visibility.Visible;
The ZoomBar is unimpressive:

 

xoombar

Finally  you can set the map mode using a statement similar to:

    map1.Mode = new AerialMode();

you can also select RoadMode and customise the view using the properties of the mode objects.

Banner

<ASIN:1430232196>

<ASIN:1590597079>

<ASIN:0672332221>

<ASIN:1430232161>

<ASIN:0470939079>



Last Updated ( Tuesday, 28 September 2010 )