【Silverlight】Bing Maps开发应用与技巧六:使用样式美化图钉(Pushpin)控件的ToolTip外观

2016-08-20 10:55:12来源:http://beniao.blog.51cto.com/389148/327654作者:beniao人点击


  在使用Bing Maps Silverlight Control进行Bing Maps开发中,图钉(Pushpin)标注控件的使用频率是非常之高,多数情况下都会使用其ToolTip特性来呈现一些数据信息,但默认的ToolTip外观并不完美,显得格外的难看。于此需要开发者自己实现其漂亮的外观界面,本篇将由浅入深的带你走入图钉(Pushpin)控件的ToolTip外观美化之路。
  
  之前我曾写过一篇自定义图钉控件和信息提示面板的文章《【Silverlight】Bing Maps开发应用与技巧二:自定义图钉标注控件和动态ToolPanel》,里面详细介绍了如何自定义实现图钉控件功能,以及其信息提示面板(ToolPanel)的使用等,本篇将介绍如何通过样式对Bing Maps Silverlight Control内置的图钉控件的ToolTip外观进行美化。

  在默认的情况下,通常是使用如下方式进行设置其ToolTip的内容:

varpushpin=newPushpin();ToolTipService.SetToolTip(pushpin,"这里是图钉控件ToolTip内容!");MapLayer.AddChild(pushpin,newLocation(29.5076372217973,106.489384971208));

  默认的ToolTip外观非常难看,开发者可以通过定义样式去改变其他外观呈现效果,比如定义为下面样式代码:

<Stylex:Key="PushpinStyle"TargetType="ToolTip"><SetterProperty="Background"Value="Transparent"/><SetterProperty="BorderBrush"Value="Transparent"/><SetterProperty="BorderThickness"Value="0"/><SetterProperty="Template"><Setter.Value><ControlTemplate><BorderCornerRadius="5"><Border.Background><SolidColorBrushColor="Black"Opacity="0.5"/></Border.Background><ContentPresenterMargin="5"><ContentPresenter.Content><StackPanelMargin="5"MaxWidth="200"MinHeight="80"><TextBlockText="这里是图钉控件ToolTip内容!"FontSize="12"Foreground="White"/></StackPanel></ContentPresenter.Content></ContentPresenter></Border></ControlTemplate></Setter.Value></Setter></Style>

  那么在设置对象的ToolTip的时候就只需要动态的给ToopTip引用上面定义的样式就行了,可以通过如下代码的方式调用自定义的样式。

varpushpin=newPushpin();ToolTipService.SetToolTip(pushpin,newToolTip(){Style=Application.Current.Resources["PushpinStyle"]asStyle});MapLayer.AddChild(pushpin,newLocation(29.5076372217973,106.489384971208));

  其最终的运行效果如下图所示:
        

  注:本篇是根据网上文章简单翻译而成,主要借鉴其实现思想并加入了相关描述,其原文链接如下:
  http://rbrundritt.spaces.live.com/blog/cns!E7DBA9A4BFD458C5!1151.entry

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台