Posición de un control Popup

 

Publicado: junio de 2016

Un emergente control muestra el contenido en una ventana independiente que flota sobre una aplicación. Puede especificar la posición de un emergente con respecto a un control, el mouse o la pantalla mediante el uso de la PlacementTarget, colocación, PlacementRectangle, HorizontalOffset, y VerticalOffset propiedades. Estas propiedades funcionan conjuntamente para proporcionar flexibilidad para especificar la posición de la emergente.

System_CAPS_ICON_note.jpg Nota

El información sobre herramientas y ContextMenu clases también definen estas cinco propiedades y se comportan de forma similar.

Entity with relative path '../Token/autoOutline_md.md' can not be found, for source topic '{"project_id":"3fedad16-eaf1-41a6-8f96-0c1949c68f32","entity_id":"fbf642e9-f670-4efd-a7af-a67468a1c8e1","entity_type":"Article","locale":"es-ES"}'.

La colocación de un emergente puede ser relativo a un UIElement o a toda la pantalla. En el ejemplo siguiente se crea cuatro emergente controles relativo a un UIElement: en este caso, una imagen. Todos los emergente controles tienen la PlacementTarget propiedad establecida en image1, pero cada emergente tiene un valor diferente para la propiedad de ubicació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>

La siguiente ilustración muestra la imagen y la emergente controles

Imagen con cuatro controles emergentes
Imagen con cuatro emergentes

Este sencillo ejemplo demuestra cómo establecer el PlacementTarget y colocación propiedades, pero utilizando la PlacementRectangle, HorizontalOffset, y VerticalOffset propiedades, tiene más control sobre la ubicación donde el emergente se coloca.

Los siguientes términos son útiles para entender cómo la PlacementTarget, colocación, PlacementRectangle, HorizontalOffset, y VerticalOffset propiedades se relacionan entre sí y la emergente:

  • Objeto de destino

  • Área de destino

  • Origen de destino

  • Punto de alineación del elemento emergente

Estos términos son una manera cómoda para hacer referencia a distintos aspectos de la emergente y el control que está asociado.

Objeto de destino

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

En el ejemplo siguiente se crea un emergente que es el elemento secundario de un lienzo. El ejemplo establece la PlacementTarget propiedad en el emergente. El valor predeterminado de colocación es PlacementMode.Bottom, por lo que la emergente aparece debajo de la lienzo.

      <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>

La siguiente ilustración muestra la emergente se coloca relativo a la lienzo.

Control emergente sin PlacementTarget
Elemento emergente sin PlacementTarget

En el ejemplo siguiente se crea un emergente que es el elemento secundario de un lienzo, pero esta vez el PlacementTarget está establecido en ellipse1, por lo que el elemento emergente aparece debajo de la elipse.

      <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>

La siguiente ilustración muestra la emergente se coloca relativo a la elipse.

Elemento emergente colocado en relación con una elipse
Popup con PlacementTarget

System_CAPS_ICON_note.jpg Nota

Para información sobre herramientas, el valor predeterminado de colocación es Mouse. Para ContextMenu, el valor predeterminado de colocación es MousePoint. Estos valores se explican más adelante, en "Cómo funcionan las propiedades juntos."

Área de destino

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

En el ejemplo siguiente se crean dos lienzo objetos, cada uno con un rectángulo y un emergente. En ambos casos, el destino del objeto para el emergente es el lienzo. El emergente en la primera lienzo tiene la PlacementRectangle establecido, con su X, Y, ancho, y alto se establecen en 50, 50, 50 y 100, respectivamente. El emergente en el segundo lienzo no tiene la PlacementRectangle establecido. Como resultado, la primera emergente está situado debajo de la PlacementRectangle y el segundo emergente está situado debajo de la lienzo. Cada lienzo también contiene un rectángulo que tiene los mismos límites que el PlacementRectangle para la primera emergente. Tenga en cuenta que el PlacementRectangle no crea un elemento visible en la aplicación; en el ejemplo se crea un rectángulo para representar la 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>

