分类导航

silverlight 发布时间：2022-05-03 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了【Silverlight】Bing Maps开发应用与技巧二：自定义图钉标注控件和动态ToolPanel，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

概述

　　在Bing Maps Silverlight Control中以及为我们提供了地图图钉控件Pushpin，我曾经在《使用图钉层（Pushpin layer）及地图图层（MapLayer）》一文中介绍过他的使用方法，本篇主要介绍如何自定义图钉标注控件以及对他的一些扩展，比如实现图钉的动态ToolPanel。　　关于图钉的UI外观的设计这里就不详细介绍了，通过Blend可以快速的构建UI界面

　　在Bing Maps Silverlight Control中以及为我们提供了地图图钉控件Pushpin，我曾经在《使用图钉层（Pushpin layer）及地图图层（MapLayer）》一文中介绍过他的使用方法，本篇主要介绍如何自定义图钉标注控件以及对他的一些扩展，比如实现图钉的动态ToolPanel。

　　关于图钉的UI外观的设计这里就不详细介绍了，通过Blend可以快速的构建UI界面。首先介绍下我的实现思想，通过Path构建图钉标注控件的UI外观，控件整体布局使用Grid布局，分别在Grid容器里设计好图钉UI外观效果和需要动态提示的ToolPanel(使用Border布局设计)，默认将ToolPanel隐藏，在后台代码中通过鼠标事件进行控制其是否出现；另外还布局了一个TextBlock控件，用于出现图钉标注上的内容。下面是定义好的图钉风格的样式：

自定义图钉样式

