How should I handle click events on pushpins in my

Question

I'm about to add templated <Button> controls inside each of my Pushpins on my Map, in order to interact with the user clicking (er, touching) a pushpin. Is this the proper way to work with pushpins? I don't want to handle MouseDown and MouseUp and reinvent everything (and nobody should).

I just need confirmation.

Answer 1

Why dont you add an Invisible styled button inside the MapItemsControl.ItemTemplate and use Click on the button.

Answer 2

MouseLeftBUttonUp ? I have only the emulator and it works on my custom pushpin :

<Maps:MapItemsControl ItemsSource="{Binding Stores}">
                <Maps:MapItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Maps:Pushpin Location="{Binding Location}" MouseLeftButtonUp="Pushpin_MouseLeftButtonUp">
                            <Maps:Pushpin.Template>
                                <ControlTemplate TargetType="Maps:Pushpin">
                                    <Border BorderBrush="Black" BorderThickness="1" Background="MintCream" Width="32" Height="32" HorizontalAlignment="Center" VerticalAlignment="Center">
                                        <TextBlock Text="{Binding Store.Address}" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                    </Border>
                                </ControlTemplate>
                            </Maps:Pushpin.Template>
                        </Maps:Pushpin>
                    </DataTemplate>
                </Maps:MapItemsControl.ItemTemplate>
            </Maps:MapItemsControl>

Edit: After getting a real device I have tested my application and I can confirm that MouseLeftBUttonUp is a bad idea (and not recommended by Microsoft in the Performance tips)

instead you sould use Manipulation events:

<Maps:MapItemsControl ItemsSource="{Binding Stores}">
<Maps:MapItemsControl.ItemTemplate>
    <DataTemplate>
        <Maps:Pushpin Location="{Binding Location}" ManipulationStarted="Pushpin_ManipulationStarted">
            <Maps:Pushpin.Template>
                <ControlTemplate TargetType="Maps:Pushpin">
                    <Image Width="48" Height="48" Source="{Binding InventoryIcon}" />
                </ControlTemplate>
            </Maps:Pushpin.Template>
        </Maps:Pushpin>
    </DataTemplate>
</Maps:MapItemsControl.ItemTemplate>
</Maps:MapItemsControl>

Answer 3

If all you want is to be able to click/tap on each pushpin, add a MouseLeftButtonUp event to each pushpin you create. For example:

Microsoft.Phone.Controls.Maps.Pushpin pp = null;
System.Device.Location.GeoCoordinate loc = null;

pp = new Microsoft.Phone.Controls.Maps.Pushpin();
loc = new System.Device.Location.GeoCoordinate([Latitude], [Longitude]);

pp.Location = loc;
pp.Content = "Some Content";
pp.MouseLeftButtonUp += new MouseButtonEventHandler(Pushpin_MouseLeftButtonUp);

then you add

void Pushpin_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
     Microsoft.Phone.Controls.Maps.Pushpin tempPP = new Microsoft.Phone.Controls.Maps.Pushpin();

     tempPP = (Microsoft.Phone.Controls.Maps.Pushpin)sender;

     // you can check the tempPP.Content property

}