Silverlight - Bing Maps - Customize Pushpin Style

Question

Hello,

How do I customize the style of a pushpin on the Bing Maps Silverlight control? I have reviewed the documentation shown here (http://www.microsoft.com/maps/isdk/silverlightbeta/#MapControlInteractiveSdk.Tutorials.TutorialCustomPushpin). However, I am programmatically adding a variable number of Pushpins. Ideally, I would like to be able to set the style of each pushin, but I do not know how.

Can someone show me how?

Thank you!

Answer 1

You have 2 ways to go:

(1) Create any UIElement to pass into PushPinLayer.AddChild. The AddChild method will accept and any UIElement, such as an image in this case:

MapLayer m_PushpinLayer = new MapLayer();
Your_Map.Children.Add(m_PushpinLayer);
Image image = new Image();
image.Source = ResourceFile.GetBitmap("Images/Me.png", From.This);
image.Width = 40;
image.Height = 40;
m_PushpinLayer.AddChild(image,
    new Microsoft.Maps.MapControl.Location(42.658, -71.137),  
        PositionOrigin.Center);

(2) Create a native PushPin objects to pass into PushpinLayer.AddChild, but first set it's Template property. Note that PushPin's are ContentControls, and have a Template property that can be set from a Resource defined in XAML:

MapLayer m_PushpinLayer = new MapLayer();
Your_Map.Children.Add(m_PushpinLayer);
Pushpin pushpin = new Pushpin();
pushpin.Template = Application.Current.Resources["PushPinTemplate"]  
    as (ControlTemplate);
m_PushpinLayer.AddChild(pushpin,
    new Microsoft.Maps.MapControl.Location(42.658, -71.137),  
        PositionOrigin.Center);


<ResourceDictionary
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
    <ControlTemplate x:Key="PushPinTemplate">
        <Grid>
            <Ellipse Fill="Green" Width="15" Height="15" />
        </Grid>
    </ControlTemplate>
</ResourceDictionary>

Good luck,
Jim McCurdy

Face To Face Software, and YinYangMoney

Answer 2

For a more complete example and explaination of how to customise the new Pushpin object try : Getting started with the Bing Maps Silverlight Control

Answer 3

I would do this by creating a layer and then adding my push pins to that layer.

// during initial load
MapLayer lay = new MapLayer();
MapControl.Children.Add(lay);


// for each pushpin you want to add
Image image = new Image();
// this assumes you have an "Images" folder on the root of your host web application
image.Source = new BitmapImage(new Uri(App.Current.Host.Source, "../Images/PushPin.png"));
var lat = 40.4d;
var long = -81.8d;
Location location = new Location(lat, long, 0d);

//Define the image display properties
image.Opacity = 1.0;
image.Stretch = Stretch.None;

// Center the image around the location specified
PositionOrigin position = PositionOrigin.Center;

//Add the image to the defined map layer
lay.AddChild(image, location, position);