La ilustración siguiente muestra el resultado del ejemplo anterior.

Elemento emergente con y sin PlacementRectangle
Elemento emergente con y sin PlacementRectangle

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

El destino origen y punto de alineación emergente son puntos de referencia en el área de destino y un menú emergente, respectivamente, que se utilizan para colocar. Puede usar el HorizontalOffset y VerticalOffset propiedades para desplazar el elemento emergente desde el área de destino. El HorizontalOffset y VerticalOffset están en relación con el origen del destino y el punto de alineación del elemento emergente. El valor de la colocación propiedad determina donde se encuentra el punto de alineación de origen y los elementos emergentes de destino.

En el ejemplo siguiente se crea un emergente y establece la HorizontalOffset y VerticalOffset propiedades a 20. El colocación propiedad está establecida en inferior (valor predeterminado), por lo que el origen de destino es la esquina inferior izquierda del área de destino y el punto de alineación del elemento emergente es la esquina superior izquierda de la emergente.

      <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>

La ilustración siguiente muestra el resultado del ejemplo anterior.

Colocación de elemento emergente con punto de alineación de origen de destino
Elemento emergente con HorizontalOffset y VerticalOffset

Los valores de PlacementTarget, PlacementRectangle, y colocación tener en cuenta para calcular el área de destino correcto, origen del destino y punto de alineación del elemento emergente. Por ejemplo, si el valor de colocación es Mouse, no hay ningún objeto de destino, el PlacementRectangle se omite, y el área de destino corresponde a los límites del puntero del mouse. Por otro lado, si colocación es inferior, PlacementTarget o primario determina el objeto de destino y PlacementRectangle determina el área de destino.

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

PlacementModeObjeto de destinoÁrea de destinoOrigen de destinoPunto de alineación del elemento emergente
AbsolutaNo es aplicable. PlacementTarget se omite.La pantalla o PlacementRectangle si se establece. El PlacementRectangle es relativa a la pantalla.La esquina superior izquierda del área de destino.La esquina superior izquierda de la emergente.
AbsolutePointNo es aplicable. PlacementTarget se omite.La pantalla o PlacementRectangle si se establece. El PlacementRectangle es relativa a la pantalla.La esquina superior izquierda del área de destino.La esquina superior izquierda de la emergente.
Parte inferiorPlacementTarget o primario.El objeto de destino, o PlacementRectangle si se establece. El PlacementRectangle es relativa al objeto de destino.La esquina inferior izquierda del área de destino.La esquina superior izquierda de la emergente.
CentroPlacementTarget o primario.El objeto de destino, o PlacementRectangle si se establece. El PlacementRectangle es relativa al objeto de destino.El centro del área de destino.El centro de la emergente.
PersonalizadaPlacementTarget o primario.El objeto de destino, o PlacementRectangle si se establece. El PlacementRectangle es relativa al objeto de destino.Definido por el CustomPopupPlacementCallback.Definido por el CustomPopupPlacementCallback.
IzquierdaPlacementTarget o primario.El objeto de destino, o PlacementRectangle si se establece. El PlacementRectangle es relativa al objeto de destino.La esquina superior izquierda del área de destino.La esquina superior derecha de la emergente.
Mouse (ratón)No es aplicable. PlacementTarget se omite.Los límites del puntero del mouse. PlacementRectangle se omite.La esquina inferior izquierda del área de destino.La esquina superior izquierda de la emergente.
MousePointNo es aplicable. PlacementTarget se omite.Los límites del puntero del mouse. PlacementRectangle se omite.La esquina superior izquierda del área de destino.La esquina superior izquierda de la emergente.
RelativaPlacementTarget o primario.El objeto de destino, o PlacementRectangle si se establece. El PlacementRectangle es relativa al objeto de destino.La esquina superior izquierda del área de destino.La esquina superior izquierda de la emergente.
RelativePointPlacementTarget o primario.El objeto de destino, o PlacementRectangle si se establece. El PlacementRectangle es relativa al objeto de destino.La esquina superior izquierda del área de destino.La esquina superior izquierda de la emergente.
CorrectoPlacementTarget o primario.El objeto de destino, o PlacementRectangle si se establece. El PlacementRectangle es relativa al objeto de destino.La esquina superior derecha del área de destino.La esquina superior izquierda de la emergente.
ArribaPlacementTarget o primario.El objeto de destino, o PlacementRectangle si se establece. El PlacementRectangle es relativa al objeto de destino.La esquina superior izquierda del área de destino.La esquina inferior izquierda de la emergente.

