在 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

我在 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>

希望对您有所帮助！

Answer 2

我最终构建了自己的图钉，通过 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 3

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

例如：

在Loaded事件中MapControl。

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

这样MapIcon就可以像图片一样在MapControl上显示了。但是你会发现MapControl的左上角有一串class的名字。

这是因为您将 MapIcon 添加为 MapControl 的隐式子项。相当于像下面的XAML代码一样在MapItemsControl中添加MapIcon

<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、HyperlinkButton 或 TextBlock，方法是将它们添加为 MapControl 的子元素。 MapIcon 无法在 MapControl 上显示，因此显示其 class 名称。

作为解决方法，我们可以将 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>

在 XAML 中绑定 MapIcon

Binding a MapIcon in XAML

xaml

bing-maps

uwp

uwp-maps