Silverlight - Add Pushpin to Bing Maps via C#

Question

Hello,

I'm getting started with the Silverlight Bing Maps control. How do I add a Pushpin to a map programmatically with C#?

Thank you!

Answer 1

Unknown,

Here is a step-by-step post for building a Silverlight app that displays a Bing map of the US, and adds a pushpin at each clicked location. And just for fun I added some "hover" functionality when you browse over the pushpins.

Step 1: Create a sample Silverlight application with Visual Studio (File / New Project / Silverlight Application)

Step 2: Add the two Bing DLL references to the Silverlight application project

Folder: C:\Program Files\Bing Maps Silverlight Control\V1\Libraries\
File 1: Microsoft.Maps.MapControl.dll
File 2: Microsoft.Maps.MapControl.Common.dll

Step 3: Edit the MainPage.xaml, and add the following namespace at the top:

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

Step 4: Edit the MainPage.xaml, and place the following code inside the UserControl's Grid:

<Maps:Map x:Name="x_Map" Center="39.36830,-95.27340" ZoomLevel="4" />

Step 5: Edit the MainPage.cs, and add the following using statement:

using Microsoft.Maps.MapControl;

Step 6: Edit the MainPage.cs, and replace the MainPage class with the following code:

public partial class MainPage : UserControl
{
    private MapLayer m_PushpinLayer;

    public MainPage()
    {
        InitializeComponent();
        base.Loaded += OnLoaded;
    }

    private void OnLoaded(object sender, RoutedEventArgs e)
    {
        base.Loaded -= OnLoaded;

    m_PushpinLayer = new MapLayer();
    x_Map.Children.Add(m_PushpinLayer);
        x_Map.MouseClick += OnMouseClick;
    }

    private void AddPushpin(double latitude, double longitude)
    {
        Pushpin pushpin = new Pushpin();
        pushpin.MouseEnter += OnMouseEnter;
        pushpin.MouseLeave += OnMouseLeave;
        m_PushpinLayer.AddChild(pushpin, new Location(latitude, longitude), PositionOrigin.BottomCenter);
    }

    private void OnMouseClick(object sender, MapMouseEventArgs e)
    {
        Point clickLocation = e.ViewportPoint;
        Location location = x_Map.ViewportPointToLocation(clickLocation);
        AddPushpin(location.Latitude, location.Longitude);
    }

    private void OnMouseLeave(object sender, MouseEventArgs e)
    {
        Pushpin pushpin = sender as Pushpin;

        // remove the pushpin transform when mouse leaves
        pushpin.RenderTransform = null;
    }

    private void OnMouseEnter(object sender, MouseEventArgs e)
    {
        Pushpin pushpin = sender as Pushpin;

        // scaling will shrink (less than 1) or enlarge (greater than 1) source element
        ScaleTransform st = new ScaleTransform();
        st.ScaleX = 1.4;
        st.ScaleY = 1.4;

        // set center of scaling to center of pushpin
        st.CenterX = (pushpin as FrameworkElement).Height / 2;
        st.CenterY = (pushpin as FrameworkElement).Height / 2;

        pushpin.RenderTransform = st;
    }
}

Step 7: Build and Run!