Popup Popup Popup Popup Class

Definition

Displays content on top of existing content, within the bounds of the application window.

public : sealed class Popup : FrameworkElement, IPopup, IPopup2public sealed class Popup : FrameworkElement, IPopup, IPopup2Public NotInheritable Class Popup Inherits FrameworkElement Implements IPopup, IPopup2// This API is not available in Javascript.
<Popup .../>
Inheritance
Attributes
Windows 10 requirements
Device family
Windows 10 (introduced v10.0.10240.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v1)

Inherited Members

Inherited properties

Inherited events

Inherited methods

Examples

This example shows a simple Popup with content defined inline.

<Grid x:Name="Output" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="1">
    <StackPanel>
        <Button Content="Show Popup (using Offset)" Click="ShowPopupOffsetClicked"/>
    </StackPanel>
    <Popup VerticalOffset="10" HorizontalOffset="200" x:Name="StandardPopup">
        <Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}" 
                Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
                BorderThickness="2" Width="200" Height="200">
            <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                <TextBlock Text="Simple Popup" FontSize="24.667" HorizontalAlignment="Center"/>
                <Button Content="Close" Click="ClosePopupClicked" HorizontalAlignment="Center"/>
            </StackPanel>
        </Border>
    </Popup>
</Grid>
// Handles the Click event on the Button inside the Popup control and 
// closes the Popup. 
private void ClosePopupClicked(object sender, RoutedEventArgs e)
{
    // if the Popup is open, then close it 
    if (StandardPopup.IsOpen) { StandardPopup.IsOpen = false; }
}

// Handles the Click event on the Button on the page and opens the Popup. 
private void ShowPopupOffsetClicked(object sender, RoutedEventArgs e)
{
    // open the Popup if it isn't open already 
    if (!StandardPopup.IsOpen) { StandardPopup.IsOpen = true; }
} 

This example shows a Popup that has a UserControl set as its Child element. The UserControl defines the content of the Popup.

<Popup x:Name="ParentedPopup" HorizontalOffset="200" VerticalOffset="200">
    <local:PopupInputContent/>
</Popup>
<UserControl
    x:Class="XAMLPopup.PopupInputContent"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:PopupExample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">
    <Grid>
        <StackPanel>
            <TextBlock Text="Type some input" FontSize="24.667"/>
            <TextBox Width="300" Height="55"/>
            <Button Content="Save" Click="SimulateSaveClicked"/>
        </StackPanel>
    </Grid>
</UserControl>
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;

namespace XAMLPopup
{
    public sealed partial class PopupInputContent : UserControl
    {
        public PopupInputContent()
        {
            this.InitializeComponent();
        }

        // Handles the Click event of the 'Save' button simulating a save and close 
        private void SimulateSaveClicked(object sender, RoutedEventArgs e)
        {
            // in this example we assume the parent of the UserControl is a Popup 
            Popup p = this.Parent as Popup;

            // close the Popup
            if (p != null) { p.IsOpen = false; }  
        } 
    }
}

Remarks

Do not use a Popup if a Flyout, MenuFlyout, ToolTip or ContentDialog (MessageDialog for a Windows 8 app) is more appropriate.

Popup is a general purpose container for hosting UIElement s on top of existing content. You typically use a Popup to temporarily display content that accomplishes a particular task. The Popup does not have a default visual template. Instead, you must set the content yourself by specifying a single Child element as content. You can define the Popup content inline, but it's common to define the content as a UserControl, and then set the UserControl as the Child of the Popup.

You position the Popup by setting the HorizontalOffset and VerticalOffset properties. The Popup is offset relative to its immediate parent container. A Popup is not modal, so input to the screen behind it is not blocked.

To show a Popup, set its IsOpen property to true. To hide the Popup, set IsOpen to false. You can set IsLightDismissEnabled to make the Popup hide automatically when a user taps anywhere away from it.

The Popup can host input controls. When hosting input controls like TextBox, the touch keyboard might slide into view when the user touches the input control. If the Popup 's parent container is already in the visual tree, the Popup automatically repositions itself when the touch keyboard is in view. Otherwise, the Popup is not repositioned and the touch keyboard can cover it. This can happen if you create the Popup in code and set IsOpen to true without adding the Popup as a child of an element in the visual tree.

The Popup doesn't fire RoutedEvents, for example KeyDown and PointerPressed. You can wire an event handler for these RoutedEvents on the child of the Popup.

