Posición de un control Popup

Actualización: noviembre 2007

Un control Popup muestra el contenido en una ventana independiente que flota sobre una aplicación. Puede especificar la posición de un objeto Popup respecto a un control, al mouse o a la pantalla mediante las propiedades PlacementTarget, Placement, PlacementRectangle, HorizontalOffset y VerticalOffset. Estas propiedades funcionan juntas para proporcionar flexibilidad con el fin de especificar la posición de Popup.

Nota

Las clases ToolTip y ContextMenu también definen estas cinco propiedades y se comportan de forma muy parecida.

Este tema contiene las secciones siguientes.

• Colocar el elemento emergente
• Definiciones de términos: anatomía de un elemento emergente
• Funcionamiento de las propiedades juntas
• Cuando el elemento emergente se encuentra con el borde de la pantalla
• Temas relacionados

Colocar el elemento emergente

La colocación del control Popup puede ser relativa a UIElement o a la pantalla completa. En el ejemplo siguiente, se crean cuatro controles Popup que son relativos a UIElement, en este caso, una imagen. Todos los controles Popup tienen el valor de la propiedad PlacementTarget establecido en image1, pero cada Popup tiene un valor diferente para la propiedad de posición.

<Canvas Width="200" Height="150">
  <Image Name="image1"
         Canvas.Left="75" 
         Source="Water_lilies.jpg" Height="200" Width="200"/>
  <Popup IsOpen="True" PlacementTarget="{Binding ElementName=image1}"
         Placement="Bottom">
    <TextBlock FontSize="14" Background="LightGreen">Placement=Bottom</TextBlock>

  </Popup>
  <Popup IsOpen="True" PlacementTarget="{Binding ElementName=image1}"
         Placement="Top">
    <TextBlock FontSize="14" Background="LightGreen">Placement=Top</TextBlock>

  </Popup>
  <Popup IsOpen="True" PlacementTarget="{Binding ElementName=image1}"
         Placement="Left">
    <TextBlock FontSize="14" Background="LightGreen">Placement=Left</TextBlock>

  </Popup>
  <Popup IsOpen="True" PlacementTarget="{Binding ElementName=image1}"
         Placement="Right">
    <TextBlock FontSize="14" Background="LightGreen">Placement=Right</TextBlock>

  </Popup>
</Canvas>

En la siguiente ilustración, se muestran la imagen y los controles Popup

Imagen con cuatro elementos emergentes

En este sencillo ejemplo, se muestra cómo establecer el valor de las propiedades PlacementTarget y Placement, pero si usa las propiedades PlacementRectangle, HorizontalOffset y VerticalOffset, tiene aún más control sobre el lugar de colocación de Popup.

Definiciones de términos: anatomía de un elemento emergente

Los siguientes términos se usan para comprender cómo se relacionan las propiedades PlacementTarget, Placement, PlacementRectangle, HorizontalOffset y VerticalOffset entre sí y con Popup:

• Objeto de destino

• Área de destino

• Origen de destino

• Punto de alineación del elemento emergente

Estos términos constituyen una forma adecuada de hacer referencia a los distintos aspectos de Popup y al control al que está asociado.

Objeto de destino

El objeto de destino es el elemento al que está asociado Popup. Si se establece la propiedad PlacementTarget, especifica el objeto de destino. Si no se establecen PlacementTarget y Popup tiene un elemento primario, este elemento es el objeto de destino. Si no hay ningún valor de PlacementTarget ni ningún elemento primario, no existe el objeto de destino y Popup se coloca con respecto a la pantalla.

En el ejemplo siguiente, se crea Popup que es el elemento secundario de Canvas. El ejemplo no establece el valor de la propiedad PlacementTarget del control Popup. El valor predeterminado de Placement es PlacementMode.Bottom, por tanto, Popup aparece debajo de Canvas.

<Canvas Margin="5" Background="Red" Width="200" Height="150" >

  <Ellipse Canvas.Top="60" Canvas.Left="50"
           Height="85" Width="60" 
           Fill="Black"/>

  <Popup IsOpen="True" >
    <TextBlock Background="LightBlue" FontSize="18">This is a Popup</TextBlock>
  </Popup>
</Canvas>

En la ilustración siguiente, se muestra que Popup se coloca respecto a Canvas.

