How to center a user Control inside Pushpin with Bing Maps for Windows Phone 7

Question

How do you get it to center the usercontrol on the point of the location of the pushpin, not inside and relative to the pushpin icon?

I tried aligning to the bottom and also giving a margin to the control.

Thanks,

Answer 1

Use a TranslateTransform in the RenderTransform to offset by half of the width and height of your content.

For example, in Car Finder (when it eventually passes certification), I use a crosshair icon to represent the user's current location, which is a 38x38 Path, so the offset is -19/-19:

<ControlTemplate x:Key="LocationPushpin" TargetType="maps:Pushpin">
    <Path Data="M50 0C22.43 0 0 22.43 0 50c0 27.569 22.43 50 50 50s50-22.431 50-50C100 22.43 77.57 0 50 0z M54.032 91.737V78.226h-8.064  v13.512C26.057 89.829 10.171 73.943 8.263 54.032h13.512v-8.064H8.263c1.909-19.911 17.794-35.796 37.705-37.705v13.511h8.064  V8.263c19.911 1.908 35.797 17.793 37.705 37.705H78.226v8.064h13.512C89.829 73.943 73.943 89.829 54.032 91.737z"
          Fill="#000000"
          Height="38"
          Stretch="Uniform"
          Width="38">
        <Path.RenderTransform>
            <TranslateTransform X="-19" Y="19" />
        </Path.RenderTransform>
    </Path>
</ControlTemplate>