在 XAML 中绑定 MapIcon

Question

我正在尝试使用 MapControl，显示当前查看位置的 MapIcon。

在我的 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">
    <Maps:MapIcon Location="{Binding Geopoint}" Title="{Binding AttractionName}" />
</Maps:MapControl>

我绑定的项目正在页面上的其他地方使用（例如，地图中心位于正确的位置），但 MapIcon 没有显示，也没有给出任何提示？

就我所见from MSDN 而言，我应该能够以这种方式绑定（尽管专门针对<MapIcon>s 的示例是动态添加它们，但它确实显示了直接在XAML 中绑定的其他XAML 对象）。我在这里标记 XAML 是否有误？

Answer 1

我最终通过 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>

这允许绑定位置（通过Maps:MapControl.Location="{Binding Geopoint}"）并且可以设置相对位置，以便点保持在正确的位置（通过Maps:MapControl.NormalizedAnchorPoint="0,1" - 即图钉内容的左下角）

虽然这没有使用 MapIcon，但它可以让我们的应用在 Windows Phone 7.x/8.x 中显示位置的外观和感觉，因此可能对其他想要类似的人有所帮助。

Answer 2

正如您所提到的，Location 和 Title 可以绑定到 Geopoint 和 AttractionName。但要在 MapControl 上显示 MapIcon，我们需要以编程方式将 MapIcon 添加到其 MapElements 集合中。

例如：

在MapControl 的Loaded 事件中。

private void MapControl_Loaded(object sender, RoutedEventArgs e)
{
    MapControl.MapElements.Add(MyMapIcon);
}

在此之后，MapIcon 可以像图像一样显示在MapControl 上。但是你会发现MapControl的左上角有一串类名。

这是因为您将 MapIcon 添加为 MapControl 的隐式子级。相当于在MapItemsControl中添加MapIcon，如下XAML代码。

<Maps:MapControl x:Name="MapControl" ZoomLevel="14" Center="{Binding Geopoint, Mode=OneWay}" Margin="-12,0,-12,0"  Height="200" PanInteractionMode="Disabled" RotateInteractionMode="Disabled"   Loaded="MapControl_Loaded">
    <Maps:MapItemsControl>
        <Maps:MapIcon x:Name="MyMapIcon" Location="{Binding Geopoint}" Title="{Binding AttractionName}" />
    </Maps:MapItemsControl>
</Maps:MapControl>

MapItemsControl 可以通过将 XAML 用户界面元素（例如 Button、HyperlinkBut​​ton 或 TextBlock）添加为 MapControl 的子项来显示它们。 MapIcon 不能显示在 MapControl 上，所以它显示了它的类名。

作为一种解决方法，我们可以将MapIcon 放入Resources 以解决问题。 例如：

<Page.Resources>
    <Maps:MapIcon x:Name="MyMapIcon" Location="{Binding Geopoint}" Title="{Binding AttractionName}" />
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <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" Loaded="MapControl_Loaded">
    </Maps:MapControl>
</Grid>

Answer 3

我在 UWP 中遇到了与 MapControl 类似的问题。我的解决方案是使用MapControl 作为ItemsControl 并显示元素集合。以下代码仅显示图像，但您可以将 DataTemplate 的内容包装在 Grid 中并显示 Image 和 TextBlock 例如。

    <Maps:MapControl>                        
        <Maps:MapItemsControl x:Name="MapItems" ItemSource="{Binding Items}">
            <Maps:MapItemsControl.ItemTemplate>
                <DataTemplate x:DataType="m:model">
                    <Image Source="{x:Bind ImgSource}" Maps:MapControl.Location="{x:Bind Location}" Width="50" Height="50" Margin="-25,-50,0,0" />
                </DataTemplate>
            </Maps:MapItemsControl.ItemTemplate>
        </Maps:MapItemsControl>
    </Maps:MapControl>

希望这会有所帮助！