Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Binding a MapIcon in XAML

I'm trying to use a MapControl, showing a MapIcon for the currently viewed location.

In my XAML, I've got:

<Maps:MapControl x:Name="MapControl" ZoomLevel="14" Center="{Binding Geopoint, Mode=OneWay}" Margin="-12,0,-12,0" Tapped="directions_Click" Height="200" MapServiceToken="{StaticResource BingMapsKey}" PanInteractionMode="Disabled" RotateInteractionMode="Disabled">
    <Maps:MapIcon Location="{Binding Geopoint}" Title="{Binding AttractionName}" />
</Maps:MapControl>

The items that I'm binding to are being used elsewhere on the page (e.g. the map centres on the correct location), but the MapIcon does not show, nor give any hint as to why?

As far as I can see from MSDN I should be able to bind in this manner (although the example specifically for <MapIcon>s is adding them dynamically, it does show other XAML objects being bound directly in the XAML). Am I marking up the XAML wrong here?

like image 685
Rowland Shaw Avatar asked Feb 01 '16 13:02

Rowland Shaw


1 Answers

I've ended up building my own pushpin, via XAML:

 <Maps:MapControl x:Name="MapControl" ZoomLevel="14" Center="{Binding Geopoint, Mode=OneWay}" Margin="-12,0,-12,0" Tapped="directions_Click" Height="200" MapServiceToken="{StaticResource BingMapsKey}" PanInteractionMode="Disabled" RotateInteractionMode="Disabled">
     <Grid HorizontalAlignment="Left" Maps:MapControl.Location="{Binding Geopoint}" Maps:MapControl.NormalizedAnchorPoint="0,1">
         <Grid.RowDefinitions>
             <RowDefinition Height="*" />
             <RowDefinition Height="*" />
         </Grid.RowDefinitions>

         <Border Background="{ThemeResource SystemControlBackgroundAccentBrush}" Grid.Row="0">
             <TextBlock Text="{Binding AttractionName}" HorizontalAlignment="Left" />
         </Border>
         <Polygon Points="0,0 12.5,0 0,20" Fill="{ThemeResource SystemControlBackgroundAccentBrush}" StrokeThickness="0" Grid.Row="1" />
     </Grid>
 </Maps:MapControl>

This allows the position to be bound (via Maps:MapControl.Location="{Binding Geopoint}") and the relative position can be set so the point remains at the correct location (via Maps:MapControl.NormalizedAnchorPoint="0,1" - i.e. bottom left of the pin content)

Whilst this isn't using a MapIcon, This gives a look and feel to how our app showed locations with Windows Phone 7.x/8.x so may be helpful for others wanting similar.

like image 166
Rowland Shaw Avatar answered Oct 19 '22 23:10

Rowland Shaw