Información general sobre el control Popup

  • Artículo

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

¿Qué es un control Popup?

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

Nota:

Un control Popup no se abre automáticamente cuando el puntero del mouse se mueve sobre el objeto primario. Si desea abrir automáticamente Popup, use la clase ToolTip o ToolTipService. Para más información, consulte Información general de información sobre herramientas.

Creación de un elemento emergente

En el ejemplo siguiente se muestra cómo definir un control Popup que es el elemento secundario de un control ToggleButton. Dado que un objeto ToggleButton solo puede tener un elemento secundario, en este ejemplo se coloca el texto de los controles ToggleButton y Popup en 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 un control Popup

Puede compilar controles Popup en otros controles. Los siguientes controles implementan el control Popup para una serie de usos específicos:

El control Popup proporciona funcionalidad que permite personalizar su comportamiento y apariencia. Por ejemplo, puede establecer un comportamiento de apertura y cierre, animación, opacidad y efectos de imagen, además del tamaño y la posición de Popup.

Comportamiento de apertura y cierre

Un control Popup muestra su contenido cuando la propiedad IsOpen se establece en true. De forma predeterminada, Popup permanece abierto hasta que la propiedad IsOpen se establece 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 mouse. El control Popup pierde la captura del mouse y la ventana se cierra cuando se produce un evento de mouse fuera de la ventana Popup.

Los eventos Opened y Closed se generan cuando la ventana de contenido Popup está abierta o cerrada.

Animación

El control Popup tiene compatibilidad integrada con las animaciones que se asocian habitualmente con comportamientos como fundido y deslizamiento. Puede activar estas animaciones definiendo la propiedad PopupAnimation en un valor de enumeración PopupAnimation. Para que las animaciones Popup funcionen correctamente, debe establecer la propiedad AllowsTransparency en true.

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

Opacidad y efectos de imagen

La propiedad Opacity de un control Popup no afectará al contenido. De manera predeterminada, la ventana de contenido de Popup es opaca. Para crear una Popup transparente, establezca la propiedad AllowsTransparency en true.

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

De forma predeterminada, Popup se ajusta automáticamente a su contenido. Cuando se produce el ajuste automático, es posible que se oculten algunos efectos de imagen porque el tamaño predeterminado del área de la pantalla definido para el contenido de Popup no proporciona espacio suficiente para que se muestren los efectos de imagen.

El contenido de Popup también puede quedar tapado cuando se establece un RenderTransform en el contenido. En este escenario, es posible que se oculte cierto contenido si el contenido del control Popup transformado se extiende más allá del área del control Popup original. Si una transformación o un efecto de imagen requiere más espacio, puede definir un margen alrededor del contenido de Popup para proporcionar más área para el control.

Definición de la posición del control Popup

Puede colocar un elemento emergente estableciendo las propiedades PlacementTarget, PlacementRectangle, Placement, HorizontalOffset y VerticalOffsetProperty. Para más información, consulte Posición de un control Popup. Cuando el control Popup se muestra en la pantalla, no cambia su posición si se cambia la posición del elemento principal.

Personalización de la ubicación del elemento Popup

Puede personalizar la ubicación de un control Popup si especifica un conjunto de coordenadas relativas al elemento PlacementTarget donde quiere que aparezca el control Popup.

Para personalizar la selección de ubicación, establezca la propiedad Placement en Custom. Después, defina un delegado de CustomPopupPlacementCallback que devuelva un conjunto de posibles puntos de colocación y ejes principales (en orden de preferencia) para Popup. El punto que muestra la parte más grande del elemento Popup se selecciona automáticamente. Para ver un ejemplo, consulte cómo especificar una posición emergente personalizada.

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

El control Popup mantiene una referencia a su contenido de Child como elemento secundario lógico. Cuando se crea la 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 contenido Child.

Vea también