这段时间实在是忙所以没能抽出时间来写博客本篇文章将提到如何自定义提示信息
在Silverlight中可以通过两种方式来实现
1.ToolTipService.ToolTip
2.PopupControl控件
首先创建
个名为TooltipDemo
新Silverlight Application在默认
Page.xaml文件中创建3个Control控件(Button,Rectangle和Ellipse各个)如下
首先采用第
种方式来给新创建Button个提示信息如下
按CTRL+F5直接运行网站WebSite
并将鼠标移到Button上提示信息如下
这种方式
提示信息比较单调(只能用文字做提示信息)而且位置只能在鼠标右下角(默认值)我们使用Rectangle来展示使用ToolTipService.ToolTip
另外种自定义信息方式如下
在上图
黄色区域你可以让任意Control控件作为提示信息(图片
视频以及其他普通信息)在这里
为了展示方便我只是添加了个圆作为提示信息代码如下:
<RectangleFill="Yellow"Height="80"Margin="10">
<ToolTipService.ToolTip>
<ToolTipHorizontalOff
="-20"VerticalOff="-30">
<EllipseFill="Green"Width="30"Height="30"></Ellipse>
</ToolTip>
</ToolTipService.ToolTip>
</Rectangle>其中HorizontalOff
和VerticalOff分别代表提示信息将离你鼠标当前位置水平和垂直距离(通过这两个参数你就不用再忍受提示信息总是在鼠标右下角的苦了)
启动网站WebSite
我们可以得到如下效果图(鼠标位置截图截不下来
用个红色框框起来就是创建黄色矩形提示信息)
另外
种展示提示信息方式就是使用PopupControl控件首先在StackPanel中添加
个新Popup空间并赋予其个名字接下来提供Popup
内容也就是提示内容了(这里我添加提示内容是个深天蓝色矩形)这个Popup
代码如下:<Popupx:Name="tip">
<RectangleFill="DeepSkyBlue"Width="60"Height="40"/>
</Popup>另外给需要提供提示信息
Ellipse创建两个事件动作MouseMove和MouseLeave如下<EllipseFill="Red"Width="120"Height="80"MouseLeave="Ellipse_MouseLeave"MouseMove="Ellipse_MouseMove"/>打开Page.xaml.cs文件并给这两个事件添加控制代码如下:
1privatevoidEllipse_MouseLeave(objectsender,MouseEventArgse)
2{
3 this.tip.IsOpen=false;
4}
5
6privatevoidEllipse_MouseMove(objectsender,MouseEventArgse)
7{
8 this.tip.IsOpen=true;
9 this.tip.HorizontalOff=e.GetPosition(null).X+20;
10 this.tip.VerticalOff=e.GetPosition(null).Y-20;
11}这里也使用到了HorizontalOff
和VerticalOff(用来控制提示信息出现位置) 但是PopupControl控件
这两个属性和的前ToolTip定义空间坐标原点是不样Tooltip
原点是鼠标当前所在位置而Popup
原点是浏览器最左上角也就是浏览器(0,0)点Popup用IsOpen属性来控制是否可见
e.GetPosition(null)将获得当前鼠标所在地相对于浏览器最左上角
坐标效果图如下:
提示信息
位置将根据鼠标位置移动而移动
最新评论