Pushpin-Styles in Bing Maps for the Windows Phone

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

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

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

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

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

About these ads
This entry was posted in Bing Maps, Silverlight, Windows Phone 7 and tagged , , , , . Bookmark the permalink.

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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