使用Popup窗体控件实现ToolTip效果

本文将介绍一个技巧：使用Popup浮动窗体控件模拟Tip悬浮效果。此技巧的原理是当鼠标移动到某个控件上面的时候会触发MouseMove 事件，此时设置Popup控件显示出来。触发此事件时能够获知此时的鼠标坐标位置，我们根据鼠标位置的变化的同时移动Popup控件的 HorizontalOffset属性（获取或设置目标原点与弹出项对齐点之间的水平距离）和VerticalOffset（获取或设置目标原点与弹出项对齐点之间的垂直距离）。如果鼠标移出自定义控件，那么设置Popup浮动窗体的IsOpen属性为false隐藏此浮动窗体。

首先，创建一个自定义控件命名为TipWindow，其XAML代码如下：

TipWindow.xaml

<UserControl　x:Class="SLRightMouseButton.TipWindow"
　　XMLns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
　　XMLns:x="http://schemas.microsoft.com/winfx/2006/xaml"
　　xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
　　xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
　　mc:Ignorable="d"
　　d:DesignHeight="300"　d:DesignWidth="400"　xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
　　<Grid　x:Name="LayoutRoot"　Background="White">
　　　　<Popup　x:Name="tip">
　　　　　　<Grid　x:Name="toolTip"　Width="312"　Height="200"　>
　　　　　　　　<Grid.Background>
　　　　　　　　　　<ImageBrush　ImageSource="./BG.png"></ImageBrush>
　　　　　　　　</Grid.Background>
　　　　　　　　<Grid.RowDefinitions>
　　　　　　　　　　<RowDefinition　Height="auto"/>
　　　　　　　　　　<RowDefinition　/>
　　　　　　　　</Grid.RowDefinitions>
　　　　　　　　<Grid.ColumnDefinitions>
　　　　　　　　　　<ColumnDefinition　Width="auto"/>
　　　　　　　　</Grid.ColumnDefinitions>
　　　　　　　　<TextBlock　Grid.Row="0"　Grid.Column="0"　x:Name="mainContent"　Foreground="White"　FontSize="14"　Height="Auto"　HorizontalAlignment="Center"　Margin="0　20　0　0"　VerticalAlignment="Top"　/>
　　　　　　</Grid>
　　　　</Popup>
　　</Grid>
</UserControl>
　　　　　　　　　　　　　　　 <Grid.Background>
　　　　　　　　　　　　　　　　　　　 <ImageBrush ImageSource="./BG.png"></ImageBrush>
　　　　　　　　　　　　　　　 </Grid.Background>

这几句话设置整个Grid的背景图片为当前目录下的BG.png，所以我们也要在项目中引入该文件。再来看看TipWindow.cs的关键源代码如下：

　　　　public　void　BindControl(UIElement　uc)
　　　　{
　　　　　　uc.MouseLeave　+=　new　MouseEventHandler(ti_MouseLeave);
　　　　　　uc.MouseMove　+=　new　MouseEventHandler(ti_MouseMove);
　　　　}
　　　　public　void　CancelBindControl(UIElement　uc)
　　　　{
　　　　　　uc.MouseLeave　-=　new　MouseEventHandler(ti_MouseLeave);
　　　　　　uc.MouseMove　-=　new　MouseEventHandler(ti_MouseMove);
　　　　}
　　　　///　<summary>
　　　　///　鼠标离开自定义控件时，隐藏提示框
　　　　///　</summary>
　　　　///　<param　name="sender"></param>
　　　　///　<param　name="e"></param>
　　　　private　void　ti_MouseLeave(object　sender,　MouseEventArgs　e)
　　　　{
　　　　　　this.tip.IsOpen　=　false;
　　　　}
　　　　///　<summary>
　　　　///　鼠标在自定义控件上移动式时，提示框也跟随移动
　　　　///　</summary>
　　　　///　<param　name="sender"></param>
　　　　///　<param　name="e"></param>
　　　　private　void　ti_MouseMove(object　sender,　MouseEventArgs　e)
　　　　{
　　　　　　this.tip.IsOpen　=　true;
　　　　　　this.tip.HorizontalOffset　=　e.GetPosition(null).X　-　158;
　　　　　　this.tip.VerticalOffset　=　e.GetPosition(null).Y　-　202;
　　　　}

此关键代码中有一个绑定函数BindControl(UIElement uc)，让需要获得TipWindow浮动框的uc控件绑定MouseMove和MouseLeave事件。现在再创建一个新的自定义控件 Rect.xaml，并且添加一个IsFlag属性，此属性指示Rect自定义控件是否显示TipWindow浮动框。XAML代码里面添加一个矩形控件 ti，代码如下：

　　<Rectangle　x:Name="ti"　Width="50"　Height="50"　RadiusX="5"　RadiusY="5"　Fill="YellowGreen"></Rectangle>

在Rect.xaml.cs代码中，我们输入以下代码即可：

　　　　private　bool　_IsFlag;
　　　　TipWindow　tipWindow　=　new　TipWindow();
　　　　///　<summary>
　　　　///　是否显示TipWindow
　　　　///　</summary>
　　　　public　bool　IsFlag
　　　　{
　　　　　　get　{　return　_IsFlag;　}
　　　　　　set
　　　　　　{
　　　　　　　　_IsFlag　=　value;
　　　　　　　　if　(_IsFlag　==　true)
　　　　　　　　{
　　　　　　　　　　tipWindow.BindControl(this.ti);
　　　　　　　　}
　　　　　　　　else
　　　　　　　　{
　　　　　　　　　　//　tipWindow.CancelBindControl(this.ti);
　　　　　　　　}
　　　　　　}
　　　　}

Rect自定义控件制作好了，在MainPage.xaml.cs文件中，实例化此自定义控件，并且设置其IsFlag属性为True即可看到下面图片的效果了。

MainPage.xaml.cs：

Rect　rect　=　new　Rect();
　　　　　　rect.Margin　=　new　Thickness(250);
　　　　　　rect.IsFlag　=　true;
　　　　　　this.LayoutRoot.Children.Add(rect);

本实例采用VS2010+Silverlight 4.0编写，