Comportamiento de posición de ventanas emergentes

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

Posicionamiento de la ventana emergente

La colocación de un Popup puede ser relativa a un UIElement o a toda la pantalla. En el ejemplo siguiente se crean cuatro Popup controles que son relativos a una UIElementimagen; en este caso, una imagen. Todos los Popup controles tienen la propiedad PlacementTarget establecida en image1, pero cada Popup tiene un valor diferente para la propiedad de colocació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 ilustración siguiente se muestra la imagen y los controles.Popup

En este ejemplo sencillo se muestra cómo establecer las propiedades PlacementTarget y Placement, pero mediante las propiedades PlacementRectangle, HorizontalOffset y VerticalOffset, tiene aún más control sobre dónde se ubica el Popup.

![NOTA] Dependiendo de la configuración de Windows relacionada con la mano dominante, el elemento emergente puede estar alineado a la izquierda o a la derecha cuando se muestra en la parte superior o inferior. En la imagen anterior se muestra la alineación para diestros, que coloca el elemento emergente a la izquierda.

Definiciones de términos: La anatomía de una ventana emergente

Los siguientes términos son útiles para comprender cómo se relacionan entre sí las PlacementTarget, Placement, PlacementRectangle, HorizontalOffset y VerticalOffset propiedades y el Popup.

• Objeto de destino

• Área de destino

• Origen de destino

• Punto de alineación del elemento emergente

Estos términos proporcionan una manera cómoda de hacer referencia a diversos aspectos del Popup y al control con el que está asociado.

Objeto de destino

El objeto de destino es el elemento al que Popup está asociado . Si se establece la PlacementTarget propiedad , especifica el objeto de destino. Si PlacementTarget no se establece y Popup tiene un elemento primario, el elemento primario es el objeto de destino. Si no hay ningún valor y ningún elemento primario, no hay ningún objeto de destino y PlacementTarget se posiciona en relación con la pantalla.

En el ejemplo siguiente se crea un objeto Popup que es el elemento secundario de un Canvas. El ejemplo no establece la propiedad PlacementTarget en el Popup. El valor predeterminado de Placement es PlacementMode.Bottom, por lo que 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 está situado en relación con .Canvas

En el ejemplo siguiente se crea un Popup que es el elemento secundario de un Canvas, pero esta vez el PlacementTarget está configurado en ellipse1, por lo que el elemento emergente aparece debajo del 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 muestra que Popup está situado en relación con .Ellipse

Área de destino

El área de destino es el área de la pantalla en la que Popup se encuentra relativo. En los ejemplos anteriores, Popup se alinea con los límites del objeto de destino, pero, en algunos casos, Popup se alinea con otros límites, incluso si Popup tiene un objeto de destino. Si se establece la propiedad, el PlacementRectangle área de destino es diferente de los límites del objeto de destino.

En el ejemplo siguiente se crean dos objetos Canvas, cada uno que contiene un Rectangle y un Popup. En ambos casos, el objeto de destino de Popup es .Canvas en Popup el primero Canvas tiene establecido PlacementRectangle , con sus Xpropiedades , Y, Widthy Height establecidas en 50, 50, 50, 50 y 100, respectivamente. El Popup en el segundo Canvas no tiene PlacementRectangle establecido. Como resultado, la primera Popup se coloca debajo de PlacementRectangle y la segunda Popup se coloca debajo de .Canvas También, cada Canvas contiene un Rectangle que tiene los mismos límites que el PlacementRectangle para el primer Popup. Tenga en cuenta que PlacementRectangle no crea un elemento visible en la aplicación; el ejemplo crea un Rectangle para representar el 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 muestra el resultado del ejemplo anterior.

Origen del destino y punto de alineación de la ventana emergente

El área de destino y el punto de alineación del elemento emergente son puntos de referencia en el área objetivo y el elemento emergente, respectivamente, que se usan para posicionar. Puede usar las HorizontalOffset propiedades y VerticalOffset para desplazar el elemento emergente desde el área de destino. El HorizontalOffset y VerticalOffset son relativos al origen de destino y al punto de alineación de la ventana emergente. El valor de la propiedad Placement determina dónde se encuentran el origen de destino y el punto de alineación del popup.

