浅谈WPF之Popup弹出层

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

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

浅谈WPF之Popup弹出层

 文章来源地址https://www.toymoban.com/news/detail-778673.html

什么是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属性进行绑定

示例截图效果如下所示:

浅谈WPF之Popup弹出层

 

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的滑入效果,如下所示:

浅谈WPF之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>

示例效果如下所示:

浅谈WPF之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进行停靠。如下所示

浅谈WPF之Popup弹出层

 

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>

偏移示例,如下所示:

浅谈WPF之Popup弹出层

 

参考文档

 

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

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

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

 

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

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

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

相关文章

  • # vue3 vant4 Tabbar 标签栏组件的封装 和Popup弹出层的封装

    需求如上,标签栏里第三个是图片,整个项目有两种场景, 标签栏正常跳转页面, 标签拦渲染别的图片时候,点击就是打开弹出层, 封装了标签栏,弹出层两部分,作为公共组件 标签栏的封装 徽标样式需要调整,list现在是自己暂时再state里写的假数据 下面是再使用标签组

    2024年01月20日
    浏览(67)
  • WPF弹出层

    前几天领导让我在WPF的查询页面添加一个弹出层,防止用户查询大量数据时疯狂点击查询按钮或其他地方,我想了想最后决定用一个新的窗口做弹出层,WPF上面的控件都是使用 “ Material Design In XAML Toolkit ” 做的。 我自己做的弹出层非常简单,就是一个窗体上放了一个会转的

    2024年02月04日
    浏览(73)
  • layer弹出层点击关闭按钮刷新父页面

    在弹出层页面,,找到layer关闭按钮,写一个关闭事件,里面去执行js方法。 例:页面写个a标签方便调用:a id=“hidalayerclose” style=“display: none;” οnclick=“fureload()”

    2024年04月22日
    浏览(42)
  • react-router-domV6.21.1版本结合ant design mobile的TabBar标签栏和Popup弹出层实现移动端路由配置

    react-router-dom在V6版本之后更换了很多的API名称,在ant design mobile的TabBar配置中还是之前的旧版本,比如使用了 switch 组件等。我们在这里使用新版本的react-router-dom进行react移动端的配置 首先使用npm下载最新版的react-router-dom 然后在main.tsx文件中引入,并且使用MemoryRouter作为我们

    2024年01月25日
    浏览(60)
  • 在layui弹出层遍历展示图片和文章详情里面点击放大图片

     借鉴:在layui弹出层遍历展示图片_layui弹出图片_其实不会敲代码的博客-CSDN博客 二、文章详情

    2024年02月12日
    浏览(60)
  • 微信小程序弹出层弹出后禁止页面滚动

    1.用一个view标签把页面禁止滚动部分包裹,并添加自定义类名 初始值为空 2. 在弹出层打开是,改变变量的值 3.给isNoRoll设置样式

    2024年02月08日
    浏览(91)
  • layui(3)——内置模块弹出层

      使用模块 layer 参数有: type :layer提供了5种层类型。可传入的值有:0(信息框,默认)   1(页面层)    2(iframe层)    3(加载层)     4(tips层) title   :标题  自定义标题区域样式,那么你可以title: [\\\'文本\\\', \\\'\\\'],数组第二项可以写任意css样式 content   :内容

    2024年02月08日
    浏览(53)
  • Layui + Flask | 弹出层(组件篇)(04)

    提示:点击阅读原文体验更佳 https://layui.dev/docs/2.8/layer/ 弹出层组件 layer 是 Layui 最古老的组件,也是使用覆盖面最广泛的代表性组件。在实现网页弹出层的首选交互方案,使用的非常频繁。 layer.open(options); 参数 options : 基础属性配置项。 打开弹层的核心方法,其他不同类型

    2024年02月09日
    浏览(45)
  • Flutter:自定义组件的上下左右弹出层

    最近要使用Flutter实现一个下拉菜单,需求就是,在当前组件下点击,其下方弹出一个菜单选项,如下图所示: 实现起来,貌似没什么障碍,在Flutter中本身就提供了弹出层PopupMenuButton组件和showMenu方法,于是开搞,代码如下: 直接使用showMenu也行,代码如下: PopupMenuButton运行

    2024年02月10日
    浏览(72)
  • 原生微信小程序实现弹出层效果

    WXML JS WXSS 效果图

    2024年02月16日
    浏览(53)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包