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

　　在使用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));

 

　　默认的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>

 

　　 那么在设置对象的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));

 

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

　　　　　　　　 

 

　　注：本篇是根据网上文章简单翻译而成，主要借鉴其实现思想并加入了相关描述，其原文链接如下：

　　http://rbrundritt.spaces.live.com/blog/cns!E7DBA9A4BFD458C5!1151.entry 

 

相关说明

 本文属于翻译文章，愿与有志者共同学习交流。欢迎转载，但请在明显地位标记本文的原文连接。  

 译      者：Beniao

 文章出处：http://beniao.cnblogs.com/  或  http://www.cnblogs.com/