WP7 Bing Map Pushpin - how to tweak the location of the custom pushpin?

Question

Ok, simple question, but I haven't found the obviously easy answer yet! I have a Windows Phone 7 app with map integration, with a set of pushpins on the map. The pushpin is custom (just a ellipse/circle).

Unfortunately, the location of the custom pushpin is "off" from the geolocation. when you zoom in, it gets closer and closer to accurate, and is the farthest off in the most zoomed out level.

I think this is an offset issue. I looked at RenderTransformOnOrigin, but it didn't appear to help me.

Thanks in advance, here is the relevant code:

<phone:PhoneApplicationPage.Resources>
    <ControlTemplate x:Key="PushpinControlTemplateBlue" TargetType="my2:Pushpin">
        <Grid x:Name="ContentGrid" Width="34" Height="34" RenderTransformOrigin="0.5,0.5">
            <StackPanel Orientation="Vertical" >
                <Grid MinHeight="31" MinWidth="29" Margin="0">
                    <Ellipse Fill="Blue"
                            Margin="1"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            Width="20"
                            Height="20"
                            Stroke="White"
                            StrokeThickness="3" />
                    <ContentPresenter HorizontalAlignment="Center"
                                Content="{TemplateBinding Content}"
                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                Margin="4"/>
                </Grid>
            </StackPanel>
        </Grid>
    </ControlTemplate>
</phone:PhoneApplicationPage.Resources>


    <my1:Map Canvas.Left="16" Canvas.Top="13" CopyrightVisibility="Collapsed" CredentialsProvider="AtqOU-L_liZekzqR0mEG7dGDwswKnnXSoSmsVs6eGtAe7S9NZDiAtpAd1vgPfhxD" Height="521" LogoVisibility="Collapsed" Name="mapMain" ScaleVisibility="Collapsed" VerticalContentAlignment="Top" Visibility="Visible" Width="446" ZoomBarVisibility="Collapsed" BorderThickness="1" Background="Tomato">
        <my2:Pushpin Name="pin1"
                 Location="51.461326390697344, -0.9261151403188705"
                 Content=""
                 Template="{StaticResource PushpinControlTemplateBlue}" />
    </my1:Map>

Answer 1

A the PushPin class has a PositionOrigin property which indicates where the location point is relative the visual representation of the pin.

The default style use "BottomLeft" because of its shape it has a tick funneling to a point at its bottom left extremity.

However you are using a circle hence you would need move the PositionOrigin to the center. I would also recommend that you use a style rather than simply a template to "style" your push pin:-

    <ControlTemplate x:Key="PushpinControlTemplate" TargetType="my2:Pushpin">
        <Grid x:Name="ContentGrid" Width="34" Height="34" RenderTransformOrigin="0.5,0.5">
            <StackPanel Orientation="Vertical" >
                <Grid MinHeight="31" MinWidth="29" Margin="0">
                    <Ellipse Fill="{TemplateBinding Background}"
                            Margin="1"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            Width="20"
                            Height="20"
                            Stroke="{TemplateBinding Foreground}"
                            StrokeThickness="3" />
                    <ContentPresenter HorizontalAlignment="Center"
                                Content="{TemplateBinding Content}"
                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                Margin="4"/>
                </Grid>
            </StackPanel>
        </Grid>
    </ControlTemplate>

<Style TargetType="my2:Pushpin" x:Key="PushpinControlTemplateBlue">
    <Setter Property="Template" Value="{StaticResource PushpinControlTemplate}" />
    <Setter Property="PositionOrigin" Value="Center" />
    <Setter Property="Background" Value="Blue" />
    <Setter Property="Foreground" Value="White" />
    <Setter Property="FontSize" Value="18" />
</Style>

Now your Xaml becomes:-

 <my2:Pushpin Name="pin1"
             Location="51.461326390697344, -0.9261151403188705"
             Content=""
             Style="{StaticResource PushpinControlTemplateBlue}" />