[Silverlight] Bing Maps development application and technique 6: use styles to beautify the ToolTip appearance of the Pushpin Control

When Bing Maps Silverlight Control is used for Bing Maps development, the usage frequency of the Pushpin annotation Control is very high. In most cases, the ToolTip feature is used to present some data information, however, the default ToolTip looks unsightly and does not look perfect. This requires developers to implement their own beautiful appearance interface. This article will show you the way to beautify the ToolTip of the Pushpin control.

　　

Before that, I wrote an article titled [Silverlight] Bing Maps development application and Skills 2: Custom graphic nail tagging controls and dynamic ToolPanel. this section describes in detail how to customize and implement the functions of the graphic nail control and how to use the ToolPanel, this article describes how to beautify the ToolTip appearance of Bing Maps Silverlight Control.

 

By default, you can set the ToolTip as follows:

Var pushpin = new Pushpin ();
ToolTipService. SetToolTip (pushpin, "Here is the ToolTip content of the graphic nail control! ");

MapLayer. AddChild (pushpin, new Location (29.5076372217973, 106.489384971208 ));

 

The default ToolTip looks very ugly. developers can define styles to change the rendering effects of other styles, such as the following style code:

<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 = "here is the ToolTip content of the graphic nail control! "FontSize =" 12 "Foreground =" White "/>
</StackPanel>
</ContentPresenter. Content>
</ContentPresenter>
</Border>
</ControlTemplate>
</Setter. Value>
</Setter>
</Style>

 

When setting the ToolTip of an object, you only need to dynamically reference the style defined above to ToopTip. You can call the custom style using the following code.

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 ));

 

The final running effect is shown in:

 

　　Note: This article is based on a simple translation of online articles. It mainly draws on its implementation ideas and adds relevant descriptions. The original Article links are as follows:

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

 

Description

This article is a translation article. We hope to learn and exchange it with those who are interested in it. You are welcome to repost this article, but mark the original article connection in a prominent position.

Translated by: Beniao

Article Source: http://beniao.cnblogs.com/or http://www.cnblogs.com/