修改Bing地图锚点

时间:2015-01-29 23:07:18

标签: c# xaml windows-runtime bing-maps

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

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

enter image description here

这里是地图控件上的样子,它与红色圆圈相匹配,而不是蓝色。

enter image description here

这里是我的代码

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>

2 个答案:

答案 0 :(得分:0)

根据您要实现的目标,分享更多的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
}

答案 1 :(得分:0)

Here是一篇不错的博客文章解决您的问题,以模拟Bing地图自定义控件中的定位点。

最有趣的部分:

  

在XAML中,Bing Maps控制了抵消图钉或自定义的最简单方法   像图钉一样覆盖在地图上的UIElement是指定的   图钉或UIElement上的负边距值

在您的情况下,在 LayoutRoot 网格上应用负边距就足够了。