Question

When using the Bing map control my app adds an overlay on which to draw position markers as ellipses. Each ellipse is wired to a tap handler which works as expected in the WP7 emulator. Sadly this does not seem to be the case on HTC hardware – the map itself seems to grab all input. Does anyone know how I can fix this. Better still is there a working example with interactive layers?

Thx++

Answer 1

If you create a new windows phone 7.1 silverlight application using the default template in Visual Studio 2010, then just copy the following into the MainPage.xaml and MainPage.cs files. You will need to reference the System.Device and Microsoft.Phone.Controls.Maps Dlls as well. This should allow you to click on the ellipses. I have tested it on two different WP7 phones and it works fine.

Xaml

<phone:PhoneApplicationPage 
    x:Class="SampleMapApp.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"
    xmlns:maps="clr-namespace:Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.Controls.Maps"
    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">

    <phone:PhoneApplicationPage.Resources>
        <DataTemplate x:Name="EllipseTemplate">
            <maps:Pushpin Location="{Binding}" Tap="Pushpin_Tap">
                <maps:Pushpin.Template>
                    <ControlTemplate>
                        <Ellipse Width="15" Height="15" Stroke="White" StrokeThickness="2">
                            <Ellipse.RenderTransform>
                                <TranslateTransform X="-5" Y="5"/>
                            </Ellipse.RenderTransform>
                            <Ellipse.Fill>
                                <SolidColorBrush Color="DarkBlue" Opacity="0.8"/>
                            </Ellipse.Fill>
                        </Ellipse>
                    </ControlTemplate>
                </maps:Pushpin.Template>
            </maps:Pushpin>
        </DataTemplate>
    </phone:PhoneApplicationPage.Resources>

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="5">
            <TextBlock Text="Sample Map Application" Style="{StaticResource PhoneTextNormalStyle}"/>
        </StackPanel>

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="0">
            <maps:Map>
                <maps:MapLayer>
                    <maps:MapItemsControl ItemsSource="{Binding Locations}" ItemTemplate="{StaticResource EllipseTemplate}"/>
                </maps:MapLayer>
                <maps:Pushpin Location="{Binding CurrentLocation, Mode=TwoWay}" Content="{Binding CurrentLocation, Mode=TwoWay}"/>
            </maps:Map>
        </Grid>
    </Grid>

</phone:PhoneApplicationPage>

CS

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

namespace SampleMapApp {
    public partial class MainPage : PhoneApplicationPage {
        // Constructor
        public MainPage() {
            InitializeComponent();
            Locations = new ObservableCollection<GeoCoordinate>() {
                new GeoCoordinate(-56, 73),
                new GeoCoordinate(-14, 120),
                new GeoCoordinate(48, -133),
                new GeoCoordinate(-2, 11),
                new GeoCoordinate(0, 40),
                new GeoCoordinate(-78, -85),
            };
            CurrentLocation = Locations[0];
            DataContext = this;
        }

        public ObservableCollection<GeoCoordinate> Locations { get; set; }

        #region CurrentLocation
        public GeoCoordinate CurrentLocation {
            get { return (GeoCoordinate) GetValue(CurrentLocationProperty); }
            set { SetValue(CurrentLocationProperty, value); }
        }

        public static readonly DependencyProperty CurrentLocationProperty =
           DependencyProperty.Register("CurrentLocation", typeof(GeoCoordinate), typeof(MainPage), new PropertyMetadata(null));
        #endregion

        private void Pushpin_Tap(object sender, GestureEventArgs e) {
            CurrentLocation = (sender as Pushpin).Location;
        }
    }
}