Popup 概述
Popup 控件提供一种在单独窗口中显示内容的方法,该窗口相对于指定元素或屏幕坐标浮动于当前应用程序窗口之上。 本主题介绍 Popup 控件,并提供有关其用法的信息。
本主题包括下列各节。
- 什么是 Popup?
- 创建 Popup
- 实现 Popup 的控件
- Popup 的行为和外观
- 定义 Popup 的位置
- Popup 和可视化树
- 相关主题
什么是 Popup?
Popup 控件可在单独窗口中相对于屏幕上的元素或点显示内容。 当 Popup 可见时,IsOpen 属性设置为 true。
![]() |
---|
当鼠标指针移动到其父对象之上时,Popup 不会自动打开。如果希望 Popup 自动打开,请使用 ToolTip 或 ToolTipService 类。有关更多信息,请参见 ToolTip 概述。 |
创建 Popup
下面的示例演示如何定义 Popup 控件,该控件是 Button 控件的子元素。 由于 Button 只能有一个子元素,因此此示例将 Button 和 Popup 控件的文本放入 StackPanel 中。 Popup 的内容将显示在 TextBlock 控件中,这样就会将其文本显示在单独的窗口中,该窗口浮动在应用程序窗口之上并且靠近相关 Button 控件。
<Button HorizontalAlignment="Left" Click="DisplayPopup"
Width="150" Margin="20,10,0,0">
<StackPanel>
<TextBlock>Display Your Popup Text</TextBlock>
<Popup Name="myPopup">
<TextBlock Name="myPopupText"
Background="LightBlue"
Foreground="Blue">
Popup Text
</TextBlock>
</Popup>
</StackPanel>
</Button>
<Button Name="ButtonForPopup" HorizontalAlignment="Left"
Click="CreatePopup"
Width="150" Margin="20,10,0,0">
<StackPanel Name="aStackPanel">
<TextBlock>Create Popup</TextBlock>
</StackPanel>
</Button>
实现 Popup 的控件
您可以将 Popup 控件生成到其他控件中。 以下控件针对特定的用途实现 Popup 控件:
ToolTip. 如果需要为某个元素创建工具提示,请使用 ToolTip 和 ToolTipService 类。 有关更多信息,请参见ToolTip 概述。
ContextMenu. 如果需要为某个元素创建上下文菜单,请使用 ContextMenu 控件。 有关更多信息,请参见 ContextMenu 概述。
Expander. 如果需要创建一个可显示标题(该标题同时具有一个可以显示内容的可折叠区域)的控件,请使用 Expander 控件。 有关更多信息,请参见 Expander 概述。
Popup 的行为和外观
Popup 控件提供用于自定义其行为和外观的功能。 例如,您可以设置打开和关闭行为、动画、不透明度和位图效果以及 Popup 的大小和位置。
打开和关闭行为
当 IsOpen 属性设置为 true 时,Popup 控件显示其内容。 默认情况下,Popup 保持为打开状态,除非 IsOpen 属性设置为 false。 不过,您可以通过将 StaysOpen 属性设置为 false 来更改默认行为。 当您将该属性设置为 false 时,Popup 内容窗口将获得鼠标捕获。 当鼠标事件发生在 Popup 窗口外时,Popup 将失去鼠标捕获并且该窗口将关闭。
当打开或关闭 Popup 内容窗口时,将引发 Opened 和 Closed 事件。
动画
Popup 控件为通常与淡入和滑入之类的行为关联的动画提供内置支持。 可以通过将 PopupAnimation 属性设置为一个 PopupAnimation 枚举值来打开这些动画。 若要使 Popup 动画能够正常运行,您必须将 AllowsTransparency 属性设置为 true。
您还可以将 Storyboard 之类的动画应用到 Popup 控件中。
不透明度和位图效果
Popup 控件的 Opacity 属性对其内容没有影响。 默认情况下,Popup 内容窗口是不透明的。 若要创建一个透明的 Popup,请将 AllowsTransparency 属性设置为 true.
Popup 的内容不会继承位图效果(例如 DropShadowBitmapEffect),这样您可以直接在父窗口的 Popup 控件上或任何其他元素上进行设置。 若要在 Popup 内容上显示位图效果,您必须在其内容上直接设置位图效果。 例如,如果 Popup 的子级是 StackPanel,则需要在 StackPanel 上设置位图效果。
Popup 的大小
默认情况下,Popup 自动调整大小以适合其内容。 由于为 Popup 内容定义的屏幕区域的默认大小的空间有限,不能为要显示的位图效果提供足够的空间,因此在自动调整大小时,某些位图效果可能会隐藏。
如果在内容上设置 RenderTransform,Popup 的内容也可能会被遮挡住。 在这种情况下,如果转换的 Popup 的内容超出了原始 Popup 的区域,则某些内容可能会隐藏。 如果位图效果或转换需要较多的空间,则您可以在 Popup 内容周围定义一个边距,从而为该控件提供更多的区域。
定义 Popup 的位置
您可以通过设置 PlacementTarget、PlacementRectangle、Placement、HorizontalOffset 和 VerticalOffsetProperty 属性来定位弹出项。 有关更多信息,请参见 Popup 放置行为。 当 Popup 已显示在屏幕上时,如果其父级已重新定位,则其本身不会重新定位。
自定义 Popup 放置
通过指定一组相对于 PlacementTarget(您希望在此显示 Popup)的坐标,您可以自定义 Popup 控件的位置。
若要自定义位置,请将 Placement 属性设置为 Custom。 然后,再定义一个 CustomPopupPlacementCallback 委托,该委托按优先顺序为 Popup 返回一组可能的位置点和主轴。 此时,显示 Popup 最大部分的点将被自动选中。 有关示例,请参见如何:指定自定义 Popup 位置。
Popup 和可视化树
Popup 控件没有其自己的可视化树;当调用 Popup 的 MeasureOverride 方法时,它返回 0(零)大小。 但是,当您将 Popup 的 IsOpen 属性设置为 true 时,将创建一个具有其自己的可视化树的新窗口。 该新窗口将包含 Popup 的 Child 内容。 新窗口的宽度和高度不能超过屏幕宽度和高度的 75%。
Popup 控件维持一个将其 Child 内容作为逻辑子级的引用。 创建新窗口后,Popup 的内容成为该窗口的一个可视化子级并保留 Popup 的逻辑子级。 相反,Popup 将保持其 Child 内容的逻辑父级。