修改 Bing 地图锚点

Question

我正在开发 C#/XAML 通用 Windows 商店应用程序，我需要在 Bing 地图控件上绘制自定义控件。问题是我找不到任何方法来修改锚点，默认情况下是 Point(0,0)，它将控件锚定到左上角。我需要在 Windows Phone 中与 MapControl.SetNormalizedAnchorPoint 等效的东西。我相信这是可能的，因为 Bing 地图应用程序控件在左下角有一个锚点。是怎么做到的？

编辑： 这是我的自定义控件的样子。我想要的是让它锚定到左下角（蓝色圆圈）的位置，而不是默认的左上角（红色圆圈）。

这是它在地图控件上的样子，它锚定到红色圆圈而不是蓝色圆圈。

这是我的代码

public void AddPushpin(BasicGeoposition location, string title, string subtitle = "")
        {
            var pin = new PinControl(title, subtitle);
            pin.ApplyTemplate();
            pin.UpdateLayout();
            MapLayer.SetPosition(pin, location.ToLocation());
            _pinLayer.Children.Add(pin);
        }

这是冗长的 XAML

<UserControl x:Class="ToulouseUniversal.CustomControls.PinControl"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:local="using:ToulouseUniversal.CustomControls"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         mc:Ignorable="d"
         d:DesignHeight="100"
         d:DesignWidth="200">

<Grid>

    <Grid x:Name="LayoutRoot"
          VerticalAlignment="Bottom">
        <Polygon x:Name="labelPointer"
                 Points="0,0 0,0.5 15,15.5 15,0"
                 Margin="-15,0,0,0"
                 Grid.ColumnSpan="2"
                 Fill="{StaticResource TisseoBrush1}"
                 HorizontalAlignment="Left"
                 VerticalAlignment="Bottom" />
        <Polygon Points="0,0 0,0.5 15,15.5 15,0"
                 Margin="-15,0,0,0"
                 Grid.ColumnSpan="2"
                 Fill="Black"
                 Opacity="0.3"
                 HorizontalAlignment="Left"
                 VerticalAlignment="Bottom" />
        <Grid Margin="-15,0,0,15">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Rectangle Height="4"
                       VerticalAlignment="Bottom"
                       Margin="14.5,-1,0.5,-3.5"
                       Grid.ColumnSpan="2">
                <Rectangle.Fill>
                    <LinearGradientBrush EndPoint="0.5,1"
                                         StartPoint="0.5,0">
                        <GradientStop Color="Black"
                                      Offset="0" />
                        <GradientStop Offset="1" />
                    </LinearGradientBrush>
                </Rectangle.Fill>
            </Rectangle>
            <Rectangle x:Name="labelGrid"
                       Fill="{StaticResource TisseoBrush1}"
                       RadiusX="0"
                       RadiusY="0"
                       Grid.ColumnSpan="2"/>
            <Rectangle Fill="White"
                       Opacity="0.2"
                       Width="3"
                       HorizontalAlignment="Left" />
            <Rectangle Fill="White"
                       Grid.ColumnSpan="2"
                       Opacity="0.2"
                       Width="3"
                       HorizontalAlignment="Right" />
            <Grid>
                <BitmapIcon UriSource="ms-appx:///Assets/Icons/appbar.transit.bus.png"
                            Width="40" />
            </Grid>
            <StackPanel Grid.Column="1">
                <TextBlock x:Name="labelTitle"
                           Text="A stop"
                           Margin="6,3,9,0"
                           Foreground="White"
                           TextWrapping="Wrap"
                           MaxWidth="180"
                           FontSize="20"
                           FontWeight="SemiBold" />
                <TextBlock x:Name="labelSubtitle"
                           Text="connecting"
                           Margin="6,0,9,6"
                           Foreground="White"
                           TextWrapping="Wrap"
                           FontSize="12"
                           MaxWidth="180"
                           FontWeight="Light" />
            </StackPanel>


        </Grid>
    </Grid>
</Grid>

Answer 1

根据您要实现的目标，共享更多 XAML 代码或至少部分代码（如果您正在创建图钉对象以及相关选项）可能会很有趣。

无论如何，为了控制锚点，能够将自定义控件用作图钉可能会很有趣，所以基本上，如果您使用 Grid 作为表示图钉的根控件，则可以显示多个还可以使用子控件的边距在网格中移动它们。

如果你看看这里的文章，你会看到它是如何做到的：

http://blogs.msdn.com/b/bingdevcenter/archive/2014/06/24/using-maps-in-universal-apps.aspx

看到代码中有趣的部分是：

public void AddPushpin(BasicGeoposition location, string text)
{
    #if WINDOWS_APP
    var pin = new Pushpin()
    {
        Text = text
    };
    MapLayer.SetPosition(pin, location.ToLocation());
    _pinLayer.Children.Add(pin);
    #elif WINDOWS_PHONE_APP
    var pin = new Grid()
    {
        Width = 24,
        Height = 24,
        Margin = new Windows.UI.Xaml.Thickness(-12)
    };

    pin.Children.Add(new Ellipse()
    {
        Fill = new SolidColorBrush(Colors.DodgerBlue),
        Stroke = new SolidColorBrush(Colors.White),
        StrokeThickness = 3,
        Width = 24,
        Height = 24
    });

    pin.Children.Add(new TextBlock()
    {
        Text = text,
        FontSize = 12,
        Foreground = new SolidColorBrush(Colors.White),
        HorizontalAlignment = Windows.UI.Xaml.HorizontalAlignment.Center,
        VerticalAlignment = Windows.UI.Xaml.VerticalAlignment.Center
    });

    MapControl.SetLocation(pin, new Geopoint(location));
    _map.Children.Add(pin);
    #endif
}

Answer 2

Here 是一篇很好的博文，解决了您在 Bing 地图的自定义控件中模拟锚点的问题。

最有趣的部分：

在 XAML 必应地图控件中偏移图钉或自定义的最简单方法 像图钉一样覆盖在地图上的 UIElement 是为了指定 图钉或 UIElement 上的负边距值

在您的情况下，在 LayoutRoot Grid 上应用负边距就足够了。