博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Silverlight实用窍门系列:13.基于Popup浮动窗体控件模拟ToolTip的实现【附带实例源码】...
阅读量:6137 次
发布时间:2019-06-21

本文共 2340 字,大约阅读时间需要 7 分钟。

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

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

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

ContractedBlock.gif
TipWindow.xaml

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

2011022516550981.jpg

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

    本文转自程兴亮博客园博客,原文链接:http://www.cnblogs.com/chengxingliang/archive/2011/02/25/1965168.html,如需转载请自行联系原作者

你可能感兴趣的文章
NGUI Label Color Code
查看>>
.NET Core微服务之基于Polly+AspectCore实现熔断与降级机制
查看>>
vue组件开发练习--焦点图切换
查看>>
浅谈OSI七层模型
查看>>
Webpack 2 中一些常见的优化措施
查看>>
移动端响应式
查看>>
python实现牛顿法求解求解最小值(包括拟牛顿法)【最优化课程笔记】
查看>>
js中var、let、const的区别
查看>>
腾讯云加入LoRa联盟成为发起成员,加速推动物联网到智联网的进化
查看>>
从Python2到Python3:超百万行代码迁移实践
查看>>
Windows Server已可安装Docker,Azure开始支持Mesosphere
查看>>
简洁优雅地实现夜间模式
查看>>
react学习总结
查看>>
微软正式发布PowerShell Core 6.0
查看>>
Amazon发布新的会话管理器
查看>>
InfoQ趋势报告:DevOps 和云计算
查看>>
舍弃Python,为什么知乎选用Go重构推荐系统?
查看>>
在soapui上踩过的坑
查看>>
MySQL的字符集和字符编码笔记
查看>>
ntpd同步时间
查看>>