For more code examples that show the Popup control, see the XAML Popup sample.

Constructors

Popup() Popup() Popup() Popup()

Initializes a new instance of the Popup class.

public : Popup()public Popup()Public Sub New()// This API is not available in Javascript.

Properties

Child Child Child Child

Gets or sets the content to be hosted in the popup.

public : UIElement Child { get; set; }public UIElement Child { get; set; }Public ReadWrite Property Child As UIElement// This API is not available in Javascript.
<Popup ...>
  singleChild
</Popup>
Value
UIElement UIElement UIElement UIElement

The content to be hosted in the popup.

ChildProperty ChildProperty ChildProperty ChildProperty

Gets the identifier for the Child dependency property.

public : static DependencyProperty ChildProperty { get; }public static DependencyProperty ChildProperty { get; }Public Static ReadOnly Property ChildProperty As DependencyProperty// This API is not available in Javascript.
Value
DependencyProperty DependencyProperty DependencyProperty DependencyProperty

The identifier for the Child dependency property.

ChildTransitions ChildTransitions ChildTransitions ChildTransitions

Gets or sets the collection of Transition style elements that apply to child content of a Popup.

public : TransitionCollection ChildTransitions { get; set; }public TransitionCollection ChildTransitions { get; set; }Public ReadWrite Property ChildTransitions As TransitionCollection// This API is not available in Javascript.
<Popup>
  <Popup.ChildTransitions>
    <TransitionCollection>
      oneOrMoreTransitions
    </TransitionCollection>
  </Popup.ChildTransitions>
</Popup>
Value
TransitionCollection TransitionCollection TransitionCollection TransitionCollection

The strongly typed collection of Transition style elements.

Remarks

Important

The XAML syntax for all properties that use a TransitionCollection value is unusual in that you must declare an explicit TransitionCollection object element as the value, and then provide object elements as child elements of TransitionCollection for each of the transition animations you want to use. For most other XAML collection properties you could omit the collection object element because it can be implicit, but properties that use TransitionCollection don't support the implicit collection usage. For more info on implicit collections and XAML, see XAML syntax guide.

Transition animations play a particular role in UI design of your app. The basic idea is that when there is a change or transition, the animation draws the attention of the user to the change.

It's not common to set the value of the ChildTransitions property directly on a Popup that is a direct element of app UI. It's more common to have a transitions collection be a part of a visual state, template or style. In this case you use mechanisms such as Setter of a Style to specify the ChildTransitions property. Styles are typically stored as a XAML resource.

See Also

ChildTransitionsProperty ChildTransitionsProperty ChildTransitionsProperty ChildTransitionsProperty

Identifies the ChildTransitions dependency property.

public : static DependencyProperty ChildTransitionsProperty { get; }public static DependencyProperty ChildTransitionsProperty { get; }Public Static ReadOnly Property ChildTransitionsProperty As DependencyProperty// This API is not available in Javascript.

HorizontalOffset HorizontalOffset HorizontalOffset HorizontalOffset

Gets or sets the distance between the left side of the application window and the left side of the popup.

public : double HorizontalOffset { get; set; }public double HorizontalOffset { get; set; }Public ReadWrite Property HorizontalOffset As double// This API is not available in Javascript.
<Popup HorizontalOffset="double"/>
Value
double double double double

A measurement in pixels.

HorizontalOffsetProperty HorizontalOffsetProperty HorizontalOffsetProperty HorizontalOffsetProperty

Gets the identifier for the HorizontalOffset dependency property.

public : static DependencyProperty HorizontalOffsetProperty { get; }public static DependencyProperty HorizontalOffsetProperty { get; }Public Static ReadOnly Property HorizontalOffsetProperty As DependencyProperty// This API is not available in Javascript.

IsLightDismissEnabled IsLightDismissEnabled IsLightDismissEnabled IsLightDismissEnabled

Gets or sets a value that determines how the Popup can be dismissed.

public : PlatForm::Boolean IsLightDismissEnabled { get; set; }public bool IsLightDismissEnabled { get; set; }Public ReadWrite Property IsLightDismissEnabled As bool// This API is not available in Javascript.
<Popup IsLightDismissEnabled="bool" />
Value
PlatForm::Boolean bool bool bool

true if light dismiss is enabled for this control; otherwise, false.

Remarks

Light dismiss is when the user taps on any area other than the popup.

