WP7 Bing Map Pushpin - how to configure the location of a custom button?

Question

Well, a simple question, but I have not yet found a clearly easy answer! I have a Windows Phone 7 application with map integration with a set of buttons on the map. The button is normal (ellipse / circle only).

Unfortunately, the location of the custom button is not accessible from geolocation. when you zoom in, it gets closer and closer to the exact one, and the farthest of them is at the most magnified level.

I think this is a bias problem. I looked at RenderTransformOnOrigin, but that didn't help me.

Thanks in advance, here is the corresponding 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 PushPin class has a PositionOrigin property that indicates where the location point is relative to the pin's visual representation.

The default style uses "BottomLeft" because of its shape; it has a snap to a point at its lower left extremity.

However, you are using a circle, so you need to move PositionOrigin to the center. I would also recommend using a style, not just a template for the "style" of your pin 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 will become: -

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