silverlight:Silverlight专题(4)-自定义提示信息

  首先向大家说声抱歉这段时间实在是忙所以没能抽出时间来写博客

  本篇文章将提到如何自定义提示信息

  在Silverlight中可以通过两种方式来实现

  1.ToolTipService.ToolTip

  2.PopupControl控件

  首先创建个名为TooltipDemoSilverlight Application

  在默认Page.xaml文件中创建3个Control控件(Button,Rectangle和Ellipse各个)如下

Silverlight专题(4)-自定义提示信息

  首先采用第种方式来给新创建Button个提示信息如下

Silverlight专题(4)-自定义提示信息

  按CTRL+F5直接运行网站WebSite并将鼠标移到Button上提示信息如下

Silverlight专题(4)-自定义提示信息

  这种方式提示信息比较单调(只能用文字做提示信息)而且位置只能在鼠标右下角(默认值)

  我们使用Rectangle来展示使用ToolTipService.ToolTip另外种自定义信息方式如下

Silverlight专题(4)-自定义提示信息

  在上图黄色区域你可以让任意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我们可以得到如下效果图(鼠标位置截图截不下来个红色框框起来就是创建黄色矩形提示信息)

Silverlight专题(4)-自定义提示信息

  另外种展示提示信息方式就是使用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)将获得当前鼠标所在地相对于浏览器最左上角坐标

  效果图如下:

Silverlight专题(4)-自定义提示信息

Silverlight专题(4)-自定义提示信息

  提示信息位置将根据鼠标位置移动而移动



Tags:  silverlight2 silverlight.2.0 silverlight是什么 silverlight

延伸阅读

最新评论

发表评论