Share via

Creating an Application

  • Article

 

This topic describes how to a WPF application with Visual Studio.

Create a Windows Presentation Foundation Project

  1. Create a Windows Presentation Foundation (WPF) project in Visual Studio.

  2. Open Visual Studio.

  3. On File menu, select New Project.

  4. In the Installed Templates pane, expand Visual Basic or Visual C#, and then select Windows.

  5. Select WPF Application from the available templates, and type WPFTestApplication as the project Name.

  6. Click OK to create the project.

Display a Map

Next, reference the WPF map control DLL in your project and display the default map in your application.

  1. On the Project menu, select Add Reference.

  2. In the Add Reference dialog box, click the Browse tab.

  3. Browse to the location of the Bing Maps WPF Control installation. Typically, the control is installed in the Program Files or Program Files (x86) folders on the drive that contains your operating system. Open the Libraries folder, select the Microsoft.Maps.MapControl.WPF.dll file and then click OK.

  4. Add the map control assembly to MainWindow.xaml of your project by inserting the following declaration.

    xmlns:m="clr-namespace:Microsoft.Maps.MapControl.WPF;assembly=Microsoft.Maps.MapControl.WPF"

    Your MainWindow.xaml looks like this:

    <Window x:Class="WPFTestApplication.MainWindow"
    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.WPF;assembly=Microsoft.Maps.MapControl.WPF" 
    Title=”MainWindow” Height=”350” Width=”525”>
    <Grid>
    </Grid>
</Window>

  5. Add the map element <m:Map/>. Put this element inside the Grid. The Grid now has the following structure.

    <Grid>
  <m:Map/>
</Grid>

  6. 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 MainWindow.xaml looks like this:

    <Window x:Class="WpfTestApplication.MainWindow"
        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.WPF;assembly=Microsoft.Maps.MapControl.WPF" 
        Title="MainWindow" Height="350" Width="525">

        <Grid>
            <m:Map CredentialsProvider="INSERT_YOUR_BING_MAPS_KEY"/>
        </Grid>
</Window>

  7. Run your project to display a default world map.

Specify a Center Point and Zoom Level

To customize the map or other UIElements, you can set properties in your MainWindow.xaml file.To get a localized map, set the Centerand ZoomLevel properties. The following example centers the map in San Francisco at a zoom level of 16.

  1. Set the Center and ZoomLevel parameters on the map element. Your MainWindow.xaml looks like this:

    <Window x:Class="WpfTestApplication.MainWindow"
        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.WPF;assembly=Microsoft.Maps.MapControl.WPF" 
        Title="MainWindow" Height="350" Width="525">

        <Grid>
            <m:Map CredentialsProvider="INSERT_YOUR_BING_MAPS_KEY" Center="37.806029,-122.407007" ZoomLevel="16"/>
        </Grid>
</Window>

  2. Run your project to display the localized map.

Change the Map Mode using XAML

The Bing Maps WPF Control supports Road (RoadMode), Aerial (AerialMode), and AerialWithLabels (AerialMode with the Labels property set to true) imagery.

To change the mode, or style, of the map, use the Mode property to set the mode to AerialWithLabels. Your MainWindow.xaml now looks like this:

<Window x:Class="WPFTestApplication.MainWindow"
    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.WPF;assembly=Microsoft.Maps.MapControl.WPF">
    <Grid x:Name="LayoutRoot" Background="White">
        <m:Map CredentialsProvider="INSERT_YOUR_BING_MAPS_KEY" Mode=”AerialWithLabels” Center="37.806029,-122.407007" ZoomLevel="16"/>
    </Grid>
</Window>

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

Note

Not all element properties can be set in XAML.

Change the Map Mode using C# or Visual Basic

You can also use Visual C# or Visual Basic to change the map mode.

  1. To do this, give your map element a name so that you can access this element from within C# or Visual Basic. Your MainWindow.xaml will look like this:

    <Window x:Class="WPFTestApplication.MainWindow"
    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.WPF;assembly=Microsoft.Maps.MapControl.WPF">
    <Grid>
        <m:Map CredentialsProvider="INSERT_YOUR_BING_MAPS_KEY" x:Name="myMap" />
    </Grid>
</Window >

  2. Then in your MainWindow.xaml.cs (or MainWindow.xaml.vb) file, reference the map control namespace (Microsoft.Maps.MapControl.WPF) with a using (or Imports) statement.

  3. The following MainWindow.xaml.cs and MainWindow.xaml.vb examples set the map mode to Aerial with labels when the map is constructed.

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

namespace WPFTestApplication
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            //Set the map mode to Aerial with labels
            myMap.Mode = new AerialMode(true);
        }
    }
}

    Imports Microsoft.Maps.MapControl.WPF

Partial Public Class MainWindow
    Inherits Window

    Public Sub New()
        InitializeComponent()
        'Set the map mode to Aerial with labels
        myMap.Mode = New AerialMode(True)
    End Sub

End Class

  4. Run your project to see the map in Aerial mode.

Set Map Focus to Activate Manual Zoom using Keyboard

To activate the + and – keys to allow the user to manually zoom in and out of the map, the map control must be in focus. You can set the focus to the map when you start your application. The following code shows how to set focus in the previous example.

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

namespace WPFTestApplication
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            <strong>myMap.Focus();</strong>
            //Set map to Aerial mode with labels
            myMap.Mode = new AerialMode(true);

        }
    }
}

Imports Microsoft.Maps.MapControl.WPF

Partial Public Class MainWindow
    Inherits Window

    Public Sub New()
        InitializeComponent()
        <strong>myMap.Focus()</strong>
        'Set map to Aerial Mode with labels
        myMap.Mode = New AerialMode(True)
    End Sub

End Class