当前位置: 首页 > news >正文

详细介绍:wpf之 Popup

详细介绍:wpf之 Popup

在这里插入图片描述

前言

Popup 在WPF中用于创建浮动内容的控件,它显示在其他内容之上,常用于工具提示、弹出菜单等场景

1、IsOpen

指示是否显示控件,值为true显示控件,值为false不显示控件。

2、PlacementTarget

PlacementTarget 属性用于指定 Popup 相对于哪个控件进行定位,是控制 Popup 显示位置的关键属性,与 Placement 属性配合使用,下面的代码中指定Popup相对于btn1按钮定位,并且由于Placement="Left"所以是在btn1按钮的左边显示
在这里插入图片描述

<Window x:Class="wpf之Popup.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:wpf之Popup"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid><Grid.RowDefinitions><RowDefinition Height="1*" /><RowDefinition Height="1*" /></Grid.RowDefinitions ><Grid.ColumnDefinitions><ColumnDefinition Width=" *"/><ColumnDefinition Width="*"/></Grid.ColumnDefinitions><Button  x:Name="btn1"  Grid.Column=" 0" Grid.Row=" 0" Width="100"   Height=" 100" Background="Gray" Margin="3" Click="Button_Click"  HorizontalAlignment="Center" /><Button  x:Name="btn2"   Grid.Column=" 1" Grid.Row=" 1"   Width="100"   Height=" 100" Background="Gray" Click="Button_Click_1"   HorizontalAlignment="Center"/><Popup x:Name="pop_test1"  IsOpen="false" PlacementTarget="{Binding ElementName=btn1}" Placement="Left" StaysOpen="True"       AllowsTransparency="False"   PopupAnimation="None"  FlowDirection="LeftToRight" ><Border Background="#80FF0000" CornerRadius="10" Width="100" Height="100"><StackPanel Grid.Row=" 0" Orientation="Horizontal"  ><Button Width=" 50" Height=" 50" Background="Red"   /><Button Width=" 50" Height=" 50"  Background="Blue"   /></StackPanel ></Border></Popup ></Grid></Window>

3、Placement

指示Popup相对于PlacementTarget指定的控件的放置位置。
1)Absolute
相对于屏幕左上角定位
在这里插入图片描述
下面的代码指定Popup在距离屏幕左上角水平方向100(HorizontalOffset=“100”) ,垂直方向200(VerticalOffset=“200”)的位置显示。

<Window x:Class="wpf之Popup.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:wpf之Popup"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid><Grid.RowDefinitions><RowDefinition Height="1*" /><RowDefinition Height="1*" /></Grid.RowDefinitions ><Grid.ColumnDefinitions><ColumnDefinition Width=" *"/><ColumnDefinition Width="*"/></Grid.ColumnDefinitions><Button  x:Name="btn1"  Grid.Column=" 0" Grid.Row=" 0" Width="100"   Height=" 100" Background="Gray" Margin="3" Click="Button_Click"  HorizontalAlignment="Center" /><Button  x:Name="btn2"   Grid.Column=" 1" Grid.Row=" 1"   Width="100"   Height=" 100" Background="Gray" Click="Button_Click_1"   HorizontalAlignment="Center"/><Popup x:Name="pop_test1"  IsOpen="false"  Placement="Absolute"   HorizontalOffset="100" VerticalOffset="200" StaysOpen="True"       AllowsTransparency="False"   PopupAnimation="None"  FlowDirection="LeftToRight" ><Border Background="#80FF0000" CornerRadius="10" Width="100" Height="100"><StackPanel Grid.Row=" 0" Orientation="Horizontal"  ><Button Width=" 50" Height=" 50" Background="Red"   /><Button Width=" 50" Height=" 50"  Background="Blue"   /></StackPanel ></Border></Popup ></Grid></Window>