En el ejemplo siguiente, se crea un Popup y se establecen las propiedades HorizontalOffset y VerticalOffset en 20. La Placement propiedad se establece en Bottom (valor predeterminado), por lo que el origen de destino es la esquina inferior izquierda del área de destino y el punto de alineación emergente es la esquina superior izquierda de 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 muestra el resultado del ejemplo anterior.

Cómo las propiedades funcionan juntas

Los valores de PlacementTarget, PlacementRectangle y Placement deben considerarse conjuntamente para determinar el área de destino correcta, el origen de destino y el punto de alineación del popup. Por ejemplo, si el valor de Placement es Mouse, no hay ningún objeto de destino, PlacementRectangle se omite y el área de destino es los límites del puntero del mouse. Por otro lado, si Placement es Bottom, el elemento padre o PlacementTarget determina el objeto de destino y PlacementRectangle determina el área de destino.

En la tabla siguiente se describe el objeto de destino, el área de destino, el origen de destino y el punto de alineación emergente, e indica si se utilizan PlacementTarget y PlacementRectangle para cada valor de enumeración de PlacementMode.

Las siguientes ilustraciones muestran el Popup, área de destino, origen de destino y punto de alineación emergente para cada valor de PlacementMode. En cada figura, el área objetivo es amarilla y el Popup es azul.

Cuando la ventana emergente alcanza el borde de la pantalla

Por motivos de seguridad, un Popup no se puede ocultar por el borde de una pantalla. Una de las tres cosas siguientes sucede cuando Popup encuentra un borde de pantalla:

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

• La ventana emergente utiliza un punto de alineación diferente.

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

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

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

Alineación con el borde de la pantalla

Un Popup puede alinearse con el borde de la pantalla reubicándose para que Popup sea totalmente visible en la pantalla. Cuando esto ocurre, la distancia entre el origen de destino y el punto de alineación emergente puede diferir de los valores de HorizontalOffset y VerticalOffset. Cuando Placement es Absolute, Center, o Relative, se Popup alinea a todos los bordes de la pantalla. Por ejemplo, supongamos que un Popup tiene Placement establecido en Relative y VerticalOffset establecido en 100. Si el borde inferior de la pantalla oculta todo o parte de , la Popup posición se coloca a lo largo del borde inferior de la pantalla y la distancia vertical entre el origen de destino y el punto de Popupalineación emergente es inferior a 100. En la ilustración siguiente se muestra esto.

Cambio del punto de alineación de la ventana emergente

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

En la ilustración siguiente se muestra que cuando el borde inferior de la pantalla oculta todo o parte de Popup, el punto de alineación emergente es la esquina inferior izquierda de Popup.

En la siguiente ilustración se muestra que cuando Popup está oculto por el borde derecho de la pantalla, el punto de alineación del popup es la esquina superior derecha de Popup.

Si Popup encuentra los bordes inferior y derecho de la pantalla, el punto de alineación del emergente es la esquina inferior derecha de Popup.

Cambiar el origen objetivo y el punto de alineación del popup

Cuando Placement es Bottom, Left, Mouse, Right, o Top, el origen de destino y el punto de alineación emergente cambian si se encuentra un borde de pantalla determinado. El borde de la pantalla que hace que la posición cambie depende del PlacementMode valor.

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

En la siguiente ilustración se muestra que, cuando Placement es Left y Popup encuentra el borde izquierdo de la pantalla, el origen de destino es la esquina superior derecha del área de destino y el punto de alineación del popup es la esquina superior izquierda de Popup.

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

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

En la ilustración siguiente se muestra que, cuando Placement es Mouse y Popup encuentra el borde inferior de la pantalla, el origen del destino es la esquina superior izquierda del área de destino (los bordes del puntero del ratón) y el punto de alineación del popup es la esquina inferior izquierda de Popup.

Personalización de la ubicación de elementos emergentes

Puede personalizar el origen de destino y el punto de alineación emergente estableciendo 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 porción más grande de Popup es seleccionado. La posición de Popup se ajusta automáticamente si Popup está oculta por el borde de la pantalla. Para obtener un ejemplo, vea Especificar una posición emergente personalizada.

Consulte también

• Ejemplo de ubicación de ventana emergente