Popup sin PlacementTarget

En el ejemplo siguiente, se crea un control Popup que es el elemento secundario de Canvas, pero ahora se establece PlacementTarget en ellipse1, por tanto, el elemento emergente aparece debajo de Ellipse.

<Canvas Margin="5" Background="Red" Width="200" Height="150" >

  <Ellipse Name="ellipse1"
           Canvas.Top="60" Canvas.Left="50"
           Height="85" Width="60" 
           Fill="Black"/>

  <Popup IsOpen="True" PlacementTarget="{Binding ElementName=ellipse1}">
    <TextBlock Background="LightBlue" FontSize="18">This is a Popup</TextBlock>
  </Popup>
</Canvas>

En la ilustración siguiente, se ve que Popup se coloca respecto a Ellipse.

Popup con PlacementTarget

Nota

En ToolTip, el valor predeterminado de Placement es Mouse. En ContextMenu, el valor predeterminado de Placement es MousePoint. Estos valores se explican más adelante en la sección "Funcionamiento de las propiedades juntas".

Área de destino

El área de destino es el área de la pantalla respecto a la que es relativo el control Popup. En los ejemplos anteriores, el control Popup se alinea con los límites del objeto de destino pero, en algunos casos, Popup se alinea con otros límites, aunque Popup tenga un objeto de destino. Si se establece la propiedad PlacementRectangle, el área de destino es distinta de los límites del objeto de destino.

En el ejemplo siguiente, se crean dos objetos Canvas, cada uno de los cuales contiene Rectangle y Popup. En ambos casos, el objeto de destino de Popup es Canvas. El control Popup del primer objeto Canvas tiene establecido el valor de la propiedad PlacementRectangle, con el valor de sus propiedades X, Y, Width y Height establecido en 50, 50, 50 y 100, respectivamente. El control Popup del segundo objeto Canvas no tiene establecida la propiedad PlacementRectangle. Como resultado, el primer control Popup se coloca debajo de PlacementRectangle y el segundo Popup, debajo de Canvas. Cada objeto Canvas también contiene un objeto Rectangle con los mismos límites que el objeto PlacementRectangle del primer control Popup. Observe que PlacementRectangle no crea ningún elemento visible en la aplicación; en el ejemplo, se crea Rectangle para representar PlacementRectangle.

<StackPanel Orientation="Horizontal" Margin="50,50,0,0">

  <Canvas Width="200" Height="200" Background="Red">
    <Rectangle Canvas.Top="50" Canvas.Left="50" 
               Width="50" Height="100"
               Stroke="White" StrokeThickness="3"/>
    <Popup IsOpen="True" PlacementRectangle="50,50,50,100">
      <TextBlock FontSize="14" Background="Yellow"
                 Width="140" TextWrapping="Wrap">
        This is a popup with a PlacementRectangle.
      </TextBlock>
    </Popup>
  </Canvas>

  <Canvas Width="200" Height="200" Background="Red" Margin="30,0,0,0">
    <Rectangle Canvas.Top="50" Canvas.Left="50" 
               Width="50" Height="100"
               Stroke="White" StrokeThickness="3"/>
    <Popup IsOpen="True">
      <TextBlock FontSize="14" Background="Yellow"
                 Width="140" TextWrapping="Wrap">
        This is a popup without a PlacementRectangle.
      </TextBlock>
    </Popup>
  </Canvas>

</StackPanel>

En la ilustración siguiente, se ve el resultado del ejemplo anterior.

Popup con y sin PlacementRectangle

Origen del destino y punto de alineación del elemento emergente

El origen del destino y el punto de alineación del elemento emergente son los puntos de referencia del área de destino y del elemento emergente, respectivamente, que se usan para la colocación. Puede usar las propiedades HorizontalOffset y VerticalOffset para desplazar el elemento emergente desde el área de destino. Las propiedades HorizontalOffset y VerticalOffset son relativas al origen del destino y al punto de alineación del elemento emergente. El valor de la propiedad Placement determina la ubicación del origen del destino y del punto de alineación del elemento emergente.

En el ejemplo siguiente, se crea un objeto Popup y se establece el valor de las propiedades HorizontalOffset y VerticalOffset en 20. El valor de la propiedad Placement se establece en Bottom (el valor predeterminado); por tanto, el origen del destino está en la esquina inferior izquierda del área de destino y el punto de alineación del elemento emergente, en la esquina superior izquierda del control Popup.