@H_675_44@< Style x:Name @H_675_44@="PushpinStyle" TargetType @H_675_44@="Controls:PushPinControl" @H_675_44@>
     @H_675_44@< Setter Property @H_675_44@="Template" @H_675_44@>
         @H_675_44@< Setter.Value @H_675_44@>
             @H_675_44@< ControlTemplate TargetType @H_675_44@="Controls:PushPinControl" @H_675_44@>
                 @H_675_44@< Grid x:Name @H_675_44@="GrdRoot" Height @H_675_44@="Auto" Width @H_675_44@="Auto" HorizontalAlignment @H_675_44@="Stretch" renderTransformOrigin @H_675_44@="0,0" @H_675_44@>
                     @H_675_44@< Grid.RenderTransform @H_675_44@>
                         @H_675_44@< TransformGroup @H_675_44@>
                             @H_675_44@< ScaleTransform x:Name @H_675_44@="_ScaleTransform" ScaleX @H_675_44@="1" ScaleY @H_675_44@="1" @H_675_44@/>
                             @H_675_44@< SkewTransform @H_675_44@/>
                             @H_675_44@< RotateTransform @H_675_44@/>
                             @H_675_44@< TranslateTransform @H_675_44@/>
                         @H_675_44@</ TransformGroup @H_675_44@>
                     @H_675_44@</ Grid.RenderTransform @H_675_44@>
                     @H_675_44@< Path Stretch @H_675_44@="Fill" Opacity @H_675_44@="1" renderTransformOrigin @H_675_44@="0.501,0.281" Data @H_675_44@="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 @H_675_44@="2.5" Margin @H_675_44@="-28.398,-30.999,0" Width @H_675_44@="35" Height @H_675_44@="30.754" VerticalAlignment @H_675_44@="Top"
                          Fill @H_675_44@="#59000000" HorizontalAlignment @H_675_44@="Left" d:LayoutOverrides @H_675_44@="Width, Height" IsHitTestVisible @H_675_44@="false" @H_675_44@>
                         @H_675_44@< Path.RenderTransform @H_675_44@>
                             @H_675_44@< TransformGroup @H_675_44@>
                                 @H_675_44@< ScaleTransform ScaleX @H_675_44@="1" ScaleY @H_675_44@="1" @H_675_44@/>
                                 @H_675_44@< SkewTransform AngleX @H_675_44@="-57.547" AngleY @H_675_44@="0" @H_675_44@/>
                                 @H_675_44@< RotateTransform Angle @H_675_44@="0" @H_675_44@/>
                                 @H_675_44@< TranslateTransform X @H_675_44@="45.252" Y @H_675_44@="0" @H_675_44@/>
                             @H_675_44@</ TransformGroup @H_675_44@>
                         @H_675_44@</ Path.RenderTransform @H_675_44@>
                     @H_675_44@</ Path @H_675_44@>
                     @H_675_44@< Path Stretch @H_675_44@="Fill" stroke @H_675_44@="#FF000000" Opacity @H_675_44@="1" renderTransformOrigin @H_675_44@="0.501,0.281"
                          Data @H_675_44@="M0,-250C7.86508433137037,
                          -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 @H_675_44@="2.5" HorizontalAlignment @H_675_44@="Left" Margin @H_675_44@="-18,-63.25,0" x:Name @H_675_44@="shpPushpin"
                          Width @H_675_44@="35" d:LayoutOverrides @H_675_44@="Width" Height @H_675_44@="63"
                          VerticalAlignment @H_675_44@="Top" cursor @H_675_44@="Hand" @H_675_44@>
                         @H_675_44@< Path.RenderTransform @H_675_44@>
                             @H_675_44@< TransformGroup @H_675_44@>
                                 @H_675_44@< ScaleTransform ScaleX @H_675_44@="1" ScaleY @H_675_44@="1" @H_675_44@/>
                                 @H_675_44@< SkewTransform AngleX @H_675_44@="0" AngleY @H_675_44@="0" @H_675_44@/>
                                 @H_675_44@< RotateTransform Angle @H_675_44@="0" @H_675_44@/>
                                 @H_675_44@< TranslateTransform X @H_675_44@="0" Y @H_675_44@="0" @H_675_44@/>
                             @H_675_44@</ TransformGroup @H_675_44@>
                         @H_675_44@</ Path.RenderTransform @H_675_44@>
                         @H_675_44@< Path.Fill @H_675_44@>
                             @H_675_44@< LinearGradientBrush EndPoint @H_675_44@="0.5,1" StartPoint @H_675_44@="0.5,0" @H_675_44@>
                                 @H_675_44@< GradientStop Color @H_675_44@="#FFFFF77F" Offset @H_675_44@="0" @H_675_44@/>
                                 @H_675_44@< GradientStop Color @H_675_44@="#FFFCF14E" Offset @H_675_44@="1" @H_675_44@/>
                             @H_675_44@</ LinearGradientBrush @H_675_44@>
                         @H_675_44@</ Path.Fill @H_675_44@>
                     @H_675_44@</ Path @H_675_44@>
                     @H_675_44@< TextBlock textwrapping @H_675_44@="Wrap" d:LayoutOverrides @H_675_44@="Height, GridBox" renderTransformOrigin @H_675_44@="0.51,0.491" VerticalAlignment @H_675_44@="Top"
                           textAlignment @H_675_44@="Center" Margin @H_675_44@="-15.55,-60,0" x:Name @H_675_44@="txttitle"
                           Width @H_675_44@="30" FontSize @H_675_44@="24" Visibility @H_675_44@="Visible" FontFamily @H_675_44@="Verdana" HorizontalAlignment @H_675_44@="Left" IsHitTestVisible @H_675_44@="false" @H_675_44@>
                             @H_675_44@< TextBlock.RenderTransform @H_675_44@>
                                 @H_675_44@< TransformGroup @H_675_44@>
                                     @H_675_44@< ScaleTransform @H_675_44@/>
                                     @H_675_44@< SkewTransform AngleX @H_675_44@="0" AngleY @H_675_44@="0" @H_675_44@/>
                                     @H_675_44@< RotateTransform Angle @H_675_44@="0" @H_675_44@/>
                                     @H_675_44@< TranslateTransform X @H_675_44@="0" Y @H_675_44@="0" @H_675_44@/>
                                 @H_675_44@</ TransformGroup @H_675_44@>
                             @H_675_44@</ TextBlock.RenderTransform @H_675_44@>
                     @H_675_44@</ TextBlock @H_675_44@>
                     @H_675_44@< Border x:Name @H_675_44@="ToolPanel" VerticalAlignment @H_675_44@="Stretch" BACkground @H_675_44@="#A82D2D2D" CornerRadius @H_675_44@="8,8,8" Visibility @H_675_44@="Collapsed"
                        BorderBrush @H_675_44@="#FF626262" BorderThickness @H_675_44@="2,2,2" ScrollViewer.HorizontalScrollBarVisibility @H_675_44@="Visible"
                        renderTransformOrigin @H_675_44@="0.5,0.5" Grid.Row @H_675_44@="0" Width @H_675_44@="300" Height @H_675_44@="200" @H_675_44@>
                         @H_675_44@< Border.RenderTransform @H_675_44@>
                             @H_675_44@< TransformGroup @H_675_44@>
                                 @H_675_44@< ScaleTransform @H_675_44@/>
                                 @H_675_44@< SkewTransform @H_675_44@/>
                                 @H_675_44@< RotateTransform @H_675_44@/>
                                 @H_675_44@< TranslateTransform X @H_675_44@="20" Y @H_675_44@="-75" @H_675_44@/>
                             @H_675_44@</ TransformGroup @H_675_44@>
                         @H_675_44@</ Border.RenderTransform @H_675_44@>
                         @H_675_44@< StackPanel VerticalAlignment @H_675_44@="Top" Margin @H_675_44@="5,10, 5, 10" @H_675_44@>
                             @H_675_44@< Grid Height @H_675_44@="29" VerticalAlignment @H_675_44@="Top" @H_675_44@>
                                 @H_675_44@< TextBlock Height @H_675_44@="25" Width @H_675_44@="346" text @H_675_44@="标题内容" textwrapping @H_675_44@="Wrap" Foreground @H_675_44@="#FFF0E7E7" FontSize @H_675_44@="16"
                                    HorizontalAlignment @H_675_44@="Left" Margin @H_675_44@="12,3,1" @H_675_44@/>
                             @H_675_44@</ Grid @H_675_44@>
                             @H_675_44@< StackPanel VerticalAlignment @H_675_44@="Top" @H_675_44@>
                                 @H_675_44@< Border x:Name @H_675_44@="ContentBorder" BACkground @H_675_44@="#FF000000" CornerRadius @H_675_44@="8,8" VerticalAlignment @H_675_44@="Top"
                                        Margin @H_675_44@="0,3" Padding @H_675_44@="0,8" Opacity @H_675_44@="0.68" MinHeight @H_675_44@="200" @H_675_44@>
                                     @H_675_44@< TextBlock Text @H_675_44@="显示内容" Foreground @H_675_44@="White" Margin @H_675_44@="3" @H_675_44@></ TextBlock @H_675_44@>
                                 @H_675_44@</ Border @H_675_44@>
                             @H_675_44@</ StackPanel @H_675_44@>
                         @H_675_44@</ StackPanel @H_675_44@>
                     @H_675_44@</ Border @H_675_44@>
                 @H_675_44@</ Grid @H_675_44@>
             @H_675_44@</ ControlTemplate @H_675_44@>
         @H_675_44@</ Setter.Value @H_675_44@>
     @H_675_44@</ Setter @H_675_44@>