2)Relative
相对于指定的矩形左上角定位,矩形的坐标的原点在窗体的左上角
在这里插入图片描述
下面的代码指定popup在矩形(PlacementRectangle=“100,200,1000,1000” )指定的距离窗体左边100,上边200的位置显示。

<Window x:Class="wpf之Popup.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:wpf之Popup"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid><Grid.RowDefinitions><RowDefinition Height="1*" /><RowDefinition Height="1*" /></Grid.RowDefinitions ><Grid.ColumnDefinitions><ColumnDefinition Width=" *"/><ColumnDefinition Width="*"/></Grid.ColumnDefinitions><Button  x:Name="btn1"  Grid.Column=" 0" Grid.Row=" 0" Width="100"   Height=" 100" Background="Gray" Margin="3" Click="Button_Click"  HorizontalAlignment="Center" /><Button  x:Name="btn2"   Grid.Column=" 1" Grid.Row=" 1"   Width="100"   Height=" 100" Background="Gray" Click="Button_Click_1"   HorizontalAlignment="Center"/><Popup x:Name="pop_test1"  IsOpen="false"  Placement="Relative"   PlacementRectangle="100,200,1000,1000" StaysOpen="True"       AllowsTransparency="False"   PopupAnimation="None"  FlowDirection="LeftToRight" ><Border Background="#80FF0000" CornerRadius="10" Width="100" Height="100"><StackPanel Grid.Row=" 0" Orientation="Horizontal"  ><Button Width=" 50" Height=" 50" Background="Red"   /><Button Width=" 50" Height=" 50"  Background="Blue"   /></StackPanel ></Border></Popup ></Grid></Window>

3)Bottom
结合PlacementTarget使用,靠下显示
在这里插入图片描述

4)Top
结合PlacementTarget使用,靠上显示
在这里插入图片描述

5)Left
结合PlacementTarget使用,靠左显示
在这里插入图片描述

<Popup x:Name="pop_test1"  IsOpen="false"  PlacementTarget="{Binding ElementName=btn1}" Placement="Left" StaysOpen="True"       AllowsTransparency="False"   PopupAnimation="None"  FlowDirection="LeftToRight" ><Border Background="#80FF0000" CornerRadius="10" Width="100" Height="100"><StackPanel Grid.Row=" 0" Orientation="Horizontal"  ><Button Width=" 50" Height=" 50" Background="Red"   /><Button Width=" 50" Height=" 50"  Background="Blue"   /></StackPanel ></Border></Popup >

6)Right
结合PlacementTarget使用,靠右显示
在这里插入图片描述

7)Center
结合PlacementTarget使用,居中显示
在这里插入图片描述

8)Mouse
根据鼠标位置决定,不需要结合PlacementTarget使用

9)MousePoint
根据鼠标点击位置决定,不需要结合PlacementTarget使用

<Popup x:Name="pop_test1"  IsOpen="false"  Placement="MousePoint"        StaysOpen="True"       AllowsTransparency="False"   PopupAnimation="None"  FlowDirection="LeftToRight" ><Border Background="#80FF0000" CornerRadius="10" Width="100" Height="100"><StackPanel Grid.Row=" 0" Orientation="Horizontal"  ><Button Width=" 50" Height=" 50" Background="Red"   /><Button Width=" 50" Height=" 50"  Background="Blue"   /></StackPanel ></Border></Popup >

10)AbsolutePoint

4、StaysOpen

StaysOpen 决定了 Popup 是"临时性"的还是"持久性"的显示。
1)true
则为永久性显示,需要通过代码关闭Popup控件。
2) false
则为临时显示,当点击 不是Popup控件所显示的区域时,Popup控件不再显示。

5、AllowsTransparency

指示Popup控件是否支持透明色
1)true
支持透明色
2)false
不支持透明色

6、PopupAnimation

指示Popup控件显示时的动画,比如滑动显示

7、FlowDirection

指示Popup控件中的子控件的排列方式,比如从左到右还是从右到左。

综合应用

在这里插入图片描述