<Canvas Width="200" Height="200" Background="Yellow" Margin="20">
  <Popup IsOpen="True" Placement="Bottom"
         HorizontalOffset="20" VerticalOffset="20">
    <TextBlock FontSize="14" Background="#42F3FD">
      This is a popup.
    </TextBlock>
  </Popup>
</Canvas>

En la ilustración siguiente, se ve el resultado del ejemplo anterior.

Popup con HorizontalOffset y VerticalOffset

Funcionamiento de las propiedades juntas

Los valores de las propiedades PlacementTarget, PlacementRectangle y Placement se deben tener en cuenta juntos para calcular el área de destino, el origen del destino y el punto de la alineación del elemento emergente correctos. Por ejemplo, si el valor de Placement es Mouse, no hay ningún objeto de destino, se omite PlacementRectangle y el área de destino corresponde a los límites del puntero del mouse. Por otra parte, si Placement es Bottom, PlacementTarget o el elemento primario determinan el objeto de destino y PlacementRectangle determina el área de destino.

En la tabla siguiente, se describen el objeto de destino, el área de destino, el origen de destino y el punto de alineación del elemento emergente y se indica si se usan las propiedades PlacementTarget y PlacementRectangle para cada valor de la enumeración PlacementMode.

PlacementMode	Objeto de destino	Área de destino	Origen de destino	Punto de alineación del elemento emergente
Absolute	No aplicable. Se omite PlacementTarget.	La pantalla o PlacementRectangle si se establece. La propiedad PlacementRectangle es relativa a la pantalla.	Esquina superior izquierda del área de destino.	Esquina superior izquierda de Popup.
AbsolutePoint	No aplicable. Se omite PlacementTarget.	La pantalla o PlacementRectangle si se establece. La propiedad PlacementRectangle es relativa a la pantalla.	Esquina superior izquierda del área de destino.	Esquina superior izquierda de Popup.
Bottom	PlacementTarget o elemento primario.	Objeto de destino o PlacementRectangle si se define. La propiedad PlacementRectangle es relativa al objeto de destino.	Esquina inferior izquierda del área de destino.	Esquina superior izquierda de Popup.
Center	PlacementTarget o elemento primario.	Objeto de destino o PlacementRectangle si se define. La propiedad PlacementRectangle es relativa al objeto de destino.	Centro del área de destino.	Centro del objeto Popup.
Custom	PlacementTarget o elemento primario.	Objeto de destino o PlacementRectangle si se define. La propiedad PlacementRectangle es relativa al objeto de destino.	Definido por CustomPopupPlacementCallback.	Definido por CustomPopupPlacementCallback.
Left	PlacementTarget o elemento primario.	Objeto de destino o PlacementRectangle si se define. La propiedad PlacementRectangle es relativa al objeto de destino.	Esquina superior izquierda del área de destino.	Esquina superior derecha de Popup.
Mouse	No aplicable. Se omite PlacementTarget.	Límites del puntero del mouse. Se omite PlacementRectangle.	Esquina inferior izquierda del área de destino.	Esquina superior izquierda de Popup.
MousePoint	No aplicable. Se omite PlacementTarget.	Límites del puntero del mouse. Se omite PlacementRectangle.	Esquina superior izquierda del área de destino.	Esquina superior izquierda de Popup.
Relative	PlacementTarget o elemento primario.	Objeto de destino o PlacementRectangle si se define. La propiedad PlacementRectangle es relativa al objeto de destino.	Esquina superior izquierda del área de destino.	Esquina superior izquierda de Popup.
RelativePoint	PlacementTarget o elemento primario.	Objeto de destino o PlacementRectangle si se define. La propiedad PlacementRectangle es relativa al objeto de destino.	Esquina superior izquierda del área de destino.	Esquina superior izquierda de Popup.
Right	PlacementTarget o elemento primario.	Objeto de destino o PlacementRectangle si se define. La propiedad PlacementRectangle es relativa al objeto de destino.	Esquina superior derecha del área de destino.	Esquina superior izquierda de Popup.
Top	PlacementTarget o elemento primario.	Objeto de destino o PlacementRectangle si se define. La propiedad PlacementRectangle es relativa al objeto de destino.	Esquina superior izquierda del área de destino.	Esquina inferior izquierda de Popup.