IsLightDismissEnabledProperty IsLightDismissEnabledProperty IsLightDismissEnabledProperty IsLightDismissEnabledProperty

Identifies the IsLightDismissEnabled dependency property.

public : static DependencyProperty IsLightDismissEnabledProperty { get; }public static DependencyProperty IsLightDismissEnabledProperty { get; }Public Static ReadOnly Property IsLightDismissEnabledProperty As DependencyProperty// This API is not available in Javascript.

IsOpen IsOpen IsOpen IsOpen

Gets or sets whether the popup is currently displayed on the screen.

public : PlatForm::Boolean IsOpen { get; set; }public bool IsOpen { get; set; }Public ReadWrite Property IsOpen As bool// This API is not available in Javascript.
<Popup IsOpen="bool" />
Value
PlatForm::Boolean bool bool bool

true if the popup is currently displayed; otherwise, false. The default is false.

IsOpenProperty IsOpenProperty IsOpenProperty IsOpenProperty

Gets the identifier for the IsOpen dependency property.

public : static DependencyProperty IsOpenProperty { get; }public static DependencyProperty IsOpenProperty { get; }Public Static ReadOnly Property IsOpenProperty As DependencyProperty// This API is not available in Javascript.
Value
DependencyProperty DependencyProperty DependencyProperty DependencyProperty

The identifier for the IsOpen dependency property.

LightDismissOverlayMode LightDismissOverlayMode LightDismissOverlayMode LightDismissOverlayMode

Gets or sets a value that specifies whether the area outside of a light-dismiss UI is darkened.

public : LightDismissOverlayMode LightDismissOverlayMode { get; set; }public LightDismissOverlayMode LightDismissOverlayMode { get; set; }Public ReadWrite Property LightDismissOverlayMode As LightDismissOverlayMode// This API is not available in Javascript.
Value
LightDismissOverlayMode LightDismissOverlayMode LightDismissOverlayMode LightDismissOverlayMode

A value of the enumeration that specifies whether the area outside of a light-dismiss UI is darkened. The default is Auto.

Additional features and requirements
Device family
Windows 10 Anniversary Edition (introduced v10.0.14393.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v3)

Remarks

Transient UI, such as a Popup, closes when you click or tap outside of it. This is called light-dismiss. "Overlay" refers to the area outside of a light-dismiss UI.

By default, the "overlay" is darkened on the Xbox, and not darkened on other devices families. You can set LightDismissOverlayMode to On to make your app darken the "overlay" area on all device families, or set it to Off to not darken the "overlay" area on all device families.

LightDismissOverlayModeProperty LightDismissOverlayModeProperty LightDismissOverlayModeProperty LightDismissOverlayModeProperty

Identifies the LightDismissOverlayMode dependency property.

public : static DependencyProperty LightDismissOverlayModeProperty { get; }public static DependencyProperty LightDismissOverlayModeProperty { get; }Public Static ReadOnly Property LightDismissOverlayModeProperty As DependencyProperty// This API is not available in Javascript.
Additional features and requirements
Device family
Windows 10 Anniversary Edition (introduced v10.0.14393.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v3)

VerticalOffset VerticalOffset VerticalOffset VerticalOffset

Gets or sets the distance between the top of the application window and the top of the popup.

public : double VerticalOffset { get; set; }public double VerticalOffset { get; set; }Public ReadWrite Property VerticalOffset As double// This API is not available in Javascript.
<Popup VerticalOffset="double"/>
Value
double double double double

A measurement in pixels.

VerticalOffsetProperty VerticalOffsetProperty VerticalOffsetProperty VerticalOffsetProperty

Gets the identifier for the VerticalOffset dependency property.

public : static DependencyProperty VerticalOffsetProperty { get; }public static DependencyProperty VerticalOffsetProperty { get; }Public Static ReadOnly Property VerticalOffsetProperty As DependencyProperty// This API is not available in Javascript.

Events

Closed Closed Closed Closed

Fires when the IsOpen property is set to false.

public : event EventHandler Closed<object>public event EventHandler Closed<object>Public Event Closed<object>// This API is not available in Javascript.
<Popup Closed="eventhandler"/>

Opened Opened Opened Opened

Fires when the IsOpen property is set to true.

public : event EventHandler Opened<object>public event EventHandler Opened<object>Public Event Opened<object>// This API is not available in Javascript.
<Popup Opened="eventhandler"/>

See Also