Popup(弹跳)

Remarks

Do not use a Popup if a Flyout, MenuFlyout, ToolTip or MessageDialog 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.

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

Examples

This example shows a simple Popup with content defined inline.

 

XAML

<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>

 

C#

// 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.

 

XAML

<Popup x:Name="ParentedPopup" HorizontalOffset="200" VerticalOffset="200">
    <local:PopupInputContent/>
</Popup>

 

XAML

<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>

 

C#

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; } 
        }
    }
}

Constructors

Popup() Popup() Popup()

 

Initializes a new instance of the Popup class.

 

 

 

C#

 

 

public Popup()public Popup()Public Sub New()

Attributes

ContractVersionAttribute

Properties

Child Child Child

 

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

C#

 

 

public UIElement Child { get; set; }public UIElement Child { get; set; }Public ReadWrite Property Child As UIElement

 

XAML

<Popup ...>
  singleChild
</Popup>

Value

UIElement UIElement UIElement

The content to be hosted in the popup.

Attributes

ContractVersionAttribute

ChildProperty ChildProperty ChildProperty

 

Gets the identifier for the Child dependency property.

 

 

 

C#

 

 

public static DependencyProperty ChildProperty { get; }public static DependencyProperty ChildProperty { get; }Public Static ReadOnly Property ChildProperty As DependencyProperty

Value

DependencyProperty DependencyProperty DependencyProperty

The identifier for the Child dependency property.

Attributes

ContractVersionAttribute

ChildTransitions ChildTransitions ChildTransitions

 

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

 

 

 

C#

 

 

public TransitionCollection ChildTransitions { get; set; }public TransitionCollection ChildTransitions { get; set; }Public ReadWrite Property ChildTransitions As TransitionCollection

 

XAML

<Popup>
  <Popup.ChildTransitions>
    <TransitionCollection>
      oneOrMoreTransitions
    </TransitionCollection>
  </Popup.ChildTransitions>
</Popup>

Value

TransitionCollection TransitionCollection TransitionCollection

The strongly typed collection of Transition style elements.

Attributes

ContractVersionAttribute

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.

ChildTransitionsProperty ChildTransitionsProperty ChildTransitionsProperty

 

Identifies the ChildTransitions dependency property.

 

 

 

C#

 

 

public static DependencyProperty ChildTransitionsProperty { get; }public static DependencyProperty ChildTransitionsProperty { get; }Public Static ReadOnly Property ChildTransitionsProperty As DependencyProperty

Value

DependencyProperty DependencyProperty DependencyProperty

The identifier for the ChildTransitions dependency property.

Attributes

ContractVersionAttribute

HorizontalOffset HorizontalOffset HorizontalOffset

 

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

 

 

 

C#

 

 

public double HorizontalOffset { get; set; }public double HorizontalOffset { get; set; }Public ReadWrite Property HorizontalOffset As double

 

XAML

<Popup HorizontalOffset="double"/>

Value

double double double

A measurement in pixels.

Attributes

ContractVersionAttribute

HorizontalOffsetProperty HorizontalOffsetProperty HorizontalOffsetProperty

 

Gets the identifier for the HorizontalOffset dependency property.

 

 

 

C#

 

 

public static DependencyProperty HorizontalOffsetProperty { get; }public static DependencyProperty HorizontalOffsetProperty { get; }Public Static ReadOnly Property HorizontalOffsetProperty As DependencyProperty

Value

DependencyProperty DependencyProperty DependencyProperty

The identifier for the HorizontalOffset dependency property.

Attributes

ContractVersionAttribute

IsLightDismissEnabled IsLightDismissEnabled IsLightDismissEnabled

 

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

 

 

 

C#

 

 

public bool IsLightDismissEnabled { get; set; }public bool IsLightDismissEnabled { get; set; }Public ReadWrite Property IsLightDismissEnabled As bool

 

XAML

<Popup IsLightDismissEnabled="bool" />

Value

bool bool bool

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

Attributes

ContractVersionAttribute

Remarks

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

IsLightDismissEnabledProperty IsLightDismissEnabledProperty IsLightDismissEnabledProperty

 

Identifies the IsLightDismissEnabled dependency property.

 

 

 

C#

 

 

public static DependencyProperty IsLightDismissEnabledProperty { get; }public static DependencyProperty IsLightDismissEnabledProperty { get; }Public Static ReadOnly Property IsLightDismissEnabledProperty As DependencyProperty

Value

DependencyProperty DependencyProperty DependencyProperty

The identifier for the IsLightDismissEnabled dependency property.

Attributes

ContractVersionAttribute

IsOpen IsOpen IsOpen

 

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

 

 

 

C#

 

 

public bool IsOpen { get; set; }public bool IsOpen { get; set; }Public ReadWrite Property IsOpen As bool

 

XAML

<Popup IsOpen="bool" />

Value

bool bool bool

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

Attributes

ContractVersionAttribute

IsOpenProperty IsOpenProperty IsOpenProperty

 

Gets the identifier for the IsOpen dependency property.

 

 

 

C#

 

 

public static DependencyProperty IsOpenProperty { get; }public static DependencyProperty IsOpenProperty { get; }Public Static ReadOnly Property IsOpenProperty As DependencyProperty

Value

DependencyProperty DependencyProperty DependencyProperty

The identifier for the IsOpen dependency property.

Attributes

ContractVersionAttribute

LightDismissOverlayMode LightDismissOverlayMode LightDismissOverlayMode

 

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

 

 

 

C#

 

 

public LightDismissOverlayMode LightDismissOverlayMode { get; set; }public LightDismissOverlayMode LightDismissOverlayMode { get; set; }Public ReadWrite Property LightDismissOverlayMode As LightDismissOverlayMode

Value

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.

Attributes

ContractVersionAttribute

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

 

Identifies the LightDismissOverlayMode dependency property.

 

 

 

C#

 

 

public static DependencyProperty LightDismissOverlayModeProperty { get; }public static DependencyProperty LightDismissOverlayModeProperty { get; }Public Static ReadOnly Property LightDismissOverlayModeProperty As DependencyProperty

Value

DependencyProperty DependencyProperty DependencyProperty

The identifier for the LightDismissOverlayMode dependency property.

Attributes

ContractVersionAttribute

VerticalOffset VerticalOffset VerticalOffset

 

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

 

 

 

C#

 

 

public double VerticalOffset { get; set; }public double VerticalOffset { get; set; }Public ReadWrite Property VerticalOffset As double

 

XAML

<Popup VerticalOffset="double"/>

Value

double double double

A measurement in pixels.

Attributes

ContractVersionAttribute

VerticalOffsetProperty VerticalOffsetProperty VerticalOffsetProperty

 

Gets the identifier for the VerticalOffset dependency property.

 

 

 

C#

 

 

public static DependencyProperty VerticalOffsetProperty { get; }public static DependencyProperty VerticalOffsetProperty { get; }Public Static ReadOnly Property VerticalOffsetProperty As DependencyProperty

Value

DependencyProperty DependencyProperty DependencyProperty

The identifier for the VerticalOffset dependency property.

Attributes

ContractVersionAttribute

Events

Closed Closed Closed

 

Fires when the IsOpen property is set to false.

 

 

 

C#

 

 

public event EventHandler Closedpublic event EventHandler ClosedPublic Event Closed

 

XAML

<Popup Closed="eventhandler"/>

Attributes

ContractVersionAttribute

Opened Opened Opened

 

Fires when the IsOpen property is set to true.

 

 

 

C#

 

 

public event EventHandler Openedpublic event EventHandler OpenedPublic Event Opened

 

XAML

<Popup Opened="eventhandler"/>

Attributes

ContractVersionAttribute

 

来自 <https://docs.microsoft.com/en-us/uwp/api/Windows.UI.Xaml.Controls.Primitives.Popup>

 

 

posted @ 2018-01-20 21:07  奔跑的蒲公英  阅读(266)  评论(0编辑  收藏  举报