在使用Bing Maps Silverlight Control进行Bing Maps开发中,图钉(Pushpin)标注控件的使用频率是非常之高,多数情况下都会使用其ToolTip特性来呈现一些数据信息,但默认的ToolTip外观并不完美,显得格外的难看。于此需要开发者自己实现其漂亮的外观界面,本篇将由浅入深的带你走入图钉(Pushpin)控件的ToolTip外观美化之路。
之前我曾写过一篇自定义图钉控件和信息提示面板的文章《
【Silverlight】Bing Maps开发应用与技巧二:自定义图钉标注控件和动态ToolPanel
》,里面详细介绍了如何自定义实现图钉控件功能,以及其信息提示面板(ToolPanel)的使用等,本篇将介绍如何通过样式对Bing Maps Silverlight Control内置的图钉控件的ToolTip外观进行美化。
在默认的情况下,通常是使用如下方式进行设置其ToolTip的内容:
var pushpin
=
new
Pushpin();
ToolTipService.SetToolTip(pushpin, " 这里是图钉控件ToolTip内容! " );
MapLayer.AddChild(pushpin, new Location( 29.5076372217973 , 106.489384971208 ));
ToolTipService.SetToolTip(pushpin, " 这里是图钉控件ToolTip内容! " );
MapLayer.AddChild(pushpin, new Location( 29.5076372217973 , 106.489384971208 ));
默认的ToolTip外观非常难看,开发者可以通过定义样式去改变其他外观呈现效果,比如定义为下面样式代码:
<
Style
x:Key
="PushpinStyle"
TargetType
="ToolTip"
>
< Setter Property ="Background" Value ="Transparent" />
< Setter Property ="BorderBrush" Value ="Transparent" />
< Setter Property ="BorderThickness" Value ="0" />
< Setter Property ="Template" >
< Setter.Value >
< ControlTemplate >
< Border CornerRadius ="5" >
< Border.Background >
< SolidColorBrush Color ="Black" Opacity ="0.5" />
</ Border.Background >
< ContentPresenter Margin ="5" >
< ContentPresenter.Content >
< StackPanel Margin ="5" MaxWidth ="200" MinHeight ="80" >
< TextBlock Text ="这里是图钉控件ToolTip内容!" FontSize ="12" Foreground ="White" />
</ StackPanel >
</ ContentPresenter.Content >
</ ContentPresenter >
</ Border >
</ ControlTemplate >
</ Setter.Value >
</ Setter >
</ Style >
< Setter Property ="Background" Value ="Transparent" />
< Setter Property ="BorderBrush" Value ="Transparent" />
< Setter Property ="BorderThickness" Value ="0" />
< Setter Property ="Template" >
< Setter.Value >
< ControlTemplate >
< Border CornerRadius ="5" >
< Border.Background >
< SolidColorBrush Color ="Black" Opacity ="0.5" />
</ Border.Background >
< ContentPresenter Margin ="5" >
< ContentPresenter.Content >
< StackPanel Margin ="5" MaxWidth ="200" MinHeight ="80" >
< TextBlock Text ="这里是图钉控件ToolTip内容!" FontSize ="12" Foreground ="White" />
</ StackPanel >
</ ContentPresenter.Content >
</ ContentPresenter >
</ Border >
</ ControlTemplate >
</ Setter.Value >
</ Setter >
</ Style >
那么在设置对象的ToolTip的时候就只需要动态的给ToopTip引用上面定义的样式就行了,可以通过如下代码的方式调用自定义的样式。
var pushpin
=
new
Pushpin();
ToolTipService.SetToolTip(pushpin, new ToolTip()
{
Style = Application.Current.Resources[ " PushpinStyle " ] as Style
});
MapLayer.AddChild(pushpin, new Location( 29.5076372217973 , 106.489384971208 ));
ToolTipService.SetToolTip(pushpin, new ToolTip()
{
Style = Application.Current.Resources[ " PushpinStyle " ] as Style
});
MapLayer.AddChild(pushpin, new Location( 29.5076372217973 , 106.489384971208 ));
本文转自 beniao 51CTO博客,原文链接:http://blog.51cto.com/beniao/327654,如需转载请自行联系原作者