浅谈WPF之Popup弹出层

简介: 在日常开发中,当点击某控件时,经常看到一些弹出框,停靠在某些页面元素的附近,但这些又不是真正的窗口,而是页面的一部分,那这种功能是如何实现的呢?今天就以一个简单的小例子,简述如何在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的全部内容,关于更多详细内容,可参考官方文档。希望能够一起学习,共同进步。

相关文章
|
C#
【WPF】使用Popup控件做浮窗/提示框
原文:【WPF】使用Popup控件做浮窗/提示框 需求:当鼠标移入某个区域时,弹出一个浮窗,以便用户进行下一步操作。 效果如下图: 当鼠标移入左上角的【多选显示】框内,出现下面的浮窗(悬浮在原UI之上)。
4215 0
|
C#
关于WPF中Popup中的一些用法的总结
原文:关于WPF中Popup中的一些用法的总结   Popup控件是一个常用的非常有用的控件,顾明思义就是弹出式控件,首先我们来看看MSDN对它的解释吧,表示具有内容的弹出窗口,这个是非常重要的控件,我们看看它的继承关系吧:  System.
1440 0
|
C#
关于wpf中popup跟随鼠标移动显示
原文:关于wpf中popup跟随鼠标移动显示 最近在做一个画图工具,里面有一个功能是需要实现,当鼠标移动的时候在,鼠标的旁边显示坐标信息。 第一反应是想到了tooltip,但是tooltip有许多的限制,查询资料的过程中看到了popup,popup比tooltip更加灵活,下面讲讲tooltip跟popup的区别: 1.tooltip会自动显示,自动隐藏,而popup则需要设置IsOpen属性,并且在Popup.StaysOen属性为true时,Popup控件会一直显示,直到显式地将IsOpen属性设置为False。
1925 0
|
C#
WPF中Popup的几个问题
原文:WPF中Popup的几个问题 要用popup控件来解决一些问题。就此带来了一批问题。 问题一、 在popup外任意位置点击时要能关闭popup,这个本来简单,只要加上StaysOpen=false就可以了。
1325 0
WPF listview item mouse enter/over popup
This is because the routing strategy of the Loaded event is Direct, which means that the routed event does not route though an element tree.
959 0
|
前端开发 C#
WPF备忘录(1)有笑脸,有Popup
原文:WPF备忘录(1)有笑脸,有Popup 1.画个笑脸给大家娱乐一下: 效果如下:   2.
911 0
|
C#
WPF中Popup等弹窗的位置不对(偏左或者偏右)
原文:WPF中Popup等弹窗的位置不对(偏左或者偏右) 1.情况如图:    正常情况:         部分特殊情况:        在一般的电脑都能正确显示,就是第一种情况,同样的代码为什么在不同的电脑就会显示不同的位置呢,原来Windows为了满足 不同需求的用户,左撇子和右撇子,就...
1811 0
|
C#
WPF Popup 控件导致被遮挡内容不刷新的原因
原文:WPF Popup 控件导致被遮挡内容不刷新的原因                                    WPF Popup 控件导致被遮挡内容不刷新的原因                    周银辉   今天在写一个WPF控件时用到了Popup控件,很郁闷的情况是:当...
1084 0
|
C# Windows
WPF Popup 置顶问题
原文 WPF Popup 置顶问题 问题: 使用wpf的popup,当在popup中弹出MessageBox或者打开对话框的时候,popup总是置顶,并遮住MessageBox或对话框. 解决: 写如下用户控件   需导入的空间: using System.
1662 0