Compartir a través de

Información general sobre ventanas emergentes

El Popup control proporciona una manera de mostrar contenido en una ventana independiente que flota sobre la ventana de aplicación actual en relación con un elemento designado o una coordenada de pantalla. En este tema se presenta el Popup control y se proporciona información sobre su uso.

¿Qué es una ventana emergente?

Un Popup control muestra contenido en una ventana independiente relativa a un elemento o punto en la pantalla. Cuando el Popup está visible, la propiedad IsOpen se establece en true.

Nota:

No Popup se abre automáticamente cuando el puntero del mouse se mueve sobre su objeto primario. Si quiere que un Popup se abra automáticamente, use la clase ToolTip o ToolTipService. Para obtener más información, vea Información general sobre herramientas.

Crear una ventana emergente

En el ejemplo siguiente se muestra cómo definir un Popup control que es el elemento secundario de un ToggleButton control. Dado que un ToggleButton solo puede tener un elemento secundario, en este ejemplo se coloca el texto para los controles ToggleButton y Popup en un StackPanel. El contenido de Popup se muestra en una ventana independiente que flota sobre la ventana de la aplicación cerca del control relacionado 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>

Controles que implementan una ventana emergente

Puede incorporar controles Popup en otros controles. Los controles siguientes implementan el Popup control para usos específicos:

El Popup control proporciona funcionalidad que le permite personalizar su comportamiento y apariencia. Por ejemplo, puede establecer el comportamiento de apertura y cierre, la animación, la opacidad y los efectos de mapa de bits, así como el tamaño y la posición.

Comportamiento de apertura y cierre

Un control Popup muestra su contenido cuando la propiedad IsOpen está establecida en true. De forma predeterminada, Popup permanece abierto hasta que la IsOpen propiedad esté establecida en false. Sin embargo, puede cambiar el comportamiento predeterminado estableciendo la propiedad StaysOpen en false. Al establecer esta propiedad en false, la ventana de contenido Popup tiene captura del ratón. La Popup pierde la captura del ratón y la ventana se cierra cuando ocurre un evento de ratón fuera de la ventana Popup.

Los eventos Opened y Closed se generan cuando la ventana de contenido Popup se abre o se cierra.

Animación

El Popup control tiene soporte integrado para las animaciones que normalmente están asociadas a comportamientos como el fundido y el deslizamiento. Puede activar estas animaciones configurando el valor de enumeración de la propiedad PopupAnimation como PopupAnimation. Para que las animaciones de Popup funcionen correctamente, debe establecer la propiedad AllowsTransparency en true.

También puedes aplicar animaciones como Storyboard al Popup control.

Opacidad y efectos de mapa de bits

La Opacity propiedad de un Popup control no tiene ningún efecto en su contenido. De forma predeterminada, la Popup ventana de contenido es opaca. Para crear un Popup transparente, establezca la propiedad AllowsTransparency en true.

El contenido de un Popup no hereda efectos de mapa de bits, como DropShadowBitmapEffect, que estableces directamente en el control Popup o en cualquier otro elemento de la ventana principal. Para que los efectos de mapa de bits aparezcan en el contenido de Popup, debe establecer el efecto de mapa de bits directamente en su contenido. Por ejemplo, si el elemento secundario de un Popup es un StackPanel, establezca el efecto de mapa de bits en el StackPanel.

De forma predeterminada, un Popup se ajusta automáticamente a su contenido. Cuando se produce el ajuste automático de tamaño, algunos efectos de mapa de bits pueden ocultarse porque el tamaño predeterminado del área de pantalla definida para el Popup contenido no proporciona espacio suficiente para que se muestren los efectos del mapa de bits.

Popup El contenido también se puede ocultar al establecer un RenderTransform en el contenido. En este escenario, es posible que algún contenido se oculte si el contenido de la transformación Popup se extiende más allá del área del original Popup. Si un efecto o transformación de mapa de bits requiere más espacio, puede definir un margen alrededor del Popup contenido para proporcionar más área para el control.

Definición de la posición del popup

Puede posicionar un elemento emergente estableciendo las PlacementTarget, PlacementRectangle, Placement, HorizontalOffset y VerticalOffsetProperty propiedades. Para obtener más información, vea Comportamiento de colocación de ventanas emergentes. Cuando Popup se muestra en la pantalla, no se cambia la posición si su elemento primario se cambia de posición.

Personalización de la ubicación de elementos emergentes

Puede personalizar la colocación de un control Popup especificando un conjunto de coordenadas que son relativas al PlacementTarget en el que desea que aparezca el Popup.

Para personalizar la ubicación, establezca la propiedad Placement a Custom. A continuación, defina un CustomPopupPlacementCallback delegado que devuelva un conjunto de posibles puntos de colocación y ejes principales (en orden de preferencia) para el Popup. El punto que muestra la parte más grande de el Popup se selecciona automáticamente. Para obtener un ejemplo, vea Especificar una posición emergente personalizada.

Un Popup control no tiene su propio árbol visual; en su lugar, devuelve un tamaño de 0 (cero) cuando se llama al MeasureOverride método para Popup . Sin embargo, cuando se establece la IsOpen propiedad de Popup en true, se crea una nueva ventana con su propio árbol visual. La nueva ventana contiene el Child contenido de Popup. El ancho y el alto de la nueva ventana no pueden ser mayores del 75 por ciento del ancho o alto de la pantalla.

El Popup control mantiene una referencia a su Child contenido como elemento secundario lógico. Cuando se crea la nueva ventana, el contenido de Popup se convierte en un elemento secundario visual de la ventana y sigue siendo el elemento secundario lógico de Popup. Por el contrario, Popup sigue siendo el elemento primario lógico de su Child contenido.

Consulte también

  • Last updated on