C#-ToolTIp和Popup简单使用

简介: 很多时候我们需要做一个提示框,来给用户说明这个元素的作用,比如鼠标移动到哪个元素上面,显示一个弹出框并显示这个元素的相关介绍,想到提示内容,我们很容易想到toolip和Popup,接下来就来分别是用一下这两个控件。

很多时候我们需要做一个提示框,来给用户说明这个元素的作用,比如鼠标移动到哪个元素上面,显示一个弹出框并显示这个元素的相关介绍,想到提示内容,我们很容易想到toolip和Popup,接下来就来分别是用一下这两个控件。

ToolTip

首先,新建一个wpf项目,然后我们在主窗口里面放入一个button,设置这个button的tooltip值,即是需要提示的内容,这个实现起来很简单吧。

<Windowx:Class="PopupTest.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:local="clr-namespace:PopupTest"mc:Ignorable="d"Title="MainWindow"Height="450"Width="800"><Grid><ButtonContent="ToolTip"HorizontalAlignment="Left"Height="31"Margin="39,32,0,0"VerticalAlignment="Top"Width="131"ToolTip="这是一个button"></Button></Grid></Window>

接下来,我们需要往提示里面加点内容,比如标题啥的,你可以使用xaml对象来实现。

<Windowx:Class="PopupTest.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:local="clr-namespace:PopupTest"mc:Ignorable="d"Title="MainWindow"Height="450"Width="800"><Grid><ButtonContent="ToolTip"HorizontalAlignment="Left"Height="31"Margin="39,32,0,0"VerticalAlignment="Top"Width="131"><Button.ToolTip><ToolTip><StackPanel><TextBlock>标题</TextBlock><TextBlock>这是一个button</TextBlock></StackPanel></ToolTip></Button.ToolTip></Button></Grid></Window>

当你把鼠标放到按钮上的时候会出现提示框,过5s之后,提示就会消失了,如果想要改变显示的时间又该怎么办呢?那么就要用到ToolTipService属性了,这里有三个属性需要了解下: InitialShowDelay鼠标移动上去到显示提示框出现之间的时间,BetweenShowDelay当第二个工具提示在没有延迟的情况下显示时,两个工具提示的显示之间的最大时间,ShowDuration工具提示保持可见的时间。

<Windowx:Class="PopupTest.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:local="clr-namespace:PopupTest"mc:Ignorable="d"Title="MainWindow"Height="450"Width="800"><Grid><ButtonContent="ToolTip"HorizontalAlignment="Left"Height="31"Margin="39,32,0,0"VerticalAlignment="Top"Width="131"ToolTipService.InitialShowDelay="1000"ToolTipService.ShowDuration="3000"ToolTipService.BetweenShowDelay="2000"><Button.ToolTip><ToolTip><StackPanel><TextBlock>标题</TextBlock><TextBlock>这是一个button</TextBlock></StackPanel></ToolTip></Button.ToolTip></Button></Grid></Window>

你也可以采用Popup这个控件来做一个提示框的效果。什么是Popup控件?简单的来说就是弹出窗口,MSDN的解释是Popup控件通过当前的应用程序窗口相对于指定的元素或屏幕坐标浮动的单独窗口中显示内容。

<ButtonHeight="31"Margin="206,32,456.333,0"VerticalAlignment="Top"Width="131"><StackPanel><Popup><TextBlock>这是一个button</TextBlock></Popup></StackPanel></Button>

Popup不会像ToolTip一样自动弹出来,如果要显示需要设置Isopen="true",上面的这种写法有个问题,这个button的内容相当于已经设置为Popup如果你要在button里面加上文字可以这样改写。将Popup拿到button外面,设置PlacementTarget属性,作用于你需要的控件上。

<ButtonName="btnpopup"Height="31"Margin="206,32,456.333,0"VerticalAlignment="Top"Width="131"></Button><PopupIsOpen="True"PlacementTarget="{Binding ElementName=btnpopup}"><TextBlockBackground="#FFFCFBFB">这是一个button</TextBlock></Popup>

这样我们运行的时候这个弹出框就会一直显示在那里,很显然不是我们想要的效果,我们需要的是鼠标移动到按钮上就显示提示,鼠标离开之后提示框消失,这就需要增加两个鼠标事件了,MouseEnter以及MouseLeave事件。

<ButtonName="btnpopup"Height="31"Margin="206,32,456.333,0"VerticalAlignment="Top"Width="131"MouseEnter="btnpopup_MouseEnter"MouseLeave="btnpopup_MouseLeave"></Button><PopupName="popupname"PlacementTarget="{Binding ElementName=btnpopup}"><TextBlockBackground="#FFFCFBFB">这是一个button</TextBlock></Popup>privatevoidbtnpopup_MouseEnter(objectsender, MouseEventArgse){
popupname.IsOpen=true;
}privatevoidbtnpopup_MouseLeave(objectsender, MouseEventArgse){
popupname.IsOpen=false;
}

这个时候就有点我们想要的效果了,运行我们发现这个弹出框显示在按钮的下方了,我们想要改变一下它的位置,让它显示到右边去,这个时候要设置方位的属性了,Placement=right,placement有好几个值,各代表着不同位置设置,有兴趣的查看一下官方文档。

<PopupName="popupname"PlacementTarget="{Binding ElementName=btnpopup}"Placement="Right"><TextBlockBackground="#FFFCFBFB">这是一个button</TextBlock></Popup>

好了,这两个控件我们先简单的介绍这么多,可以查看下面的参考资料进行详细了解,下次我们实现这样一个功能吧,如果实现将鼠标移动到list的某一项时,显示list这一项的内容?同样的用这两种方式实现。

参考资料

ToolTip概述

https://docs.microsoft.com/zh-cn/dotnet/framework/wpf/controls/how-to-position-a-tooltip

Popup概述

https://docs.microsoft.com/zh-cn/dotnet/framework/wpf/controls/popup-overview

目录
相关文章
|
4月前
|
移动开发 JavaScript 小程序
uView Popup 弹出层
uView Popup 弹出层
81 0
|
12月前
|
图形学
|
12月前
|
JavaScript
jQuery 显示隐藏动画 show(); hide(); toggle();
jQuery 显示隐藏动画 show(); hide(); toggle();
65 0
|
4月前
|
移动开发 JavaScript 小程序
uView Tooltip 长按提示
uView Tooltip 长按提示
45 1
|
4月前
el-dialog中内容自定义滚动条
el-dialog中内容自定义滚动条
125 0
|
12月前
element-ui框架的el-dialog弹出框被遮罩层挡住了/el-drawer....会生成v-model元素的组件被遮罩层挡住
element-ui框架的el-dialog弹出框被遮罩层挡住了/el-drawer....会生成v-model元素的组件被遮罩层挡住
331 1
|
JavaScript 前端开发
mui 日期控件的用法
mui 日期控件的用法
162 0
element-ui框架的el-dialog弹出框被遮罩层遮挡问题
element-ui框架的el-dialog弹出框被遮罩层遮挡问题
484 0
|
小程序 前端开发 容器
【微信小程序】常用组件基本使用(view/scroll-view/swiper、text/rich-text、button/image)
【微信小程序】常用组件基本使用(view/scroll-view/swiper、text/rich-text、button/image)
211 0
element-ui框架的el-dialog弹出框被遮罩层挡住了
element-ui框架的el-dialog弹出框被遮罩层挡住了
317 0
element-ui框架的el-dialog弹出框被遮罩层挡住了