<Window x:Class="wpf之Popup.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:wpf之Popup"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid><Grid.RowDefinitions><RowDefinition Height="1*" /><RowDefinition Height="1*" /></Grid.RowDefinitions ><Grid.ColumnDefinitions><ColumnDefinition Width=" *"/><ColumnDefinition Width="*"/></Grid.ColumnDefinitions><Button  x:Name="btn1"  Grid.Column=" 0" Grid.Row=" 0" Width="100"   Height=" 100" Background="Gray" Margin="3" Click="Button_Click"  HorizontalAlignment="Center" /><Button  x:Name="btn2"   Grid.Column=" 1" Grid.Row=" 1"   Width="100"   Height=" 100" Background="Gray" Click="Button_Click_1"   HorizontalAlignment="Center"/><Popup x:Name="pop_test1"  IsOpen="false" PlacementTarget="{Binding ElementName=btn1}" Placement="Left" StaysOpen="False"      AllowsTransparency="False"   PopupAnimation="None"  FlowDirection="LeftToRight" ><Border Background="#80FF0000" CornerRadius="10" Width="100" Height="100"><StackPanel Grid.Row=" 0" Orientation="Horizontal"  ><Button Width=" 50" Height=" 50" Background="Red"   /><Button Width=" 50" Height=" 50"  Background="Blue"   /></StackPanel ></Border></Popup ><Popup x:Name="pop_test2"  IsOpen="false" PlacementTarget="{Binding ElementName=btn1}" Placement="Right"   HorizontalOffset=" 100" VerticalOffset=" 50" StaysOpen="True" AllowsTransparency="True"  PopupAnimation="Slide "    FlowDirection="RightToLeft" ><Border Background="#80FF0000" CornerRadius="10" Width="100" Height="100"><StackPanel Grid.Row=" 0" Orientation="Horizontal"  ><Button Width=" 50" Height=" 50" Background="Red"   /><Button Width=" 50" Height=" 50" Content="关闭" Background="Blue" Click="Button_Click_2"   /></StackPanel ></Border></Popup ></Grid></Window>
http://www.hskmm.com/?act=detail&tid=36845

相关文章:

  • 结对项目-生成四则运算
  • ? #4
  • CSS3 超实用属性:pointer-events (可穿透图层的鼠标事件)
  • 类和对象
  • 取证-windbg和dmp,以及文件分析基本流程
  • 【比赛记录】2025CSP+NOIP 冲刺模拟赛合集Ⅱ
  • 羊驼二次免疫的六大风险:纳米抗体制备不可忽视的 “隐形陷阱”
  • 完整教程:C++项目:仿muduo库高并发服务器-------connection模块
  • 深入解析:线性代数 SVD | 令人困扰的精度 1
  • 营销数字化专家要求
  • 小程序反编译包的架构文件
  • 10.22 CSP-S模拟37/2025多校冲刺CSP模拟赛7 改题记录
  • [题解]P11126 [ROIR 2024] 三等分的数组 (Day 2)
  • Acrobat Pro DC 2025下载及破解安装教程,附永久免费免激活中文版Acrobat Pro DC安装包(稳定版)
  • VSLAM 十四讲--阅读中知识点记录
  • 数据库学习篇(持续更新中)
  • Fortinet产品安全漏洞分析:FGFM协议未经认证连接重置漏洞
  • 李超线段树
  • fiddler修改请求(修改搜索框的内容)
  • 20251022
  • 10月22号
  • 将“百度”的URL改为“163网易云”(修改URL地址)
  • Yolo11分割模型
  • 星旗笔试
  • 智联笔记项目——251022登录注册、后端管理及内容类型处理优化
  • 2025.10.22博客
  • 这是一个测试文档
  • JavaScript formatter插件的使用
  • 完整教程:基于WebAssembly的STEP文件3D在线查看器实现详解
  • 20232407 2025-2026-1 《网络与系统攻防技术》 实验二实验报告