Popup Control VerticalAlignment non "cattura"

Question

Sto usando un controllo Popup e per qualche motivo il suo allineamento verticale non funziona come previsto. Questo è il XAML che ho:

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

mi aspettavo che la larghezza del popup sarebbe 100px, lo stesso che è Griglia genitore. Tuttavia, il pulsante all'interno del popup si comporta come se il suo HorizontalAlignment sia Left, cioè la larghezza del Button è sufficiente per consentire la parola "Hello" al suo interno, e non riesco a capire perché, o come farlo avere la stessa larghezza della griglia che la contiene.

Grazie!

Answer 1

Sfortunatamente, uno Popup non fa parte dello stesso albero visivo del resto degli elementi nello XAML in cui è definito. È letteralmente una nuova finestra, anche se una finestra molto semplice e tipicamente piccola.

In altre parole, lo Popup non partecipa realmente al layout della finestra principale. Quindi cambiare cose come HorizontalAlignment non ha alcun effetto perché quella proprietà controlla come il layout posiziona e dimensiona questo elemento rispetto al suo elemento contenitore.

Questo problema "elemento orfano" non causa problemi di fine quando si tratta di un Popup. Tuttavia, ci sono strumenti e tecniche per affrontare tutti i problemi che l'introduzione di una finestra separata.

Il primo suggerimento che posso dare è comprendere le proprietà di posizionamento, PlacementTarget e Placement. È possibile utilizzare queste proprietà per il posizionamento del Popup. È anche possibile utilizzare la sintassi ElementName di associazione dati per occuparsi del dimensionamento.

Ecco un esempio di utilizzo di queste tecniche per l'utente:

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