--- title: "Popup Overview" description: Learn about the Windows Presentation Foundation Popup control, which provides a way to display content in a window that floats over the current application. ms.date: "07/14/2021" helpviewer_keywords: - "controls [WPF], Popup" - "Popup control [WPF], about Popup control" ms.assetid: 774f53ca-bff8-470e-9ce9-3928b4cf3d4c --- # Popup Overview The control provides a way to display content in a separate window that floats over the current application window relative to a designated element or screen coordinate. This topic introduces the control and provides information about its use. ## What Is a Popup? A control displays content in a separate window relative to an element or point on the screen. When the is visible, the property is set to `true`. > [!NOTE] > A does not automatically open when the mouse pointer moves over its parent object. If you want a to automatically open, use the or class. For more information, see [ToolTip Overview](tooltip-overview.md). ## Creating a Popup The following example shows how to define a control that is the child element of a control. Because a `ToggleButton` can have only one child element, this example places the text for the `ToggleButton` and the `Popup` controls in a . The content of the `Popup` is displayed in a separate window that floats over the application window near the related `ToggleButton` control. :::code language="xaml" source="snippets/popup-overview/csharp/Window1.xaml" id="ToggleButtonCodeless"::: ## Controls That Implement a Popup You can build controls into other controls. The following controls implement the control for specific uses: - . If you want to create a tooltip for an element, use the and classes. For more information, see [ToolTip Overview](tooltip-overview.md). - . If you want to create a context menu for an element, use the control. For more information, see [ContextMenu Overview](contextmenu-overview.md). - . If you want to create a selection control that has a drop-down list box that can be shown or hidden, use the control. - . If you want to create a control that displays a header with a collapsible area that displays content, use the control. For more information, see [Expander Overview](expander-overview.md). ## Popup Behavior and Appearance The control provides functionality that enables you to customize its behavior and appearance. For example, you can set open and close behavior, animation, opacity and bitmap effects, and size and position. ### Open and Close Behavior A control displays its content when the property is set to `true`. By default, stays open until the property is set to `false`. However, you can change the default behavior by setting the property to `false`. When you set this property to `false`, the content window has mouse capture. The loses mouse capture and the window closes when a mouse event occurs outside the window. The and events are raised when the content window is open or closed. ### Animation The control has built-in support for the animations that are typically associated with behaviors like fade-in and slide-in. You can turn on these animations by setting the property to a enumeration value. For animations to work correctly, you must set the property to `true`. You can also apply animations like to the control. ### Opacity and Bitmap Effects The property for a control has no effect on its content. By default, the content window is opaque. To create a transparent , set the property to `true`. The content of a does not inherit bitmap effects, such as , that you directly set on the control or on any other element in the parent window. For bitmap effects to appear on the content of a , you must set the bitmap effect directly on its content. For example, if the child of a is a , set the bitmap effect on the . ### Popup Size By default, a is automatically sized to its content. When auto-sizing occurs, some bitmap effects may be hidden because the default size of the screen area that is defined for the content does not provide enough space for the bitmap effects to display. content can also be obscured when you set a on the content. In this scenario, some content might be hidden if the content of the transformed extends beyond the area of the original . If a bitmap effect or transform requires more space, you can define a margin around the content in order to provide more area for the control. ## Defining the Popup Position You can position a popup by setting the , , , , and properties. For more information, see [Popup Placement Behavior](popup-placement-behavior.md). When is displayed on the screen, it does not reposition itself if its parent is repositioned. ### Customizing Popup Placement You can customize the placement of a control by specifying a set of coordinates that are relative to the where you want the to appear. To customize placement, set the property to . Then define a delegate that returns a set of possible placement points and primary axes (in order of preference) for the . The point that shows the largest part of the is automatically selected. For an example, see [Specify a Custom Popup Position](how-to-specify-a-custom-popup-position.md). ## Popup and the Visual Tree A control does not have its own visual tree; it instead returns a size of 0 (zero) when the method for is called. However, when you set the property of to `true`, a new window with its own visual tree is created. The new window contains the content of . The width and height of the new window cannot be larger than 75 percent of the width or height of the screen. The control maintains a reference to its content as a logical child. When the new window is created, the content of becomes a visual child of the window and remains the logical child of . Conversely, remains the logical parent of its content. ## See also - - - - - - - - [How-to Topics](popup-how-to-topics.md) - [How-to Topics](tooltip-how-to-topics.md)