En las ilustraciones siguientes, se muestran Popup, el área de destino, el origen de destino y el punto de la alineación del elemento emergente de cada valor de PlacementMode. En cada figura, el área de destino es amarilla y Popup es azul.

Posición Absolute o AbsolutePoint

Posición inferior

Posición central

Posición izquierda

Posición Mouse

Posición MousePoint

Posición Relative o RelativePoint

Posición derecha

Posición superior

Cuando el elemento emergente se encuentra con el borde de la pantalla

Por razones de seguridad, el borde de una pantalla no puede ocultar ningún control Popup. Pasa una de estas tres cosas cuando el control Popup se encuentra con el borde de una pantalla:

• El elemento emergente se vuelve a alinear a lo largo del borde de la pantalla que ocultaría el control Popup.

• El elemento emergente usa un punto de alineación de elemento emergente diferente.

• El elemento emergente usa un origen del destino y un punto de alineación del elemento emergente distintos.

Estas opciones se describen con más detalles más adelante en esta sección.

El comportamiento de Popup cuando se encuentra con el borde de una pantalla depende del valor de la propiedad Placement y del borde de la pantalla que se encuentra con el elemento emergente. En la tabla siguiente, se resume el comportamiento cuando Popup se encuentra con el borde de una pantalla para cada valor de PlacementMode.

PlacementMode	Borde superior	Borde inferior	Borde izquierdo	Borde derecho
Absolute	Alinea al borde superior.	Alinea al borde inferior.	Alinea al borde izquierdo.	Alinea al borde derecho.
AbsolutePoint	Alinea al borde superior.	El punto de alineación del elemento emergente cambia a la esquina inferior izquierda de Popup.	Alinea al borde izquierdo.	El punto de alineación del elemento emergente cambia a la esquina superior derecha de Popup.
Bottom	Alinea al borde superior.	El origen del destino cambia a la esquina superior izquierda del área de destino y el punto de alineación del elemento emergente cambia a la esquina inferior izquierda del control Popup.	Alinea al borde izquierdo.	Alinea al borde derecho.
Center	Alinea al borde superior.	Alinea al borde inferior.	Alinea al borde izquierdo.	Alinea al borde derecho.
Left	Alinea al borde superior.	Alinea al borde inferior.	El origen del destino cambia a la esquina superior derecha del área de destino y el punto de alineación del elemento emergente cambia a la esquina superior izquierda del control Popup.	Alinea al borde derecho.
Mouse	Alinea al borde superior.	El origen del destino cambia a la esquina superior izquierda del área de destino (los límites del puntero del mouse) y el punto de alineación del elemento emergente cambia a la esquina inferior izquierda del control Popup.	Alinea al borde izquierdo.	Alinea al borde derecho.
MousePoint	Alinea al borde superior.	El punto de alineación del elemento emergente cambia a la esquina inferior izquierda de Popup.	Alinea al borde izquierdo.	El punto de alineación del elemento emergente cambia a la esquina superior derecha del elemento emergente.
Relative	Alinea al borde superior.	Alinea al borde inferior.	Alinea al borde izquierdo.	Alinea al borde derecho.
RelativePoint	Alinea al borde superior.	El punto de alineación del elemento emergente cambia a la esquina inferior izquierda de Popup.	Alinea al borde izquierdo.	El punto de alineación del elemento emergente cambia a la esquina superior derecha del elemento emergente.
Right	Alinea al borde superior.	Alinea al borde inferior.	Alinea al borde izquierdo.	El origen del destino cambia a la esquina superior izquierda del área de destino y el punto de alineación del elemento emergente cambia a la esquina superior derecha del control Popup.
Top	El origen del destino cambia a la esquina inferior izquierda del área de destino y el punto de alineación del elemento emergente cambia a la esquina superior izquierda del control Popup. De hecho, es lo mismo que cuando Placement es Bottom.	Alinea al borde inferior.	Alinea al borde izquierdo.	Alinea al borde derecho.

Alinear al borde de la pantalla

