本节是基于第四节的源码基础上进行扩展的源码，故本节源码附带有鼠标右键和全屏功能。

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

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

1. <Grid.Background> 
2.                 <ImageBrush ImageSource="./BG.png"></ImageBrush> 
3.             </Grid.Background> 

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

1. public void BindControl(UIElement uc) 
2.    { 
3.        uc.MouseLeave += new MouseEventHandler(ti_MouseLeave); 
4.        uc.MouseMove += new MouseEventHandler(ti_MouseMove); 
5.  
6.    } 
7.    public void CancelBindControl(UIElement uc) 
8.    { 
9.         
10.        uc.MouseLeave -= new MouseEventHandler(ti_MouseLeave); 
11.        uc.MouseMove -= new MouseEventHandler(ti_MouseMove); 
12.  
13.    } 
14.    /// <summary> 
15.    /// 鼠标离开自定义控件时，隐藏提示框 
16.    /// </summary> 
17.    /// <param name="sender"></param> 
18.    /// <param name="e"></param> 
19.    private void ti_MouseLeave(object sender, MouseEventArgs e) 
20.    { 
21.        this.tip.IsOpen = false; 
22.    } 
23.    /// <summary> 
24.    /// 鼠标在自定义控件上移动式时，提示框也跟随移动 
25.    /// </summary> 
26.    /// <param name="sender"></param> 
27.    /// <param name="e"></param> 
28.    private void ti_MouseMove(object sender, MouseEventArgs e) 
29.    { 
30.        this.tip.IsOpen = true; 
31.        this.tip.HorizontalOffset = e.GetPosition(null).X - 158; 
32.        this.tip.VerticalOffset = e.GetPosition(null).Y - 202; 
33.  
34.    } 

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

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

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

1. private bool _IsFlag; 
2.    TipWindow tipWindow = new TipWindow(); 
3.    /// <summary> 
4.    /// 是否显示TipWindow 
5.    /// </summary> 
6.    public bool IsFlag 
7.    { 
8.        get { return _IsFlag; } 
9.        set 
10.        { 
11.            _IsFlag = value; 
12.            if (_IsFlag == true) 
13.            { 
14.                tipWindow.BindControl(this.ti); 
15.            } 
16.            else 
17.            { 
18.               // tipWindow.CancelBindControl(this.ti); 
19.            } 
20.        } 
21.    } 

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

MainPage.xaml.cs：

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

        本实例采用VS2010+Silverlight 4.0编写，如需源码请点击 SLTipWindow.rar 下载

本文转自程兴亮 51CTO博客，原文链接:http://blog.51cto.com/chengxingliang/821494