Las ilustraciones siguientes se muestra la emergente, seleccione el área de destino, el origen del destino y la alineación del elemento emergente para cada PlacementMode valor. En cada figura, el área de destino es amarillo y la emergente es azul.

Elemento emergente con colocación Absolute o AbsolutePoint
La posición es Absolute o AbsolutePoint

Elemento emergente con colocación Bottom
La posición es inferior

Elemento emergente con colocación Center
Selección de ubicación es el centro

Elemento emergente con colocación Left
Placement es Left

Elemento emergente con colocación Mouse
Placement es Mouse

Elemento emergente con colocación MousePoint
Posición MousePoint

Elemento emergente con colocación Relative o RelativePoint
La posición es Relative o RelativePoint

Elemento emergente con colocación Right
Placement es Right

Elemento emergente con colocación Top
Placement es Top

Por motivos de seguridad, un emergente no puede estar oculto por el borde de una pantalla. Se produce una de estas tres cosas cuando el emergente se encuentra con un borde de la pantalla:

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

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

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

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

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

PlacementModeBorde superiorBorde inferiorBorde izquierdoBorde derecho
AbsolutaAlinea el borde superior.Alinea el borde inferior.Alinea el borde izquierdo.Alinea el borde derecho.
AbsolutePointAlinea el borde superior.El punto de alineación del elemento emergente cambia a la esquina inferior izquierda de la emergente.Alinea el borde izquierdo.El punto de alineación del elemento emergente cambia a la esquina superior derecha de la emergente.
Parte inferiorAlinea el 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 de la emergente.Alinea el borde izquierdo.Alinea el borde derecho.
CentroAlinea el borde superior.Alinea el borde inferior.Alinea el borde izquierdo.Alinea el borde derecho.
IzquierdaAlinea el borde superior.Alinea el 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 de la emergente.Alinea el borde derecho.
Mouse (ratón)Alinea el 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 de la emergente.Alinea el borde izquierdo.Alinea el borde derecho.
MousePointAlinea el borde superior.El punto de alineación del elemento emergente cambia a la esquina inferior izquierda de la emergente.Alinea el borde izquierdo.Punto de la alineación del elemento emergente cambia a la esquina superior derecha de la ventana emergente.
RelativaAlinea el borde superior.Alinea el borde inferior.Alinea el borde izquierdo.Alinea el borde derecho.
RelativePointAlinea el borde superior.El punto de alineación del elemento emergente cambia a la esquina inferior izquierda de la emergente.Alinea el borde izquierdo.Punto de la alineación del elemento emergente cambia a la esquina superior derecha de la ventana emergente.
CorrectoAlinea el borde superior.Alinea el borde inferior.Alinea el 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 de la emergente.
ArribaEl 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 de la emergente. De hecho, es el mismo que cuando colocación es inferior.Alinea el borde inferior.Alinea el borde izquierdo.Alinea el borde derecho.

Alinear con el borde de la pantalla

