Información general sobre el control Popup

Artículo
10/07/2008

Actualización: noviembre 2007

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

Este tema contiene las secciones siguientes.

¿Qué es un control Popup?
Crear un control Popup
Controles que implementan un control Popup
Comportamiento y aspecto del control Popup
Definir la posición del control Popup
Controles Popup y el árbol visual
Temas relacionados

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

Nota

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

En el ejemplo siguiente se muestra cómo definir un control Popup que es el elemento secundario de un control Button. Dado que Button puede tener un solo elemento secundario, en este ejemplo se coloca el texto correspondiente a los controles Button y Popup en un objeto StackPanel. El contenido de Popup aparece en un control TextBlock, que muestra su texto en una ventana independiente que flota sobre la ventana de la aplicación cerca del control Button relacionado.

<Button HorizontalAlignment="Left" Click="DisplayPopup" 
        Width="150" Margin="20,10,0,0">
  <StackPanel>
    <TextBlock>Display Your Popup Text</TextBlock>
    <Popup Name="myPopup">
      <TextBlock Name="myPopupText" 
                 Background="LightBlue" 
                 Foreground="Blue">
        Popup Text
      </TextBlock>
    </Popup>
  </StackPanel>
</Button>

<Button Name="ButtonForPopup" HorizontalAlignment="Left" 
        Click="CreatePopup"  
        Width="150" Margin="20,10,0,0">
  <StackPanel Name="aStackPanel">
    <TextBlock>Create Popup</TextBlock>
  </StackPanel>
</Button>

Puede integrar los controles Popup en otros controles. Los controles siguientes implementan el control Popup para usos concretos:

ToolTip. Si desea crear una información sobre herramientas para un elemento, utilice las clases ToolTip y ToolTipService. Para obtener más información, consulte Información general de información sobre herramientas.
ContextMenu. Si desea crear un menú contextual para un elemento, utilice el control ContextMenu. Para obtener más información, consulte Información general sobre ContextMenu.
ComboBox. Si desea crear un control de selección que tenga un cuadro de lista desplegable que se pueda mostrar u ocultar, utilice el control ComboBox.
Expander. Si desea crear un control que muestre un encabezado con un área contraíble que muestra contenido, utilice el control Expander. Para obtener más información, consulte Información general sobre el control Expander.

El control Popup proporciona funcionalidad que permite personalizar su comportamiento y aspecto. Por ejemplo, puede establecer su comportamiento al abrirlo y cerrarlo, animaciones, efectos de opacidad y mapa de bits, así como el tamaño y la posición de Popup.

Comportamiento al abrirlo y cerrarlo

Un control Popup muestra su contenido cuando la propiedad IsOpen está establecida en true. De manera 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 de Popup tiene la captura del mouse. Popup pierde la captura del mouse y la ventana se cierra cuando un evento del mouse se produce fuera de la ventana de Popup.

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

Animación

El control Popup cuenta con compatibilidad integrada para las animaciones que se suelen asociar a comportamientos tales como el fundido de entrada y el deslizamiento. Puede activar estas animaciones estableciendo 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 tales como Storyboard al control Popup. Para obtener un ejemplo, consulte Ejemplo Animated Popup.

Efectos de opacidad y de mapa de bits

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

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

De manera predeterminada, un Popup ajusta su tamaño automáticamente a su contenido. Cuando se produce el ajuste de tamaño automático, puede ocurrir que algunos efectos de mapa de bits queden ocultos si el tamaño predeterminado del área de pantalla que se define para el contenido de Popup no proporciona espacio suficiente para que se muestren dichos efectos.

El contenido Popup también puede quedar oculto cuando se establece una transformación RenderTransform para el contenido. En este escenario, parte del contenido puede quedar oculto si el contenido del control Popup transformado se extiende más allá del área del Popup original. Si un efecto de mapa de bits o una transformación requiere más espacio, puede definir un margen alrededor del contenido de Popup a fin de aumentar el área del control. Para obtener más información, que incluye un ejemplo, consulte Ejemplo Animated Popup.

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

Puede personalizar la posición de un control Popup especificando un conjunto de coordenadas que son relativas a la propiedad PlacementTarget donde debe aparecer el control Popup.

Para personalizar la posición, establezca la propiedad Placement en Custom. Después defina un delegado de CustomPopupPlacementCallback que devuelva un conjunto de puntos de posición y ejes primarios (en orden de preferencia) posibles para Popup. El punto que muestra la parte mayor de Popup se selecciona automáticamente. Para obtener un ejemplo, consulte Cómo: Especificar una posición emergente personalizada.

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

El control Popup mantiene una referencia al contenido de su propiedad Child como un 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 un elemento secundario lógico de Popup. A la inversa, Popup sigue siendo el elemento primario lógico del contenido de su propiedad Child.