emergente de control VerticalAlignment no "atrapar"

Question

estoy usando un control emergente, y por alguna razón su alineación vertical no funciona como espero. Este es el XAML que tengo:

<Grid Width="100" Height="30" > 
     <TextBox Text="Hello" /> 
     <Popup IsOpen="True" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" > 
      <Button Content="Hello" /> 
     </Popup> 
    </Grid> 

que esperaba que el ancho de la emergente sería 100px, lo mismo que de la rejilla de los padres. Sin embargo, el botón dentro de la ventana emergente se comporta como si se dejó su HorizontalAlignment, es decir, el ancho del botón es justo lo suficiente para permitir que la palabra "Hola" dentro de ella, y no puedo entender por qué, o cómo hacer que tenga el mismo ancho que la rejilla que contiene.

Gracias!

Answer 1

Desafortunadamente, un Popup no es parte del mismo árbol visual que el resto de los elementos en el XAML en el que está definido. Es literalmente una ventana nueva , aunque una ventana muy sencilla y suele ser pequeño.

Dicho de otra manera, el Popup en realidad no participar en el diseño de la ventana principal. Entonces, cambiar cosas como HorizontalAlignment no tiene ningún efecto porque esa propiedad controla cómo el diseño posiciona y dimensiona este elemento relativo a su elemento contenedor.

Este problema "elemento huérfanos" provoca un sin fin de problemas cuando se trata de un Popup. Sin embargo, hay herramientas y técnicas para abordar todos los problemas que se presentan como una ventana separada.

La primera sugerencia que puedo dar es que comprenda las propiedades de ubicación, PlacementTarget y Placement. Puede utilizar estas propiedades para posicionar el Popup. También puede usar la sintaxis de enlace de datos ElementName para tener en cuenta el tamaño.

Aquí es un ejemplo del uso de estas técnicas en su situación:

<Grid Name="grid" Width="100" Height="30" > 
    <TextBox Text="Hello" /> 
    <Popup IsOpen="True" 
      Placement="Bottom" 
      PlacementTarget="{Binding ElementName=grid}" 
      Width="{Binding ActualWidth, ElementName=grid}"> 
     <Button Content="Hello" /> 
    </Popup> 
</Grid>