@H_675_44@</ Style @H_675_44@>

　　接下来要做的就是实现图标注控件的定义以及动态控制ToolPanel控件的显示与否了，主要思路就是通过引用上面定义的样式，以模板的方式从样式里获取到相应的控件元素进行动态控制，详细见如下代码：

/// <sumMary>
/// 自定义图钉控件
/// </sumMary>
@H_675_44@public @H_675_44@class PushPinControl : ContentControl
{
     @H_675_44@private @H_675_44@String text;

     @H_675_44@public PushPinControl(String text)
    {
         // 设置图钉标注控件的标注内容
         @H_675_44@this .Text = text == "" ? " @H_161_46@m " : text;
        DefaultStyleKey = @H_675_44@typeof (PushPinControl);
         // 为当前对象引用样式，从全局资源里读取
         @H_675_44@this .Style = Application.Current.resources[ " PushpinStyle " ] @H_675_44@as Style;
    }

     @H_675_44@public @H_675_44@override @H_675_44@void OnApplyTemplate()
    {
         @H_675_44@base .onApplyTemplate();

         // 从样式模板中获取TextBlock控件
        var textBlock = GetTemplateChild( " txttitle " ) @H_675_44@as textBlock;
        textBlock.Text = @H_675_44@this .Text;
         // 从样式模板中获取ToolPanel(既Border布局实现的，详细见样式的定义)控件
        var ToolPanelBorder = GetTemplateChild( " ToolPanel " ) @H_675_44@as Border;
         // 通过事件动态控制ToolPanel的显示和隐藏
         @H_675_44@this .MouseEnter += (mes, meo) => { ToolPanelBorder.Visibility = Visibility.Visible; };
         @H_675_44@this .MouSELEave += (mls, mlo) => { ToolPanelBorder.Visibility = Visibility.Collapsed; };
    }
}

