CODEWITHSUNDEEP
windows-phone-7bing-maps
Roger
Roger

Reputation: 2135

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

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,

Upvotes: 2

Views: 1330

Answers (2)

AnthonyWJones
AnthonyWJones

Reputation: 189555

The Pushpin has a property called PositionOrigin which specifies where the actual location point is relative to the Pushpin graphic. For example setting PositionOrigin="0.5, 0.5" would cause the whole pushpin element to center over the actual location.

I'm not sure if that is useful to you since the wording of your question implies that you want to keep the existing Pushpin graphical but translate the a usercontrol placed in the Content.

Upvotes: 6

Derek Lakin
Derek Lakin

Reputation: 16319

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>

Upvotes: 3

Related Questions