Un emergente puede alinear con el borde de la pantalla cambiándose de posición por lo que todo el emergente está visible en la pantalla. Cuando esto ocurre, la distancia entre el punto de alineación de origen y los elementos emergentes de destino puede diferir de los valores de HorizontalOffset y VerticalOffset. Cuando colocación es absoluta, Center, o relativa, emergente se alinea automáticamente a cada borde de la pantalla. Por ejemplo, supongamos que un emergente tiene colocación establecido en relativa y VerticalOffset establecido en 100. Si la parte inferior de la pantalla oculta todo o parte de la emergente, el emergente cambia de posición a lo largo de la parte inferior de la pantalla y la distancia vertical entre el origen del destino y el elemento emergente punto de alineación es menor que 100. La siguiente ilustración se muestra cómo hacerlo.

Elemento emergente que se alinea con el borde de la pantalla
Elemento emergente que se alinea con el borde de la pantalla

Cambiar el punto de alineación del elemento emergente

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

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

Nuevo punto de alineación debido al borde inferior de la pantalla
Elemento emergente encuentra con el borde inferior de la pantalla y cambia el punto de alineación del elemento emergente

La siguiente ilustración muestra que, cuando la emergente está oculto por el borde derecho de la pantalla, el punto de alineación del elemento emergente es la esquina superior derecha de la emergente.

Nuevo punto de alineación de elemento emergente debido al borde de la pantalla
Elemento emergente encuentra con el borde derecho de la pantalla y cambia el punto de alineación del elemento emergente

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

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

Cuando colocación es inferior, izquierda, Mouse, derecha, o arriba, cambio de punto de la alineación de origen y los elementos emergentes de destino si se encuentra un determinado de borde de la pantalla. El borde de la pantalla que provoca el cambio de posición depende del PlacementMode valor.

La siguiente ilustración muestra que cuando colocación es inferior y emergente encuentra el borde inferior de la pantalla, el origen del destino es la esquina superior izquierda del área de destino y el punto de alineación del elemento emergente es la esquina inferior izquierda de la emergente.

Nuevo punto de alineación debido al borde inferior de la pantalla
Posición es inferior y el elemento emergente encuentra con el borde inferior de la pantalla

La siguiente ilustración muestra que cuando colocación es izquierda y emergente encuentra con el borde izquierdo de la pantalla, el origen del destino es la esquina superior derecha del área de destino y el punto de alineación del elemento emergente es la esquina superior izquierda de la emergente.

Nuevo punto de alineación debido al borde izquierdo de la pantalla
Placement es Left y el elemento emergente encuentra con el borde izquierdo de la pantalla

La siguiente ilustración muestra que cuando colocación es derecha y emergente encuentra con el borde derecho de la pantalla, el origen del destino es la esquina superior izquierda del área de destino y el punto de alineación del elemento emergente es la esquina superior derecha de la emergente.

Nuevo punto de alineación debido al borde derecho de la pantalla
Placement es Right y el elemento emergente encuentra con el borde derecho de la pantalla

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

Nuevo punto de alineación debido al borde superior de la pantalla
Placement es Top y el elemento emergente encuentra con el borde superior de la pantalla

La siguiente ilustración muestra que cuando colocación es Mouse y emergente encuentra el borde inferior de la pantalla, el origen del destino es la esquina superior izquierda del área de destino (los límites del puntero del mouse) y el punto de alineación del elemento emergente es la esquina inferior izquierda de la emergente.

nuevo punto de alineación debido al ratón está cerca del borde de la pantalla
Placement es Mouse y el elemento emergente encuentra con el borde inferior de la pantalla

Personalización de colocación de elemento emergente

Puede personalizar el punto de alineación de origen y los elementos emergentes de destino estableciendo el colocación propiedad personalizado. A continuación, defina un CustomPopupPlacementCallback delegado que devuelve un conjunto de puntos de colocación posibles y ejes primarios (en orden de preferencia) para la emergente. El punto que muestra la mayor parte de la emergente está seleccionada. La posición de la emergente se ajusta automáticamente si la emergente está oculto por el borde de la pantalla. Para obtener un ejemplo, vea especifican la posición emergente personalizada.

Popup Placement Sample

Mostrar: