浅谈WPF之Popup弹出层

在日常开发中,当点击某控件时,经常看到一些弹出框,停靠在某些页面元素的附近,但这些又不是真正的窗口,而是页面的一部分,那这种功能是如何实现的呢?今天就以一个简单的小例子,简述如何在WPF开发中,通过Popup实现鼠标点击弹出浮动停靠窗口,仅供学习分享使用,如有不足之处,还请指正。

什么是Popup?

Popup(弹出层),Popup 控件提供一种在单独窗口中显示内容的方法,该窗口相对于指定元素或屏幕坐标在当前应用程序窗口上浮动。  Popup控件通过IsOpen属性控制是否可见。 当可见时,IsOpen 属性设置为 true,否则为 false

创建Popup

在WPF程序开发中,Popup和其他控件一样,可以定义控件的内容,创建Popup示例如下所示:

<ToggleButton x:Name="TogglePopupButton" Height="30" Width="150" HorizontalAlignment="Left"><StackPanel><TextBlock VerticalAlignment="Center" HorizontalAlignment="Center"><Run Text="是否状态切换? " /><Run Text="{Binding IsChecked, ElementName=TogglePopupButton}" /></TextBlock><Popup Name="myPopup" IsOpen="{Binding IsChecked, ElementName=TogglePopupButton}"><Border BorderThickness="1"><TextBlock Name="myPopupText" Text="这是一段弹出内容" Background="LightBlue" Foreground="Blue" Padding="30"></TextBlock></Border></Popup></StackPanel>
</ToggleButton>

 

注意:上述示例,当ToggleButton被选中时,弹出提示内容;当ToggleButton取消选中时,隐藏弹出层。主要是将Popup的IsOpen属性和ToggleButton的IsChecked属性进行绑定

示例截图效果如下所示:

Popup的行为

通过Popup的IsOpen属性,来控制弹出层的显示与隐藏,当打开或关闭 Popup 内容窗口时,将引发 Opened 和 Closed 事件。默认情况下,当IsOpen属性为true时,将一直处于打开状态,直到属性变为false。但是也可以通过StaysOpen属性设置来判断Popup是否处于focus状态而决定是否显示,当StaysOpen属性为false时,如果Popup失去焦点,将会隐藏。StaysOpen默认值为true

Popup动画

Popup控件,默认支持淡入,滑入等动画效果,可通过PopupAnimation属性进行设置,并且设置AllowsTransparency为true。除了之处默认的淡入,滑入等动画效果外,还可以通过自定义StoryBoard来实现动画。

<CheckBox x:Name="myCheckBox" Width="50" Height="50" HorizontalAlignment="Left" VerticalAlignment="Top"></CheckBox>
<Popup Grid.Column="0" IsOpen="{Binding ElementName=myCheckBox,Path=IsChecked}" PlacementTarget="{Binding ElementName=myCheckBox}" AllowsTransparency="True" PopupAnimation="Slide" HorizontalOffset="50" VerticalOffset="20" Margin="10" Width="200" Height="200"><Canvas Width="100" Height="100" Background="DarkBlue"><TextBlock TextWrapping="Wrap" Foreground="White" Text="旋转Popup" VerticalAlignment="Center" HorizontalAlignment="Center" Canvas.Top="40" Canvas.Left="18"></TextBlock></Canvas>
</Popup>

 

上述示例,设置了Popup的两个属性【AllowsTransparency="True" PopupAnimation="Slide"】来实现Popup的滑入效果,如下所示:

定义Popup的位置

Popup作为弹出层,可以相对页面上的控件元素进行定位,也可以相关整个窗口进行定位

1. 通过PlacementTarget和Placement进行定位

PlacementTarget为Popup指定相对定位的目标对象。如果已设置 PlacementTarget 属性,则它指定目标对象。 如果未设置 PlacementTarget 并且 Popup 具有父级,则父级就是目标对象。 如果没有 PlacementTarget 值并且没有父级,则没有目标对象并且 Popup 相对于屏幕进行定位。Placement为枚举类型,常用的有Bottom,Top,Left,Right等,示例如下所示:

<Button x:Name="button1" Grid.Column="1" Width="120" Height="100" Content="目标对象"></Button>
<Popup IsOpen="True" PlacementTarget="{Binding ElementName=button1}" Placement="Bottom"><TextBlock FontSize="14" Background="LightGreen">底部</TextBlock>
</Popup>
<Popup IsOpen="True" PlacementTarget="{Binding ElementName=button1}" Placement="Top"><TextBlock FontSize="14" Background="LightGreen">顶部</TextBlock>
</Popup>
<Popup IsOpen="True" PlacementTarget="{Binding ElementName=button1}" Placement="Left"><TextBlock FontSize="14" Background="LightGreen">左侧</TextBlock>
</Popup>
<Popup IsOpen="True" PlacementTarget="{Binding ElementName=button1}" Placement="Right"><TextBlock FontSize="14" Background="LightGreen">右侧</TextBlock>
</Popup>

 

示例效果如下所示:

2. PlacementRectangle目标区域进行定位

除此之外,还可以通过PlacementRectangle设置目标区域

目标区域示例如下所示:

<StackPanel Orientation="Horizontal" Grid.Row="1"><Canvas Width="200" Height="100" Background="Red"><Rectangle Canvas.Top="30" Canvas.Left="30" Width="50" Height="50" Stroke="White" StrokeThickness="3"/><Popup IsOpen="True" PlacementRectangle="30,30,30,50"><TextBlock FontSize="14" Background="Yellow" Width="140" TextWrapping="Wrap" Text="这是通过PlacementRectangle定位的Popup"></TextBlock></Popup></Canvas><Canvas Width="200" Height="100" Background="Red" Margin="30,0,0,0"><Rectangle Canvas.Top="30" Canvas.Left="50" Width="50" Height="50" Stroke="White" StrokeThickness="3"/><Popup IsOpen="True"><TextBlock FontSize="14" Background="Yellow" Width="140" TextWrapping="Wrap" Text="这是没有通过PlacementRectangle定位的Popup"></TextBlock></Popup></Canvas></StackPanel>

 

以上示例通过设置PlacementRectangle属性来目标区域【目标区域并不会真的可见】。没有设置则以父类Canvas进行停靠。如下所示

3. 通过HorizontalOffset 和 VerticalOffset设置偏移进行定位

不仅可以设置目标区域,还可以通过HorizontalOffset 和 VerticalOffset 属性使 Popup 从目标区域偏移等。

<Canvas Width="200" Height="200" Background="Yellow" Margin="20"><Popup IsOpen="True" Placement="Bottom"HorizontalOffset="20" VerticalOffset="20"><TextBlock FontSize="14" Background="#42F3FD">This is a popup.</TextBlock></Popup>
</Canvas>

 

偏移示例,如下所示:

参考文档

在本篇文章中,主要参考官方文档,如下所示:

1. https://learn.microsoft.com/zh-cn/dotnet/desktop/wpf/controls/popup?view=netframeworkdesktop-4.8

以上就是浅谈WPF之Popup的全部内容,关于更多详细内容,可参考官方文档。希望能够一起学习,共同进步。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/614251.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python Matplotlib 库使用基本指南

简介 Matplotlib 是一个广泛使用的 Python 数据可视化库&#xff0c;它可以创建各种类型的图表、图形和可视化效果。无论是简单的折线图还是复杂的热力图&#xff0c;Matplotlib 提供了丰富的功能来满足我们的数据可视化需求。本指南将详细介绍如何安装、基本绘图函数以及常见…

FindTheIndexOfTheFirstOccurrenceInAString 【找到第一个匹配的下标】

双指针 字串的所有的字符都匹配完&#xff0c;匹配成功。 如果要与之匹配的字符串剩下的长度小于字串的长度&#xff0c;即剩下的已经不会再满足。 public int strStr(String haystack, String needle) {int index -1, i0, j0;for(i0; i<haystack.length()-needle.length(…

贪心算法Day06

#738.单调递增的数字 力扣题目链接(opens new window) 给定一个非负整数 N&#xff0c;找出小于或等于 N 的最大的整数&#xff0c;同时这个整数需要满足其各个位数上的数字是单调递增。 &#xff08;当且仅当每个相邻位数上的数字 x 和 y 满足 x < y 时&#xff0c;我们…

【Redis】Redis面试热点

Redis 集群有哪些方案&#xff1f; 主从复制&#xff1a;解决了高并发问题 哨兵模式&#xff1a;解决了高并发&#xff0c;高可用问题 分片集群&#xff1a;解决了海量数据存储&#xff0c;高并发写的问题 主从复制 图示&#xff1a; 主从复制&#xff1a;单节点 Redis 并发…

NPN PNP SS8050 SS8550 S8050

SS8050的使用及引脚判断方法 今天讲的是NPN型三极管SS8050&#xff0c;主要分为以下几个方面&#xff1a; 一、前言 二、SS8050简介 三、NPN三极管与PNP三极管 四、三极管管脚识别方法 五、不拆卸三极管判断其好坏 六、S8050和SS8050的区别 七、三极管与MOS管的区别 八…

nginx基础面试题以及配置文件解析和命令控制

目录 1、nginx是什么 2、nginx的特点 3、为什么中国大陆有&#xff1a;百度、京东、新浪、网易、腾讯、淘宝等这么多用户使用nginx 4、nginx 的内部技术架构 上一期我们配置安装了nginx接着讲一下nginx配置文件的解析和nginx 命令控制 感谢观看&#xff01;希望能够帮助到…

mapper向mapper.xml传参中文时的乱码问题

1.起因&#xff1a; 在idea中进行模糊查询传参时&#xff0c;发现在idea中查中文查不出记录&#xff0c;在navicate中可以查出来。 2.猜测&#xff1a; 1.idea中的编码问题导致的乱码。 2.idea和navicate的编码一致性导致的乱码。 3.mapper向mapper.xml传参后出现乱码。 3.解…

Qt之数据转换与处理