Popup puede alinearse al borde de la pantalla cambiándose de posición para que el control Popup completo se vea en la pantalla. Cuando ocurre esto, la distancia entre el origen del destino y el punto de alineación del elemento emergente podría diferir de los valores de HorizontalOffset y VerticalOffset. Cuando Placement es Absolute, Centero Relative, el control Popup se alinea respecto a cada borde de la pantalla. Por ejemplo, supongamos que un control Popup tiene el valor de la propiedad Placement establecido en Relative y el de la propiedad VerticalOffset, en 100. Si el borde inferior de la pantalla oculta todo o parte del control Popup, el control Popup se vuelve a colocar en el borde inferior de la pantalla y la distancia vertical entre el origen del destino y el punto de alineación del elemento emergente es menor que 100. En la siguiente ilustración, se muestra este hecho.

El elemento emergente se alinea con el borde de la pantalla

Cambiar el punto de alienación del elemento emergente

Si Placement es AbsolutePoint, RelativePointo MousePoint, el punto de la alineación del elemento emergente cambia cuando este punto se encuentra con el borde inferior o derecho de la pantalla.

En la ilustración siguiente, se ve que cuando el borde inferior de la pantalla oculta todo o parte del control Popup, el punto de la alineación del elemento emergente está en la esquina inferior izquierda del control Popup.

El elemento emergente se encuentra con el borde inferior de la pantalla y cambia el punto de alineación del elemento emergente

En la ilustración siguiente, se ve que cuando el borde derecho de la pantalla oculta el control Popup, el punto de alineación del elemento emergente está en la esquina superior derecha del control Popup.

El elemento emergente se encuentra con el borde derecho de la pantalla y cambia el punto de alineación del elemento emergente

Si el control Popup se encuentra con los bordes inferior y derecho de la pantalla, el punto de alineación del elemento emergente está en la esquina inferior derecha del control Popup.

Cambiar el origen del destino y el punto de alienación del elemento emergente

Cuando Placement es Bottom, Left, Mouse, Righto Top, cambian el origen del destino y el punto de alineación del elemento emergente si se encuentra con un borde determinado de la pantalla. El borde de la pantalla que provoca el cambio de posición depende del valor de PlacementMode.

En la ilustración siguiente, se ve que cuando Placement es Bottom y Popup se encuentra con el borde inferior de la pantalla, el origen del destino está en la esquina superior izquierda del área de destino y el punto de la alineación del elemento emergente, en la esquina inferior izquierda del control Popup.

Placement es Bottom y el elemento emergente se encuentra con el borde inferior de la pantalla

En la ilustración siguiente, se ve que cuando Placement es Left y Popup se encuentra con el borde izquierdo de la pantalla, el origen del destino está en la esquina superior derecha del área de destino y el punto de la alineación del elemento emergente, en la esquina superior izquierda del control Popup.

Placement es Left y el elemento emergente se encuentra con el borde izquierdo de la pantalla

En la ilustración siguiente, se ve que cuando Placement es Right y Popup se encuentra con el borde derecho de la pantalla, el origen del destino está en la esquina superior izquierda del área de destino y el punto de la alineación del elemento emergente, en la esquina superior derecha del control Popup.

Placement es Right y el elemento emergente se encuentra con el borde derecho de la pantalla

En la ilustración siguiente, se ve que cuando Placement es Top y Popup se encuentra con el borde superior de la pantalla, el origen del destino está en la esquina inferior izquierda del área de destino y el punto de la alineación del elemento emergente, en la esquina superior izquierda del control Popup.

Placement es Top y el elemento emergente se encuentra con el borde superior de la pantalla

En la ilustración siguiente, se ve que cuando Placement es Mouse y Popup se encuentra con el borde inferior de la pantalla, el origen del destino está en la esquina superior izquierda del área de destino (los límites del puntero del mouse) y el punto de la alineación del elemento emergente, en la esquina inferior izquierda del control Popup.

Placement es Mouse y el elemento emergente se encuentra con el borde inferior de la pantalla

Personalizar la posición del elemento emergente

Puede personalizar el origen del destino y el punto de alineación del elemento emergente estableciendo el valor de 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. Se selecciona el punto que muestra la parte mayor de Popup. Se ajusta automáticamente la posición de Popup si el borde de la pantalla oculta Popup. Para obtener un ejemplo, vea Cómo: Especificar una posición emergente personalizada.

Vea también

Tareas

Ejemplo Popup Placement