Getting Data from a Data Bound Map View Item's Context Menu - windows-phone-7

Question

I'm writing a Windows Phone application that shows a number of locations on a map. These positions have phone numbers, twitter accounts and websites associated with them.
What I want to do is add a context menu to the items that allows the user to open the websites, view twitter or call the phone number. However, with a MapItemsControl their is no easy way to get the current item.
I am looking for some way to do this in as painless a way as possible.
Some code:
<mi:MapItemsControl x:Name="mapPins" ItemsSource="{Binding Pushpins}">
<mi:MapItemsControl.ItemTemplate>
<DataTemplate>
<mi:Pushpin Location="{Binding Location}">
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu IsEnabled="{Binding ShowContext}" >
<TextBlock Opacity="{Binding Opacity, ElementName=image}" Text="Show Menu"/>
<TextBlock Opacity="{Binding Opacity, ElementName=image1}" Text="Open Webpage" Tap="EOpenWeb" />
<StackPanel Opacity="{Binding Opacity, ElementName=image2}" Orientation="Horizontal" Tap="ECallPhone">
<TextBlock Text="Call "/>
<TextBlock Text="{Binding Contact.FormattedPhone}"/>
</StackPanel>
<TextBlock Opacity="{Binding Opacity, ElementName=image3}" Text="On Twitter" Tap="EOpenTwitter" />
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
<StackPanel HorizontalAlignment="Stretch">
<TextBlock Foreground="{Binding Foreground}" Text="{Binding Name}" d:LayoutOverrides="HorizontalAlignment"/>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Margin="0,-6" Visibility="{Binding ShowGlyphs}">
<TextBlock TextWrapping="Wrap" Text="{Binding HereNow}" Visibility="{Binding ShowHere}" VerticalAlignment="Center" FontSize="{StaticResource PhoneFontSizeMediumLarge}" HorizontalAlignment="Left" Height="36" Width="48" TextAlignment="Center"/>
<Image x:Name="image" Height="48" Opacity="{Binding HasMenu}" Source="locationGlyphs/appbar.book.open.png" Stretch="Fill"/>
<Image x:Name="image1" Height="48" Opacity="{Binding HasWeb}" Source="locationGlyphs/appbar.link.png" Stretch="Fill" Width="48"/>
<Image x:Name="image2" Height="48" Opacity="{Binding HasPhone}" Source="locationGlyphs/appbar.phone.png" Stretch="Fill" Width="48"/>
<Image x:Name="image3" Height="48" Opacity="{Binding HasTwitter}" Source="locationGlyphs/appbar.twitter.bird.png" Stretch="Fill" Width="48"/>
</StackPanel>
</StackPanel>
</mi:Pushpin>
</DataTemplate>
</mi:MapItemsControl.ItemTemplate>
</mi:MapItemsControl>
That details how the objects are drawn to the map. The Pushpins list is just an Observable Collection of my data.
If this was a ListBox I could simply use the SelectedItem or similar to resolve this, but that doesn't seem an option for MapItemsControl. Has anyone managed to do this successfully? How?

Answer 1

You need to somehow react to the tap on the pushpin. You have a contextmenu and you clearly need to go that way at the moment. needs to have a tap event handler attached:
<mi:Pushpin
Location="{Binding Location}" Tap="Pushpin_Tap">
Pushpin_Tap event handler needs to be managed similar to this:
private void Pushpin_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
var _ppmodel = sender as Pushpin;
ContextMenu contextMenu =
ContextMenuService.GetContextMenu(_ppmodel);
contextMenu.DataContext = _viewModel.Pushpins.Where
(c => (c.Location
== _ppmodel.Location)).FirstOrDefault();
// this way you can find which pushpin/position was tapped by finding the
// one which has the same location in your Pushpins observable collection
if (contextMenu.Parent == null)
{
contextMenu.IsOpen = true;
}
}
I wrote about showing a context menu on pushpin tap on my blog, so if you wish you can go and read the whole story there.