Exportar (0) Imprimir
Expandir todo
Este artículo proviene de un motor de traducción automática. Mueva el puntero sobre las frases del artículo para ver el texto original. Más información.
Traducción
Original
Este tema aún no ha recibido ninguna valoración - Valorar este tema

Posición de un control Popup

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

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

Imagen con cuatro controles 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.

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.

Bb613596.collapse_all(es-es,VS.110).gifObjeto 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

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

Elemento emergente colocado en relación con una elipse
Nota 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".

Bb613596.collapse_all(es-es,VS.110).gifÁ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

Elemento emergente con y sin PlacementRectangle

Bb613596.collapse_all(es-es,VS.110).gifOrigen 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 establecen las propiedades HorizontalOffset y VerticalOffset en 20. La propiedad Placement se establece en Bottom (el valor predeterminado) para que el origen del destino sea la esquina inferior izquierda del área de destino y el punto de alineación del elemento emergente sea a 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

Colocación de elemento emergente con punto de alineación de origen de destino

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 es 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 es 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 es aplicable Se omite PlacementTarget.

Los límites del puntero del mouse. Se omite PlacementRectangle.

Esquina inferior izquierda del área de destino.

Esquina superior izquierda de Popup.

MousePoint

No es aplicable Se omite PlacementTarget.

Los 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

Elemento emergente con colocación Absolute o AbsolutePoint
Posición inferior

Elemento emergente con colocación Bottom
Posición central

Elemento emergente con colocación Center
Posición izquierda

Elemento emergente con colocación Left
Posición Mouse

Elemento emergente con colocación Mouse
Posición MousePoint

Elemento emergente con colocación MousePoint
Posición Relative o RelativePoint

Elemento emergente con colocación Relative o RelativePoint
Posición derecha

Elemento emergente con colocación Right
Posición superior

Elemento emergente con colocación Top

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.

Bb613596.collapse_all(es-es,VS.110).gifAlinear 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 Popup tiene su propiedad Placement establecida en Relative y su propiedad VerticalOffset establecida en 100. Si el borde inferior de la pantalla oculta la totalidad o parte del control Popup, 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

Elemento emergente que se alinea con el borde de la pantalla

Bb613596.collapse_all(es-es,VS.110).gifCambiar 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

Nuevo punto de alineación debido al borde inferior de la pantalla

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

Nuevo punto de alineación de elemento emergente debido al borde de la pantalla

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.

Bb613596.collapse_all(es-es,VS.110).gifCambiar 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

Nuevo punto de alineación debido al 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

Nuevo punto de alineación debido al 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

Nuevo punto de alineación debido al 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

Nuevo punto de alineación debido al 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

Nuevo punto de alineación debido a la proximidad del mouse con el borde de la pantalla

Bb613596.collapse_all(es-es,VS.110).gifPersonalizar 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.

¿Te ha resultado útil?
(Caracteres restantes: 1500)
Gracias por sus comentarios

Adiciones de comunidad

AGREGAR
Mostrar:
© 2014 Microsoft. Reservados todos los derechos.