Modify Bing Maps Anchor Point

Question

I am working on a C#/XAML Universal Windows store app and I need to plot a custom control on a Bing map control. The problem is I cannot find any method to modify the anchor point which is by default Point(0,0) which anchor the control to upper left corner. I need something equivalent to MapControl.SetNormalizedAnchorPoint in Windows Phone. I believe it is possible since the Bing Maps app controls has an anchor point at the bottom left corner. How is it done?

Edit: Here's what my custom control looks like. What I want is for it to anchor to the location at the bottom left corner (blue circle) instead of the default top left (red circle).

enter image description here

Here what it looks like on the map control where it achors to the red circle instead of blue.

enter image description here

And here's my code behind

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);
        }

Here's the lengthy 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>

Nicolas Boonaert Nicolas Boonaert · Accepted Answer · 2015-01-29T23:12:37

Depending on what you're trying to achieve, it might be interesting to share more of your XAML code or at least the part of the code were you're creating the pushpin object as well as the associated option.

Anyway, in order to control the anchor, it might be interesting to be able to use custom control as a pushpin so basically, if you're using a Grid as the root control representing the pushpin, you can work to display multiple things and also work with the margin on children controls to move them in the Grid.

If you look at the article here, you will see how it can be done:

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

See the interesting part of the code is:

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
}

Modify Bing Maps Anchor Point

2 Answers