Development and application of "Silverlight" Bing maps two: Custom pushpin callout Controls and dynamic Toolpa

Development and application of "Silverlight" Bing maps two: Custom pushpin callout Controls and dynamic Toolpanel

In the Bing Maps Silverlight control and provide us with the map Pushpin controls Pushpin, I have described his use in the article "Using Pushpin Layer (Pushpin layer) and Map layer (Maplayer)". This article mainly describes how to customize the Pushpin annotation control and some of his extensions, such as the implementation of Pushpin dynamic Toolpanel.

The design of the UI appearance of the Pushpin is not described in detail here, and the UI interface can be built quickly through blend. First introduced my implementation of the idea, through the path to build a pin callout control UI appearance, control overall layout using grid layout, in the grid container in the design of Pushpin UI appearance and need dynamic hint of the Toolpanel (using border layout design), The default is to hide the Toolpanel, control whether it appears in the background code through mouse events, and a TextBlock control that appears on the Pushpin callout. Here is the style that defines the Pushpin style:

Custom Pushpin Style

<style x:name= "Pushpinstyle" targettype= "Controls:pushpincontrol" >
<setter property= "Template" >
<Setter.Value>
<controltemplate targettype= "Controls:pushpincontrol" >
<grid x:name= "Grdroot" height= "Auto" width= "Auto" horizontalalignment= "Stretch" rendertransformorigin= "0,0" >
<Grid.RenderTransform>
<TransformGroup>
<scaletransform x:name= "_scaletransform" scalex= "1" scaley= "1"/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<path stretch= "Fill" opacity= "1" rendertransformorigin= "0.501,0.281" Data= "m0,-250l6.09909264359567",
-250c7.86508433137037,-249.883679757668 9.5771753004554,-249.696968148304 11.2361413649071,
-249.457603405072 24.5078612249376,-247.542676877067 34.3794798686271,
-242.257907887612 41.2465583494687,-237.283319185337 44.6800986937064,
-234.796020219885 47.3625022581612,-232.386267374123 49.3432151487858,
-230.514059732522 50.3335754087938,-229.577954004373 51.1485091856508,
-228.776236246195 51.7942001036199,-228.166407297221 56.0964631917223,
-224.103097789728 68.1963801884179,-208.309435634954 69.289336364603,
-191.492424677005 70.6231971699074,-170.968460931381 68.290878635012,
-158.519576085084 59.6252929380878,-143.46295614065 52.4136905999628,
-130.932641056522 38.9633656169578,-121.172558189545 25.9663459471247,
-99.9756667119496 22.717070324265,-94.6763733347819 19.5096780307535,
-85.8535122559554 16.5262691191198,-75.6002242070549 15.0345529933047,
-70.4735161130636 13.5988258504601,-64.9891717094285 12.2418500593682,
-59.4087874394669 8.8494006958964,-45.4578438671403 0.658368923825747,
-0.264830522697093 0.658368923825747,-0.264830522697093l0.658368923825747,
-0.264830522697093c0.658368923825747,-0.264830522697093-6.20713033738298,
-39.8775058725022-10.9565428086754,-59.4087721806768-13.6705143479304,
-70.5696227914182-16.6994467050881,-81.3462113972954-19.8613212892067,
-89.645756433626-21.4422436994774,-93.7955199281247-23.0564059677924,
-97.3260283129902-24.6810425111283,-99.9756667119496-37.6780541099905,
-121.172569912188-51.1284623692131,-130.932797619228-58.3399704286158,
-143.462940881861-67.0055167526496,-158.519492415143-69.3378901087436,
-170.968446571251-68.0040291139176,-191.492413232913-66.9110789415046,
-208.309331812531-54.8111481537909,-224.103105568266-50.508885223533,
-228.166399667826-47.9261288596012,-230.605716191039-42.6354741589363,
-236.115224319832-34.2414024659624,-241.014917085726-30.0443655550756,
-243.464752007233-25.0714708225116,-245.762135285075-19.2732761689687,
-247.447058389738-16.3741806336881,-248.289518545224-13.2687567063844,
-248.978864381863-9.95082648482475, -249.457595894886-8.29186423506778,
-249.6969603997-6.57977326598088,-249.883671889854-4.81378157820587,-250z "
strokethickness= "2.5" margin= " -28.398,-30.999,0,0" width= "height=" 30.754 "Top"
Fill= "#59000000" horizontalalignment= "left" d:layoutoverrides= "Width, Height" ishittestvisible= "False" >
<Path.RenderTransform>
<TransformGroup>
<scaletransform scalex= "1" scaley= "1"/>
<skewtransform anglex= " -57.547" angley= "0"/>
<rotatetransform angle= "0"/>
<translatetransform x= "45.252" y= "0"/>
</TransformGroup>
</Path.RenderTransform>
</Path>
<path stretch= "Fill" stroke= "#FF000000" opacity= "1" rendertransformorigin= "0.501,0.281"
Data= "m0,-250l6.09909264359567,-250c7.86508433137037,-249.883679757668 9.5771753004554,
-249.696968148304 11.2361413649071,-249.457603405072 24.5078612249376,
-247.542676877067 34.3794798686271,-242.257907887612 41.2465583494687,
-237.283319185337 44.6800986937064,-234.796020219885 47.3625022581612,
-232.386267374123 49.3432151487858,-230.514059732522 50.3335754087938,
-229.577954004373 51.1485091856508,-228.776236246195 51.7942001036199,
-228.166407297221 56.0964631917223,-224.103097789728 68.1963801884179,
-208.309435634954 69.289336364603,-191.492424677005 70.6231971699074,
-170.968460931381 68.290878635012,-158.519576085084 59.6252929380878,
-143.46295614065 52.4136905999628,-130.932641056522 38.9633656169578,
-121.172558189545 25.9663459471247,-99.9756667119496 22.717070324265,
-94.6763733347819 19.5096780307535,-85.8535122559554 16.5262691191198,
-75.6002242070549 15.0345529933047,-70.4735161130636 13.5988258504601,
-64.9891717094285 12.2418500593682,-59.4087874394669 8.8494006958964,
-45.4578438671403 0.658368923825747,-0.264830522697093 0.658368923825747,
-0.264830522697093l0.658368923825747,-0.264830522697093c0.658368923825747,
-0.264830522697093-6.20713033738298,-39.8775058725022-10.9565428086754,
-59.4087721806768-13.6705143479304,-70.5696227914182-16.6994467050881,
-81.3462113972954-19.8613212892067,-89.645756433626-21.4422436994774,
-93.7955199281247-23.0564059677924,-97.3260283129902-24.6810425111283,
-99.9756667119496-37.6780541099905,-121.172569912188-51.1284623692131,
-130.932797619228-58.3399704286158,-143.462940881861-67.0055167526496,
-158.519492415143-69.3378901087436,-170.968446571251-68.0040291139176,
-191.492413232913-66.9110789415046,-208.309331812531-54.8111481537909,
-224.103105568266-50.508885223533,-228.166399667826-47.9261288596012,
-230.605716191039-42.6354741589363,-236.115224319832-34.2414024659624,
-241.014917085726-30.0443655550756,-243.464752007233-25.0714708225116,
-245.762135285075-19.2732761689687,-247.447058389738-16.3741806336881,
-248.289518545224-13.2687567063844,-248.978864381863-9.95082648482475,
-249.457595894886-8.29186423506778,-249.6969603997-6.57977326598088,
-249.883671889854-4.81378157820587,-250z "
strokethickness= "2.5" horizontalalignment= "left" margin= " -18,-63.25,0,0" x:name= "Shppushpin"
Width= "d:layoutoverrides=" "Width" height= "63"
Verticalalignment= "Top" cursor= "Hand" >
<Path.RenderTransform>
<TransformGroup>
<scaletransform scalex= "1" scaley= "1"/>
<skewtransform anglex= "0" angley= "0"/>
<rotatetransform angle= "0"/>
<translatetransform x= "0" y= "0"/>
</TransformGroup>
</Path.RenderTransform>
<Path.Fill>
<lineargradientbrush endpoint= "0.5,1" startpoint= "0.5,0" >
<gradientstop color= "#FFFFF77F" offset= "0"/>
<gradientstop color= "#FFFCF14E" offset= "1"/>
</LinearGradientBrush>
</Path.Fill>
</Path>
<textblock textwrapping= "Wrap" d:layoutoverrides= "Height, Gridbox" rendertransformorigin= "0.51,0.491" Verticalalignment= "Top"
Textalignment= "Center" margin= " -15.55,-60,0,0" x:name= "Txttitle"
Width= "fontsize=" "visibility=" Visible "fontfamily=" Verdana "horizontalalignment=" left "ishittestvisible=" False ">
<TextBlock.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<skewtransform anglex= "0" angley= "0"/>
<rotatetransform angle= "0"/>
<translatetransform x= "0" y= "0"/>
</TransformGroup>
</TextBlock.RenderTransform>
</TextBlock>
<border x:name= "Toolpanel" verticalalignment= "Stretch" background= "#A82D2D2D" cornerradius= "8,8,8,8" Visibility= "Collapsed"
Borderbrush= "#FF626262" borderthickness= "2,2,2,2" scrollviewer.horizontalscrollbarvisibility= "Visible"
Rendertransformorigin= "0.5,0.5" grid.row= "0" width= "height=" >
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<translatetransform x= "A" y= " -75"/>
</TransformGroup>
</Border.RenderTransform>
<stackpanel verticalalignment= "Top" margin= "5,10, 5," >
<grid height= "verticalalignment=" "Top" >
<textblock height= "width=" 346 "text=" title content "textwrapping=" Wrap "foreground=" "#FFF0E7E7" fontsize= "16"
Horizontalalignment= "left" margin= "12,3,0,1"/>
</Grid>
<stackpanel verticalalignment= "Top" >
<border x:name= "Contentborder" background= "#FF000000" cornerradius= "8,8,8,8" verticalalignment= "Top"
Margin= "0,3,0,3" padding= "0,8,0,8" opacity= "0.68" minheight= ">"
<textblock text= "Display content" foreground= "White" margin= "3" ></TextBlock>
</Border>
</StackPanel>
</StackPanel>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>