通过

Popup 概述

  • 项目

Popup 控件提供一种在单独窗口中显示内容的方法，该窗口相对于指定元素或屏幕坐标在当前应用程序窗口上浮动。 本主题介绍 Popup 控件，并提供关于其用法的信息。

什么是 Popup？

Popup 控件在相对于元素或屏幕上的点的单独窗口中显示内容。 当 Popup 可见时，IsOpen 属性设置为 true。

注意

当鼠标指针移动到 Popup 的父对象上方时，它不会自动打开。 如果要让 Popup 自动打开，请使用 ToolTip 或 ToolTipService 类。 有关详细信息，请参阅 ToolTip 概述。

创建弹出项。

以下示例演示如何定义作为 ToggleButton 控件子元素的 Popup 控件。 因为 ToggleButton 只能有一个子元素，所以此示例将 ToggleButton 和 Popup 控件的文本放置在 StackPanel 中。 Popup 的内容显示在一个单独的窗口中，该窗口浮动在相关 ToggleButton 控件附近的应用程序窗口上方。

<ToggleButton x:Name="TogglePopupButton" Height="30" Width="150" HorizontalAlignment="Left">
    <StackPanel>
        <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">
            <Run Text="Is button toggled? " />
            <Run Text="{Binding IsChecked, ElementName=TogglePopupButton}" />
        </TextBlock>

        <Popup Name="myPopup" IsOpen="{Binding IsChecked, ElementName=TogglePopupButton}">
            <Border BorderThickness="1">
                <TextBlock Name="myPopupText" Background="LightBlue" Foreground="Blue" Padding="30">
                Popup Text
                </TextBlock>
            </Border>
        </Popup>
    </StackPanel>
</ToggleButton>

实现 Popup 的控件

可以在其他控件中生成 Popup 控件。 以下控件针对特定用途实现 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 内容定义的屏幕区域的默认大小的空间有限，不能为要显示的位图效果提供足够的空间，因此在自动调整大小时，某些位图效果可能会隐藏。

在内容上设置 RenderTransform 时，Popup 的内容也可能会被遮挡住。 在这种情况下，如果转换的 Popup 的内容超出了原始 Popup 的区域，则某些内容可能会隐藏。 如果位图效果或转换需要更多空间，可以在 Popup 内容周围定义一个边距，从而为该控件提供更多区域。

定义 Popup 位置

可通过设置 PlacementTarget、PlacementRectangle、Placement、HorizontalOffset 和 VerticalOffsetProperty 属性来定位 Popup。 有关详细信息，请参阅 Popup 放置行为。 当 Popup 已显示在屏幕上时，如果其父级已重新定位，则其本身不会重新定位。

自定义 Popup 放置

可以通过在希望显示 Popup 的位置指定一组相对于 PlacementTarget 的坐标，来自定义 Popup 控件的位置。

若要自定义位置，请将 Placement 属性设置为 Custom。 然后定义一个 CustomPopupPlacementCallback 委托，该委托返回 Popup 的一组可能的放置点和主轴（按优先顺序排列）。 会自动选中显示 Popup 最大部分的点。 有关示例，请参阅指定自定义 Popup 位置。

Popup 控件没有自己的可视化树；当调用 Popup 的 MeasureOverride 方法时，它返回 0（零）大小。 但是，将 Popup 的 IsOpen 属性设置为 true 时，将创建一个具有自己的可视化树的新窗口。 新窗口包含 Popup 的 Child 内容。 新窗口的宽度和高度不能超过屏幕宽度或高度的 75%。

Popup 控件保留对将其 Child 内容作为逻辑子级的引用。 创建新窗口后，Popup 的内容成为该窗口的一个可视化子级并保留 Popup 的逻辑子级。 相反，Popup 将保留其 Child 内容的逻辑父级。

另请参阅