从串口读取到的QByteAray数据一般需要进行提取和解析&#xff0c;此时就需要将QByteArray数拒转换为各种类型的数据。常用的转换包括&#xff1a; &#xff08;1&#xff09; 转为Hex&#xff0c;用于显示十六进制&#xff0c;这点在调试时特别有用&#xff0c;因为大多HEX码是…

【Vue技巧】Vue2和Vue3组件上使用v-model的实现原理

ChatGPT4.0国内站点&#xff0c;支持GPT4 Vision 视觉模型&#xff1a;海鲸AI 在Vue中&#xff0c;v-model 是一个语法糖&#xff0c;用于在输入框、选择框等表单元素上创建双向数据绑定。当你在自定义组件中实现 v-model 功能时&#xff0c;你需要理解它背后的原理&#xff1a…

DFA算法实战-敏感词过滤

前言 这里的项目实战, 我们使用的是 SpringBoot2.xJDK1.8搭建的,核心思想是借助了Hutool工具类的 WordTree。想了解更多DFA算法的实现可以参考DFA算法的实现 实战案例 1. 引入Hutool的工具类 <dependency><groupId>cn.hutool</groupId><artifactId>…

Python 基础【八】--数据类型-字典【2024.1.11】

1.定义 字典的内容在花括号 {} 内&#xff0c;键-值&#xff08;key-value&#xff09;之间用冒号 : 分隔&#xff0c;键值对之间用逗号 , 分隔&#xff0c;比如创建字典 &#xff0c;如下所示&#xff1a; d{name:小明,age:18}# 使用 dict 函数&#xff1a;强转 # 方式一&am…

mysql group by 之后要把名字放到一个字段里边

分组后的其他字段去重 count(DISTINCT(product)) num_sold,分组后数据存放到一个字段 &#xff08;带着排序&#xff0c;在保存到一个字段&#xff09; group_concat(distinct product order by product separator ‘,’) select sell_date,count(DISTINCT(product)) num_so…

PX4开源项目中遇到的问题

开源项目 kaiyuanxiangmkmonemati/PX4-ROS2-Gazebo-YOLOv8: Aerial Object Detection using a Drone with PX4 Autopilot and ROS 2. PX4 SITL and Gazebo Garden used for Simulation. YOLOv8 used for Object Detection. (github.com) 首先创建python虚拟环境&#xff0c;克…

【一文详解】知识分享:(ASP.Net Core基础学习及快速入门)

背景知识 相关术语 .Net .NET是微软的一个开发平台&#xff0c;这个平台的一大特点就是跨语言性&#xff0c;不管是什么语言&#xff0c;c、c、c#、F#、J#、vb等语言都可以用这个平台合作开发&#xff1b; .NET&#xff0c;它是微软创建的一个用于构建多种不同类型的应用程…

python——combinations()函数详解

combinations() 函数位于 Python 的 itertools 模块中&#xff0c;用于生成一个可迭代对象&#xff0c;包含输入集合中所有长度为 r 的组合。 定义&#xff1a; combinations(iterable, r) 函数接受一个可迭代对象 iterable 和一个整数 r&#xff0c;返回一个包含所有长度为 r…

书生·浦语大模型实战营-学习笔记2

目录 轻松玩转书生浦语大模型趣味Demo1. 大模型及 InternLM 模型介绍2. InternLM-Chat-7B 智能対话 Demo3. Lagent 智能体工具调用 Demo4. 浦语•灵笔图文创作理解 Demo5. 通用环境配置实验记录6. 课后作业 视频地址&#xff1a; (2)轻松玩转书生浦语大模型趣味Demo 文档教程&a…

xtu oj 1237 孪生素数

题目描述 如果n和n2都是素数&#xff0c;我们称其为孪生素数&#xff0c;比如3和5&#xff0c;5和7都是孪生素数。 给你一个区间[a,b],请问期间有多少对孪生素数&#xff1f; 输入 第一行是一个整数K(K≤ 10000)&#xff0c;表示样例的个数。 以后每行一个样例&#xff0c;为两…

C#用string.Replace方法批量替换某一类字符串

目录 一、关于字符串及其操作常识 二、String.Replace 方法 1.重载 2.Replace(Char, Char) 3.Replace(String, String) &#xff08;1&#xff09;实例&#xff1a; &#xff08;2&#xff09;生成结果&#xff1a; 4.Replace(String, String, StringComparison) 5.…

python堆排序

堆排序是一种基于二叉堆数据结构的排序算法。它将待排序的数组看作是一个完全二叉树&#xff0c;并利用堆的性质进行排序。 堆排序的基本思想是先将待排序的数组构建成一个最大堆&#xff08;或最小堆&#xff09;&#xff0c;然后依次将堆顶元素与堆的最后一个元素交换&#…

2023年低代码无代码产业大会:核心内容与学习收获(附大会核心PPT下载)

2023年低代码无代码产业大会聚焦了行业最前沿的趋势与技术&#xff0c;为企业数字化转型提供新的思路和方法。在这次大会上&#xff0c;我们可以深入了解到低代码/无代码技术的最新发展&#xff0c;以及如何利用这些技术来提高业务效率和创新能力。 一、大会的核心内容 1、低代…