Since I have heard this question several times in the last couple of days, I wanted to provide a quick walk-through on some of the options to style the pushpins in Bing Maps for the Windows Phone 7.

1. Default Style

By default the Windows Phone uses a pushpin with a black background and white text.

Image may be NSFW.
Clik here to view.

2. Changing Colours in XAML

You can easily set background and foreground colour by setting additional properties in XAML or in the code behind. Let’s start with XAML:

<my:Pushpin Name=”pin2″
                         Location=”51.461326390697344, -0.9261151403188705″
                         Content=”Bldg 2″
                         Background=”Orange”
                         Foreground=”Black” />

Image may be NSFW.
Clik here to view.

3. Changing Colours in the Code Behind

The same could be done in code behind as well:

Dim myPin As New Pushpin
myPin.Location = New GeoCoordinate(51.463064333696117,
                                                                     -0.92445217072963715)
myPin.Content = “5”
myPin.Background = New SolidColorBrush(Colors.White)
myPin.Foreground = New SolidColorBrush(Colors.Blue)

Image may be NSFW.
Clik here to view.

4. Changing the Complete Style

Since the pushpin control is defined entirely in XAML you can obviously also do some more customization by editing the template of the pushpin-control. The XAML-code of the default style is:

<ControlTemplate x:Key=”PushpinControlTemplate” TargetType=”m:Pushpin”>
  <Grid x:Name=”ContentGrid”>
    <StackPanel Orientation=”Vertical”>
      <Grid Background=”{TemplateBinding Background}”
                                            HorizontalAlignment=”Left”
                                            MinHeight=”31″
                                            MinWidth=”29″>
        <ContentPresenter HorizontalAlignment=”Center”
                                           Content=”{TemplateBinding Content}”
                                           ContentTemplate=”{TemplateBinding ContentTemplate}”
                                           Margin=”4″/>
      </Grid>
        <Polygon Fill=”{TemplateBinding Background}”
                                     Points=”0,0 29,0 0,29″
                                     Width=”29″
                                     Height=”29″
                                     HorizontalAlignment=”Left”/>
    StackPanel>
  </Grid>
ControlTemplate>

If we wanted to have a circle instead of the polygon, we could modify it for example like this:

<ControlTemplate x:Key=”PushpinControlTemplate1″ TargetType=”m:Pushpin”>
  <Grid x:Name=”ContentGrid” Width=”34″ Height=”34″ >
    <StackPanel Orientation=”Vertical” >
      <Grid MinHeight=”31″ MinWidth=”29″ Margin=”0″>
        <Ellipse Fill=”#FFFF7F00″
                       Margin=”1″
                       HorizontalAlignment=”Center”
                       VerticalAlignment=”Center”
                       Width=”30″
                       Height=”30″
                       Stroke=”White”
                       StrokeThickness=”3″/>
        <ContentPresenter HorizontalAlignment=”Center”
                                           Content=”{TemplateBinding Content}”
                                           ContentTemplate=”{TemplateBinding ContentTemplate}”
                                           Margin=”4″/>
      </Grid>
    </StackPanel>
  </Grid>
</ControlTemplate>

Once we have defined such a template for example in the App.xaml file we can then assign it to the object in our MainPage.xaml

<my:Pushpin Name=”pin3″
                         Location=”51.461680669063874, -0.9252568334341049″
                         Content=”3″
                         Template=”{StaticResource PushpinControlTemplate1}”
                         Margin=”-17,0,0,-17″  />

Image may be NSFW.
Clik here to view.

5. Using Images as Pushpins

While the pushpin-control doesn’t have a property to assign an image to it, you can use the same method as mentioned in 4 to define XAML that embeds an image.

<ControlTemplate x:Key=”PushpinControlTemplate2″
                                 TargetType=”m:Pushpin”>
    <Grid x:Name=”ContentGrid”
               Width=”32″
               Height=”32″
               Margin=”0″>
        <Image Source=”pushpin.png” Stretch=”Fill”/>
    </Grid>
</ControlTemplate>

And then we can use the new ControlTemplate in our MainPage.xaml again.

<my:Pushpin Name=”pin4″
                         Location=”51.46238587536243, -0.9245433658361435″
                         Template=”{StaticResource PushpinControlTemplate2}” 
                         Margin=”-16,0,0,-5″ />

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.