Compartir a través de


Información general sobre el control Popup

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

¿Qué es un control Popup?

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.

Crear un control Popup

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>

Controles que implementan un control Popup

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

Comportamiento y aspecto del control Popup

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.

Tamaño del control Popup

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.

Definir la posición del control 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.

Personalizar la posición de un control Popup

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.

Controles Popup y el árbol visual

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.

Vea también

Referencia

Popup

PopupPrimaryAxis

PlacementMode

CustomPopupPlacement

CustomPopupPlacementCallback

ToolTip

ToolTipService

Otros recursos

Temas "Cómo..." sobre el control Popup

Temas "Cómo..." de información sobre herramientas

Ejemplos de Popup