Working with Pushpins in the Map Control

To add a basic pushpin, create the pushpin object and add it as a child to the map. The following example allows the user to push a button that adds a pushpin to the center of the current map view.

<phone:PhoneApplicationPage 
    x:Class="WindowsPhoneApplication1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True" xmlns:my="clr-namespace:Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.Controls.Maps">

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <my:Map Height="427" HorizontalAlignment="Left" Margin="12,6,0,0" Name="map1" VerticalAlignment="Top" Width="438" />            
            <Button Content="Add Center Pushpin" Height="72" HorizontalAlignment="Left" Margin="90,467,0,0" Name="button1" VerticalAlignment="Top" Width="297" Click="button1_Click" />
        </Grid>
    </Grid>

</phone:PhoneApplicationPage>

using System.Windows;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Controls.Maps;
using System.Device.Location;

namespace WindowsPhoneApplication1
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
        }
        
        private GeoCoordinate mapCenter;

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            // Retrieve the center of the current map view.
            mapCenter = map1.Center;

            // Create a pushpin to put at the center of the view.
            Pushpin pin1 = new Pushpin();
            pin1.Location = mapCenter;
            map1.Children.Add(pin1);
        }
    }
}

Change the Pushpin Icon

Using an Image as the Pushpin Icon

To add a pushpin image, first create an image layer and then add your pushpin image to the layer as shown in the following code.

using System;
using System.Windows;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Controls.Maps;
using System.Device.Location;
using System.Windows.Media;
using System.Windows.Controls;

namespace WindowsPhoneApplication1
{
    public partial class MainPage : PhoneApplicationPage
    {
        MapLayer imageLayer;

        
        public MainPage()
        {
            InitializeComponent();

            //Create a layer to contain the pushpin images.
            imageLayer = new MapLayer();
            map1.Children.Add(imageLayer);
        }

        
        private GeoCoordinate mapCenter;

        private void button1_Click(object sender, RoutedEventArgs e)
        {
          
            // Retrieve the center of the current map view.
            mapCenter = map1.Center;

            // Define the image to use as the pushpin icon.
            Image pinImage = new Image();

            //Define the URI location of the image.
            pinImage.Source = new System.Windows.Media.Imaging.BitmapImage(new Uri("bluepushpin.png", UriKind.Relative));
            
            //Define the image display properties.
            pinImage.Opacity = 0.8;
            pinImage.Stretch = System.Windows.Media.Stretch.None;

            // Put the image at the center of the view.
            PositionOrigin position = PositionOrigin.Center;
            imageLayer.AddChild(pinImage, mapCenter, position);

        }
    }
}

Modifying the Default Pushpin Icon

To modify the Windows Phone pushpin style, first modify your App.xaml code as shown in the following code example to include the XAML for the default style. Give this style a key name so that it can be referenced within your MainPage.xaml.cs code.

<Application 
    x:Class="WindowsPhoneApplication1.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"       
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:m="clr-namespace:Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.Controls.Maps"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone">

    <!--Application Resources-->
    <Application.Resources>
        <Style TargetType="m:Pushpin" x:Key="PushpinStyle">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate 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>
                </Setter.Value>
            </Setter>
            <Setter Property="Background" Value="Black" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="FontSize" Value="18" />
        </Style>

    </Application.Resources>

    <Application.ApplicationLifetimeObjects>
        <!--Required object that handles lifetime events for the application-->
        <shell:PhoneApplicationService 
            Launching="Application_Launching" Closing="Application_Closing" 
            Activated="Application_Activated" Deactivated="Application_Deactivated"/>
    </Application.ApplicationLifetimeObjects>

</Application>

Next, modify this XAML to customize the default style. For example, the following XAML creates a simple red circle pushpin icon.

<Application 
    x:Class="WindowsPhoneApplication3.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"       
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:m="clr-namespace:Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.Controls.Maps"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone">

    <!--Application Resources-->
    <Application.Resources>
        <Style TargetType="m:Pushpin" x:Key="PushpinStyle">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="m:Pushpin">
                        <Ellipse Fill="Red" Width="29" Height="29" HorizontalAlignment="Left"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Background" Value="Black" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="FontSize" Value="18" />
        </Style>

    </Application.Resources>

    <Application.ApplicationLifetimeObjects>
        <!--Required object that handles lifetime events for the application-->
        <shell:PhoneApplicationService 
            Launching="Application_Launching" Closing="Application_Closing" 
            Activated="Application_Activated" Deactivated="Application_Deactivated"/>
    </Application.ApplicationLifetimeObjects>

</Application>

Finally, use the new pushpin style for your pushpin by setting the Style property of your pushpin. The pushpin creation code looks like the following.

// Create a pushpin to put at the center of the view.
            Pushpin pin1 = new Pushpin();
            pin1.Location = mapCenter;

            // Use the Windows Phone pushpin style from App.xaml.
            pin1.Style = (Style)(Application.Current.Resources["PushpinStyle"]);
            pin1.PositionOrigin = PositionOrigin.BottomLeft;


            // Add the pushpin to the map.
            map1.Children.Add(pin1);

Connecting Events to a Pushpin

On the Windows Phone, touch events are synonymous with mouse events. The following example shows how to display a custom XAML page when a pushpin is touched.

using System;
using System.Windows;
using System.Windows.Input;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Controls.Maps;
using System.Device.Location;

namespace WindowsPhoneApplication1
{
    public partial class MainPage : PhoneApplicationPage
    {
        public MainPage()
        {
            InitializeComponent();

            this.Loaded += new RoutedEventHandler(MainPage_Loaded);
        }

        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            
            Pushpin pin1 = new Pushpin();
            pin1.Location = new GeoCoordinate(33.0, -117.0);
            pin1.Content = "1";
            pin1.MouseLeftButtonUp += new MouseButtonEventHandler(pin1_MouseLeftButtonUp);
            map1.Children.Add(pin1);

            map1.SetView(pin1.Location, 10);
            
        }

        void pin1_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            NavigationService.Navigate(new Uri("/Page1.xaml", UriKind.Relative));
        }        
    }
}