Creating a Basic Application Using the Silverlight Map Control

Article
08/28/2013

This documentation is no longer available on MSDN, however it is available as a CHM download.

This topic describes how to create a basic application that uses the Bing Maps Silverlight Control.

Note

If you do not need the full functionality of the Bing Maps Silverlight Control and just want to display a simple Silverlight map on your Web page, you can use the embedded map feature of the map control. This is described in the Embedding a Map into Your Web Page topic.

If you are interested in using JavaScript to access the Bing Maps Silverlight Control functionality, see the Accessing the Control Using Script topic.

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 https://msdn.microsoft.com/en-us/library/cc189008(VS.95).aspx.

Display a Map

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:

<UserControl x:Class="SilverlightTestApplication.MainPage"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="https://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 the Grid.
To authenticate your use of the map control, you also need to set credentials. To do this, add a CredentialsProvider attribute to the <m:Map/> element. Set the CredentialsProvider attribute to the Bing Maps Key that you obtained from the Bing Maps Account Center. Getting a Bing Maps Key is described in the Accessing the Control Using a Bing Maps Key topic. Your final MainPage.xaml looks like this:
```
<UserControl x:Class="SilverlightTestApplication.MainPage"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="https://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.

Change the Map Mode using XAML

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 Mode of the map element to “Aerial”. Your MainPage.xaml now looks like this:

<UserControl x:Class="SilverlightTestApplication.MainPage"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="https://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.

Note

Not all element properties can be set in XAML.

Change the Map Mode using C# or Visual Basic

Alternatively you can use Visual C# or Visual Basic to change the map mode.

Start by giving your map element a name so that you can access this element from within C# or Visual Basic. Your MainPage.xaml will look like this:

<UserControl x:Class="SilverlightTestApplication.MainPage"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="https://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 (or MainPage.xaml.vb) file, reference the map control namespace with a using (or Imports) statement.

Finally, set the map mode when the MainPage is constructed. Your MainPage.xaml.cs (or MainPage.xaml.vb) now looks like:

using System.Windows.Controls;
using Microsoft.Maps.MapControl;

namespace SilverlightTestApplication
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();

            myMap.Mode = new AerialMode();

        }
    }
}

Imports Microsoft.Maps.MapControl

Partial Public Class MainPage
    Inherits UserControl

    Public Sub New()
        InitializeComponent()
        myMap.Mode = New AerialMode
    End Sub

End Class

Now run your project to see the map in Aerial mode.

Creating a Basic Application Using the Silverlight Map Control

Create a Silverlight Project

Display a Map

Change the Map Mode using XAML

Change the Map Mode using C# or Visual Basic

See Also

Concepts

Additional resources