　　到这里就成功的完成了图钉标注控件的自定义了，接下来看看如何使用这个自定义的图钉标注控件，详见如下代码块：

　　或许会有人问道，如何动态的实现ToolPanel里显示的内容？要实现这个功能也是非常简单的，首先我们来分析下上面定义的样式里对ToolPanel部分的定义：

@H_675_44@< Border x:Name @H_675_44@="ToolPanel" VerticalAlignment @H_675_44@="Stretch" BACkground @H_675_44@="#A82D2D2D" CornerRadius @H_675_44@="8,8" Visibility @H_675_44@="Collapsed"
    BorderBrush @H_675_44@="#FF626262" BorderThickness @H_675_44@="2,2" ScrollViewer.HorizontalScrollBarVisibility @H_675_44@="Visible"
    renderTransformOrigin @H_675_44@="0.5,0.5" Grid.Row @H_675_44@="0" Width @H_675_44@="300" Height @H_675_44@="200" @H_675_44@>
     @H_675_44@< Border.RenderTransform @H_675_44@>
         @H_675_44@< TransformGroup @H_675_44@>
             @H_675_44@< ScaleTransform @H_675_44@/>
             @H_675_44@< SkewTransform @H_675_44@/>
             @H_675_44@< RotateTransform @H_675_44@/>
             @H_675_44@< TranslateTransform X @H_675_44@="20" Y @H_675_44@="-75" @H_675_44@/>
         @H_675_44@</ TransformGroup @H_675_44@>
     @H_675_44@</ Border.RenderTransform @H_675_44@>
     @H_675_44@< StackPanel VerticalAlignment @H_675_44@="Top" Margin @H_675_44@="5, 10" @H_675_44@>
         @H_675_44@< Grid Height @H_675_44@="29" VerticalAlignment @H_675_44@="Top" @H_675_44@>
             @H_675_44@< TextBlock Height @H_675_44@="25" Width @H_675_44@="346" text @H_675_44@="标题内容" textwrapping @H_675_44@="Wrap" Foreground @H_675_44@="#FFF0E7E7" FontSize @H_675_44@="16"
                HorizontalAlignment @H_675_44@="Left" Margin @H_675_44@="12,1" @H_675_44@/>
         @H_675_44@</ Grid @H_675_44@>
         @H_675_44@< StackPanel VerticalAlignment @H_675_44@="Top" @H_675_44@>
             @H_675_44@< Border x:Name @H_675_44@="ContentBorder" BACkground @H_675_44@="#FF000000" CornerRadius @H_675_44@="8,8" VerticalAlignment @H_675_44@="Top"
                    Margin @H_675_44@="0,3" Padding @H_675_44@="0,8" Opacity @H_675_44@="0.68" MinHeight @H_675_44@="200" @H_675_44@>
                 @H_675_44@< TextBlock Text @H_675_44@="显示内容" Foreground @H_675_44@="White" Margin @H_675_44@="3" @H_675_44@></ TextBlock @H_675_44@>
             @H_675_44@</ Border @H_675_44@>
         @H_675_44@</ StackPanel @H_675_44@>
     @H_675_44@</ StackPanel @H_675_44@>
@H_675_44@</ Border @H_675_44@>

　　使用了Border进行圆角布局，在其内部通过StackPanel垂直布局实现了ToolPanel的的标题和内容两大部分，内容部分并通过Border进行设计，取名为ContentBorder，这是为了实现动态呈现显示内容而设计，整体Border通过TranslateTransform进行一个偏移的处理，也就是让ToolPanel始终显示在图钉标注的右边相应的位置，详细见本文前面提供的截图。

