浅谈WPF之ToolTip工具提示

这篇具有很好参考价值的文章主要介绍了浅谈WPF之ToolTip工具提示。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

浅谈WPF之ToolTip工具提示

 

什么是工具提示?

 

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

创建工具提示

 

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

 

1. 本文工具提示

 

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

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

文本工具提示截图

浅谈WPF之ToolTip工具提示

 

2. 自定义工具提示

 

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

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

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

自定义工具提示截图

浅谈WPF之ToolTip工具提示

 

设置工具提示样式

 

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

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

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

浅谈WPF之ToolTip工具提示

 

定位工具提示

 

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

浅谈WPF之ToolTip工具提示

使用Placement定位

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

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

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

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

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

示例截图如下所示:
浅谈WPF之ToolTip工具提示

 

参考文献

 

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

 

以上就是【浅谈WPF之ToolTip工具提示】的全部内容,希望能够一起学习,共同进步。文章来源地址https://www.toymoban.com/news/detail-760711.html

到了这里,关于浅谈WPF之ToolTip工具提示的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • jQuery UI 实例 - 工具提示框(Tooltip)

    可自定义的、可主题化的工具提示框,替代原生的工具提示框。 如需了解更多有关 tooltip 部件的细节,请查看 API 文档 工具提示框部件(Tooltip Widget)。 悬停在链接上,或者使用 tab 键循环切换聚焦在每个元素上。 悬停在链接上,或者使用 tab 键循环切换聚焦在每个元素上。

    2024年02月02日
    浏览(39)
  • [element-ui] el-table表格头添加图标-鼠标移入显示el-tooltip提示信息

    只是单纯的想在table中添加图标和tooltip 在el-table-column中绑定:render-header=“renderPrice” (此方法无法使tooltip换行) 方法二、 使用组件插槽,elementui已封装好 elementUI表格头添加图标-鼠标移入显示el-tooltip提示信息

    2024年02月11日
    浏览(50)
  • 浅谈WPF之MVVM工具包

    在之前的WPF示例中,都会用到一个MVVM框,也是一个比较常的MVVM框架,就是MVVM工具包【CommunityToolkit.Mvvm】,今天专门以一个简单的小例子,简述一下MVVM工具包的常见用法,仅供学习分享使用,如有不足之处,还请指正。     CommunityToolkit.Mvvm 包(又名 MVVM 工具包)是一个现代

    2024年03月25日
    浏览(87)
  • cesium 绘制工具 鼠标提示tips工具组件

    本专题主要是针对学习cesium小伙伴,在项目中实践总结的一些工具,以及会详细介绍,知识和封装的原理,废话不多说,此文介绍的是,鼠标提示tips工具组件,在项目中使用会优化交互效果,对客户友好,例如标绘工具,地图操作。 之前在网上看到的都是,通过动态创建,

    2024年03月21日
    浏览(50)
  • 向量转置在计算机视觉中的应用

    计算机视觉(Computer Vision)是一门研究如何让计算机理解和理解图像和视频的科学。在过去的几十年里,计算机视觉已经取得了显著的进展,从简单的图像处理任务到复杂的视觉定位、目标识别和场景理解等复杂任务。向量转置(Vector Transpose)是一种常用的数学操作,在计算机视

    2024年02月20日
    浏览(36)
  • element-ui使用el-tooltip文本超出时,tooltip文字提示,否则不提示

    如果你遇到了vue项目element使用el-tooltip时,超出时显示tooltip提示,不超出内容则不显示,请看下面教程。 超出时会显示…,鼠标悬浮出现提示内容,没有超出时,鼠标悬浮不会显示,请看图 直接上代码 data中: methods中:

    2024年02月11日
    浏览(61)
  • 【CSS】手写 Tooltip 提示组件

    效果展示:

    2024年02月15日
    浏览(38)
  • 浅谈日常使用的 Docker 底层原理-三大底座

    适合的读者,对Docker有过简单了解的朋友,想要进一步了解Docker容器的朋友。 回想我这两年,一直都是在使用 Docker,看过的视频、拜读过的博客,大都是在介绍 Docker 的由来、使用、优点和发展趋势,但对于 Docker 底层到底是如何实现,却是没有提起太多 ,当然也是我太菜啦

    2024年02月11日
    浏览(47)
  • element-ui中Tooltip文字提示——el-tooltip的样式修改

    注意 :以下修改都需要在全局样式修改,因为这个组件的层级,并不是在你使用他的地方,而是和你的app同一层级,所以在当前使用的地方找不到tip提示的dom节点。 修改提示框中长方形框的背景颜色 修改提示框中的小三角的边框颜色

    2024年02月11日
    浏览(76)
  • el-table溢出隐藏 鼠标移入显示tooltip逻辑

    文件 element-ui/packages/table/src/table-body.js 截取部分代码 记录点 鼠标事件 mouseenter / mouseleave (新), mouseover / mouseout (旧) 新的鼠标移入移出事件,去掉了冒泡和捕获的特性 mouseenter:鼠标第一次移动到元素区域时触发 (新) mouseleave:移出时触发(新) mousemove:在元素上移

    2024年02月10日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包