浅谈WPF之ToolTip工具提示

简介: 在日常应用中,当鼠标放置在某些控件上时,都会有相应的信息提示,从软件易用性上来说,这是一个非常友好的功能设计。那在WPF中,如何进行控件信息提示呢?这就是本文需要介绍的ToolTip【工具提示】内容,本文以一些简单的小例子,简述如何在WPF开发中,应用工具提示,仅供学习分享使用,如有不足之处,还请指正。

在日常应用中,当鼠标放置在某些控件上时,都会有相应的信息提示,从软件易用性上来说,这是一个非常友好的功能设计。那在WPF中,如何进行控件信息提示呢?这就是本文需要介绍的ToolTip【工具提示】内容,本文以一些简单的小例子,简述如何在WPF开发中,应用工具提示,仅供学习分享使用,如有不足之处,还请指正。

 

什么是工具提示?

 

工具提示是一个小型的弹出窗口,在用户将鼠标指针悬停在某个元素(如 Button)上时显示。当用户将鼠标指针移动到具有工具提示的元素上时,将在一段指定的时间内显示一个包含工具提示内容(例如,介绍控件功能的文本内容)的窗口。 如果用户将鼠标指针从控件上移开,该窗口将消失,因为工具提示内容无法接收焦点。工具提示的内容可以包含一行或多行文本、图像、形状或其他可视内容


创建工具提示

 

凡是继承自FrameworkElement和FrameworkContentElement的控件,都具有ToolTip属性,为object类型,即接收任何类型的属性设置。

 

1. 本文工具提示

 

可以将一段文本赋值给控件的ToolTip属性,如下所示:

<ButtonContent='测试'Width="120"Height="30"ToolTip="这是一个测试按钮"></Button><ImageGrid.Row="1"Source="/images/001.png"Stretch="Fill"Width="200"Height="100"ToolTip="这是一张图片"></Image>

文本工具提示截图

 

2. 自定义工具提示

 

工具提示可以是一段文本,也可以是一个组合的自定义对象。比如:一个带有图标的工具提示,如下所示 :

<ButtonContent='工具提示'Width="120"Height="30"Grid.Column="1"><Button.ToolTip><StackPanelOrientation="Horizontal"><PathData="{StaticResource icon_info}"Stroke="#F69661"Stretch="Fill"StrokeThickness="1"Fill="#F69661"Width="20"Height="20"VerticalAlignment="Center"Margin="2"></Path><TextBlockText="这是一个带图标的工具提示"VerticalAlignment="Center"Margin="2"></TextBlock></StackPanel></Button.ToolTip></Button>

以上示例,工具提示为一个图标,一个文本提示,水平排列。以为ToolTip的内容只能有一个Child,所以用StackPanel包括起来,作为一个整体。

自定义工具提示截图

 

设置工具提示样式

 

工具提示和普通的控件一样,也可以设置样式【如:背景色,前景色,字体大小等】,如下所示:

<Window.Resources><StyleTargetType="ToolTip"><SetterProperty = "HorizontalOffset"Value="10"/><SetterProperty = "VerticalOffset"Value="10"/><SetterProperty = "Background"Value="LightBlue"/><SetterProperty = "Foreground"Value="Purple"/><SetterProperty = "FontSize"Value="14"/><SetterProperty = "FontWeight"Value="Bold"/></Style></Window.Resources>

设置样式后的工具提示,如下图所示:

 

定位工具提示

 

可以使用在 ToolTip 和 ToolTipService 类中定义的五个属性集来定位工具提示。 下表显示这两组五个属性,并根据类提供指向其参考文档的链接。

使用Placement定位

Placement的值是一个枚举,常用的有:Bottom,Top,Left,Right,Center等。下图显示使用 Placement 属性放置工具提示:

下图显示使用 Placement 和 PlacementRectangle 属性放置工具提示:

下图显示使用 Placement、PlacementRectangle 和 Offset 属性放置工具提示:

工具提示定位综合示例,如下所示:

<EllipseHeight="25"Width="50"Grid.Row="1"Fill="Gray"ToolTipService.InitialShowDelay="1000"ToolTipService.ShowDuration="7000"ToolTipService.BetweenShowDelay="2000"><Ellipse.ToolTip><ToolTipPlacement="Right"PlacementRectangle="50,0,0,0"HorizontalOffset="10"VerticalOffset="20"HasDropShadow="false"><BulletDecorator><BulletDecorator.Bullet><EllipseHeight="10"Width="20"Fill="Blue"/></BulletDecorator.Bullet><TextBlock>Uses the ToolTip Class</TextBlock></BulletDecorator></ToolTip></Ellipse.ToolTip></Ellipse>

示例截图如下所示:

 

参考文献

 

1. 官方文档:https://learn.microsoft.com/zh-cn/dotnet/desktop/wpf/controls/tooltip-overview?view=netframeworkdesktop-4.8

 

以上就是【浅谈WPF之ToolTip工具提示】的全部内容,希望能够一起学习,共同进步。

相关文章
|
6天前
|
前端开发 C#
浅谈WPF之Popup弹出层
在日常开发中,当点击某控件时,经常看到一些弹出框,停靠在某些页面元素的附近,但这些又不是真正的窗口,而是页面的一部分,那这种功能是如何实现的呢?今天就以一个简单的小例子,简述如何在WPF开发中,通过Popup实现鼠标点击弹出浮动停靠窗口,仅供学习分享使用,如有不足之处,还请指正。
68 0
|
C#
WPF自定义TabControl样式
原文:WPF自定义TabControl样式 WPF自定义TabControl,TabControl美化 XAML代码: ...
4703 0
|
C#
【WPF】使用Popup控件做浮窗/提示框
原文:【WPF】使用Popup控件做浮窗/提示框 需求:当鼠标移入某个区域时,弹出一个浮窗,以便用户进行下一步操作。 效果如下图: 当鼠标移入左上角的【多选显示】框内,出现下面的浮窗(悬浮在原UI之上)。
4215 0
|
容器 网络架构 C#
WPF 控件库——可拖动选项卡的TabControl
原文:WPF 控件库——可拖动选项卡的TabControl 一、先看看效果   二、原理 1、选项卡大小和位置   这次给大家介绍的控件是比较常用的TabControl,网上常见的TabControl样式有很多,其中一部分也支持拖动选项卡,但是带动画效果的很少见。
1482 0
|
C#
WPF 4 DataGrid 控件(自定义样式篇)
原文:WPF 4 DataGrid 控件(自定义样式篇)      在《WPF 4 DataGrid 控件(基本功能篇)》中我们已经学习了DataGrid 的基本功能及使用方法。本篇将继续介绍自定义DataGrid 样式的相关内容,其中将涉及到ColumnHeader、RowHeader、Row、Cell 的各种样式设置。
2492 0
WinForm——Tooltip
WinForm——Tooltip
180 0
|
C# 数据格式 XML
wpf之自定义滚动条
原文:wpf之自定义滚动条 首先我们添加一个带滚动条的textbox控件: 这里 VerticalScrollBarVisibility="Auto"表示是超出垂直距离自动显示滚动条,当然这个滚动条是win系统自带的效果,我们要修改的就是这部分,需要对滚动区域的模板进行自定义修改。
1599 0
|
C#
WPF CheckBox 样式
原文:WPF CheckBox 样式     ...
1658 0
|
C#
用WPF实现在ListView中的鼠标悬停Tooltip显示
原文:用WPF实现在ListView中的鼠标悬停Tooltip显示 一、具体需求描述     在WPF下实现,当鼠标悬停在ListView中的某一元素的时候能弹出一个ToolTip以显示需要的信息。 二、代码实现 在.XMAL文件中   Code   在listview 元素中加入ItemContainerStyle="{StaticResource InfoTipStyle}" 如下所示代码: Code   三、心得     调用顺序就是listview呈现出预定的style, InfoTipStyle 调用声明好的tooltip。
1745 0
|
C#
WPF 圆角输入框
原文:WPF 圆角输入框 今天打算来做一个圆角的输入框 默认输入框:   这个输入框不好看,并且在XP 跟 WIN 7  WIN10 效果 都不太一样   我们今天不用模板的方式,而是 最简单的方式 来实现 圆角 输入框;     ------------------------...
1332 0