　　从上面的实现知道ToolPanel是在鼠标的MouseEnter事件执行的时候才会显示的，当鼠标离开就会将其可见性设置为隐藏。了解了这个原理后就可以想到，是否可以从MouseEnter事件中通过某种方法去处理？事件是个非常强大的技术点，这里我们就可以通过事件，将显示内容的Border容器派发处理，通过事件的监听来动态更新其显示内容。首先需要扩展一个事件类：

@H_675_44@public @H_675_44@delegate @H_675_44@void PushpinContentChangedHandler( @H_675_44@object sender,PushpinContentChangedEvantAgrs E);

@H_675_44@public @H_675_44@class PushpinContentChangedEvantAgrs : EventArgs
{
     @H_675_44@public Border ContentBorder { @H_675_44@get ; @H_675_44@set ; }

     @H_675_44@public PushpinContentChangedEvantAgrs() { }

     @H_675_44@public PushpinContentChangedEvantAgrs(Border ContentBorder)
    {
         @H_675_44@this .ContentBorder = ContentBorder;
    }
}

接下来为自定义的图钉标注类定义一个事件，事件类型就为上面所定义好的委托类型，传递的事件为PushpinContentChangedEventArgs.

/// <sumMary>
/// 自定义图钉控件
/// </sumMary>
@H_675_44@public @H_675_44@class PushPinControl : ContentControl
{
@H_675_44@public @H_675_44@event PushpinContentChangedHandler ContentChangedEvent;

现在需要做的就是在当前对象的MouseEnter事件中去触发这个事件，将样式里所定义好的用于显示内容的Border对象获取出来，通过事件参数传递派发出去，让事件监听段可以通过该事件获取事件参数进行ToolPanel内容的呈现更新。所有我们需要改写PushPinControl的OnApplyTemplate方法：

@H_675_44@public @H_675_44@override @H_675_44@void OnApplyTemplate()
{
     @H_675_44@base .onApplyTemplate();

     // 从样式模板中获取TextBlock控件
    var textBlock = GetTemplateChild( " txttitle " ) @H_675_44@as textBlock;
    textBlock.Text = @H_675_44@this .Text;
     // 从样式模板中获取ToolPanel(既Border布局实现的，详细见样式的定义)控件
    var ToolPanelBorder = GetTemplateChild( " ToolPanel " ) @H_675_44@as Border;
     // 获取内容Border对象，通过事件将该对象派发出去，在使用段可以通过监听这个事件而获取到内容Border
    var ContentBorder = GetTemplateChild( " ContentBorder " ) @H_675_44@as Border;
     // 通过事件动态控制ToolPanel的显示和隐藏
     @H_675_44@this .MouseEnter += (mes, meo) =>
    {
        ToolPanelBorder.Visibility = Visibility.Visible;
         @H_675_44@if (ContentChangedEvent != @H_675_44@null )
        {
            ContentChangedEvent( @H_675_44@this , @H_675_44@new PushpinContentChangedEvantAgrs(ContentBorder));
        }
    };
     @H_675_44@this .MouSELEave += (mls, mlo) => { ToolPanelBorder.Visibility = Visibility.Collapsed; };
}

　　通过ContentChangedEvent事件的监听动态的去改变ToolPanel里的显示内容就可以达到我们的目的了，比如我们动态的将ToolPanel里的显示内容更改为一张图片，上面使用自定义图钉标注的代码将变成下面这样的。

@H_675_44@private @H_675_44@void AddPushPin()
{
     // 添加Bing Maps Silverlight Control自带的图钉
     // var pushpin = new Pushpin();
     // pushpin.LOCATIOn = new LOCATIOn(29.5076372217973, 106.489384971208);
     // 添加自定义的图钉
    var pushpin = @H_675_44@new PushPinControl( " D " );
    pushpin.ContentChangedEvent += (sender, o) =>
        {
             // 构造Image对象用于显示在ToolPanel中
            var image = @H_675_44@new Image { Width = 100 , Height = 100 , Margin = @H_675_44@new Thickness( 8 ) };
            image.source = @H_675_44@new BitmapImage( @H_675_44@new Uri( " resources/Smbecker.png " , UriKind.RelativeOrAbsolutE));
            Border border = o.ContentBorder;

            border.Child = image;
        };
    MapLayer.AddChild(pushpin, 106.489384971208 ));
}