Making a custom Windows Phone Bing Maps PushPin from an image

Making a custom Windows Phone Bing Maps PushPin from an image

Standard pushpins that can be used on a Bing map can get rather boring. Most of the applications which have certain artwork and styling need to use custom pushpins to display different things on a map. In this article, I’ll show how to quickly create a custom pushpin from Expression Design to the application

Let’s start from a design application such as Expression Design or a free Paint.NET. Create an image that will be used as a pushpin. I created a pushpin similar to the native ones, just changing the colors and writing “igrali pin” on it, to make it customized.


Now, save it as a PSD or PNG file, so you can import it to your Visual Studio or Blend project. Create a new project in either of the applications mentioned above, and define the MainPage.xaml:

    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"/>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <mapss:Map Margin="0,0,8,0" CredentialsProvider="Your credentials” d:LayoutOverrides="Height" Name="map" />

Now, you need to import the image you created earlier:


In my case, it’s called Layer 1.png. Now, we need to define the ControlTemplate for the pushpin inside the page or inside the app. I did it inside the page resources:

        <ControlTemplate x:Key="PushpinControlTemplate1" TargetType="mapss:Pushpin">
            <Grid Name="contentGrid" Height="64" HorizontalAlignment="Center" VerticalAlignment="Center">
                <Image x:Name="Layer_1" Height="64" Source="pin_Images/Layer 1.png"/>

Now, in order to pin this pushpin to map and show it, I hardcoded the coordinates and did it in MainPage_Loaded event handler:

void  MainPage_Loaded(object sender, RoutedEventArgs e)  
    Pushpin pin1 = new Pushpin();
    pin1.Location = new GeoCoordinate(45.805025, 15.978697);
    pin1.Template = (ControlTemplate)(this.Resources["PushpinControlTemplate1"]);

    map.SetView(pin1.Location, 10);

The most important part is where I set the pin template:

pin1.Template = (ControlTemplate)(this.Resources["PushpinControlTemplate1"]);  

If the template was a part of the application resources, you would write:

pin1.Template = (ControlTemplate)(Application.Current.Resources["PushpinControlTemplate1"]);  

If you prefered, you could have opened the project in Blend and then instead of using an image, do all the drawing inside the content grid:

<ControlTemplate x:Key="PushpinControlTemplate1" TargetType="mapss:Pushpin">  
                <Grid Name="contentGrid" Height="64" HorizontalAlignment="Center" VerticalAlignment="Center">


Final result is this:


I hope this helps :)

Igor Ralic

igor ralic

View Comments
Microsoft Certified Solutions Developer: Windows Store Apps in C#