Custom Pushpin with Pop Up on Hover in Bing Map Silverlight Control

First let’s create a custom Pushpin class extending the Pushpin.

public class
MyCustomPushpin : Pushpin
public string Description { get; set; }


Now let’s define the Pop Up in the MainPage.xaml

<UserControl x:Class=”MyBingApplication.MainPage”

xmlns:d=”; xmlns:mc=”;

mc:Ignorable=”d” d:DesignWidth=”640″ d:DesignHeight=”480″>

<Grid x:Name=”LayoutRoot”>

<m:Map x:Name=”myMap” CredentialsProvider=”AvYH87t36Tv3ybyYagU9HUZKjsrWO2Hcup3nu1fmNhpenHKO_RvEZ6PdGGc6CYGK” Mode=”AerialWithLabels” >

<m:MapLayer x:Name=”MyPushPinLayer”>

<Canvas x:Name=”ContentPopup” Visibility=”Collapsed”>

<Rectangle x:Name=”ContentPopupRectangle” Fill=”LawnGreen” Opacity=”0.7″
 Canvas.Left=”0″ Canvas.Top=”0″ Height=”40″ Width=”120″ RadiusX=”20″ RadiusY=”20″/>
<StackPanel Canvas.Left=”20″ Canvas.Top=”10″>

<TextBlock x:Name=”ContentPopupText”
FontSize=”12″ FontWeight=”Bold” TextWrapping=”Wrap” Width=”200″>



First we have added a Map Layer; inside it we have Canvas that holds the Rectangle Shape and Text Block to display the text inside it.

Our code behind would be this 

public partial class MainPage : UserControl
public MainPage()
InitializeComponent();string Address = "759 Jantanagar, Chandkheda, Gandhinagar, Gujarat, 382424";
GeocodeServiceClient myGeoCodeClient = new GeocodeServiceClient("BasicHttpBinding_IGeocodeService");          
// create an event hanler for GeocodeCompleted event as the service would be call asynchronously
myGeoCodeClient.GeocodeCompleted+=new EventHandler<GeocodeCompletedEventArgs>(myGeoCodeClient_GeocodeCompleted);
// create the request and pass the address to it
GeocodeRequest myGeoCodeRequest = new GeocodeRequest();
myGeoCodeRequest.Credentials = new Microsoft.Maps.MapControl.Credentials();
myGeoCodeRequest.Query = Address;

// Pass the request to GeocodeAsyn method


void myGeoCodeClient_GeocodeCompleted(object sender, GeocodeCompletedEventArgs e)
// create a map layer
MapLayer myMapLayer = new MapLayer();

// create a location collection class
LocationCollection myLocationColl=new LocationCollection();

foreach (GeocodeResult gr in e.Result.Results)
    MyCustomPushpin myPushPin = new MyCustomPushpin();
    myPushPin.Description = "Custom Pushpin";
    myPushPin.MouseEnter += new MouseEventHandler(myPushPin_MouseEnter);
    myPushPin.MouseLeave += new MouseEventHandler(myPushPin_MouseLeave);

    // set it to first found location
    myPushPin.Location = gr.Locations[0];
    // add it to location collection
    // which would be used to set the map's bound
    // Add the drawn point to the route layer.                   
var bounds = new LocationRect(myLocationColl);

void myPushPin_MouseLeave(object sender, MouseEventArgs e)
// when mouse moves out of the popup hide it
ContentPopup.Visibility = Visibility.Collapsed;

void myPushPin_MouseEnter(object sender, MouseEventArgs e)
//Show a popup with custom pushpin
MyCustomPushpin pin = sender as MyCustomPushpin;
if (pin != null)
    MapLayer.SetPosition(ContentPopup, pin.Location);
    MapLayer.SetPositionOffset(ContentPopup, new Point(15, -50));  
    ContentPopupText.Text = "My Pushpin";
    ContentPopup.Visibility = Visibility.Visible;

This is how it will look


Author: Nishant Rana

I love working in and sharing everything about Microsoft.NET technology !

Share your thoughts

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s