Create a Silverlight Project
To begin, create a Silverlight project in Visual Studio.
- Open Visual Studio 2008.
- Select File the main menu.
- Select New, and then Project from the menu.
- In the New Project dialog box, under the language of your choice (for example, Visual C#), select Silverlight.
- Select a Silverlight Application from the available templates and then click OK.
- When asked, make sure the Host the Silverlight application in a new Web site option is checked. Because of URL access restrictions in Silverlight, your Web page must be hosted using the HTTP scheme for it to be able to access Bing Maps tiles. For more information about Silverlight URL access restrictions, see http://msdn.microsoft.com/en-us/library/cc189008(VS.95).aspx.
Next, reference the map control dlls in your project and display the default map in your application.
- With the Silverlight project selected (not the Web project), select Project then Add Reference from the Visual Studio main menu.
- In the Add Reference dialog box, click the Browse tab.
- Browse to the location of your Bing Maps Silverlight Control installation. Open the Libraries folder, select the Microsoft.Maps.MapControl.dll and the Microsoft.Maps.MapControl.Common.dll files and click OK.
- Add the map control assembly to MainPage.xaml of your Silverlight project by creating a namespace in your UserControl. The MainPage.xaml now looks like this:
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:m="clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl">
<Grid x:Name="LayoutRoot">
</Grid>
</UserControl>
- Once the map control assembly is referenced, then you can add the map element
<m:Map/>to your page. Put this element within theGrid. - To authenticate your use of the map control, you also need to set credentials. To do this, add a
CredentialsProviderattribute to the<m:Map/>element. Set theCredentialsProviderattribute to the Bing Maps Key that you obtained from the Bing Maps Account Center. Your final MainPage.xaml looks like this:
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:m="clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl">
<Grid x:Name="LayoutRoot">
<m:Map CredentialsProvider="your key"/>
</Grid>
</UserControl>
- Run your Silverlight Map Control application to display a default map.
To customize the map or other UIElements, you can set properties in your MainPage.xaml file.
- To change the mode, or style, of the map, set the
Modeof the map element to“Aerial”. Your MainPage.xaml now looks like this:
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:m="clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl">
<Grid x:Name="LayoutRoot" Background="White">
<m:Map CredentialsProvider="your key" Mode="Aerial" />
</Grid>
</UserControl>
Now run your project to see the map in Aerial mode.
Change the Map Mode using C#
Alternatively you can use Visual C# to change the map mode.
- Start by giving your map element a name so that you can access this element from within C#. Your MainPage.xaml will look like this:
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:m="clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl">
<Grid x:Name="LayoutRoot" Background="White">
<m:Map CredentialsProvider="your key" Name="myMap" />
</Grid>
</UserControl>
- Then in your MainPage.xaml.cs file, reference the map control namespace with a
usingstatement. - Finally, set the map mode when the MainPage is constructed. Your MainPage.xaml.cs file now looks like:
using Microsoft.Maps.MapControl;
namespace SilverlightApplication1
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
myMap.Mode = new AerialMode();
}
}
}
- Now run your project to see the map in Aerial mode.
You can download sample application Click here
