Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 19 di 59
  • livello principiante
Indice lezioni

StackPanel

Organizzare gli elementi incolonnandoli in "pile"
Organizzare gli elementi incolonnandoli in "pile"
Link copiato negli appunti

Lo StackPanel ha la peculiarità di ordinare, in maniera automatica, gli elementi figlio come una pila, in direzione verticale o orizzontale, a seconda del valore della proprietà Orientation. Vediamo un esempio di utilizzo dello StackPanel per posizionare, con orientamento predefinito, quindi verticale, tre controlli Button:

<StackPanel x:Name="LayoutRoot" Background="Azure"
             >

  <Button Content="Cliccami1"   />
  <Button Content="Cliccami2"   />
  <Button Content="Cliccami3"   />
</StackPanel>
Figura 24. Esempio di StackPanel
Esempio di StackPanel

Il risultato mostra i tre Button incolonnati verticalmente.

Margini

Notiamo anche che i controlli sono adiacenti l'uno con l'altro. In questo caso per distanziare gli elementi figlio si utilizza la proprietà Margin, applicata come attributo su questi ultimi. Questa proprietà, ereditata da FrameworkElement, quindi esposta da tutti i controlli, indica la distanza di un controllo figlio dal bordo del controllo padre.

Impostazioni per la proprietà Margin
Valore Descrizione
"10" Un unico valore, 10, che verrà utilizzato per tutti i lati del bordo
"20,5" Due valori, utilizzati per impostare coppie di bordi. Il primo valore, 20, imposta la distanza dal bordo sinistro e destro. Il secondo valore, 5, imposta la distanza dal bordo superiore e quello inferiore
"0,10,20,30" Quattro valori, per impostare rispettivamente la distanza dal bordo sinistro, superiore, destro ed inferiore

Allineamento

Altre proprietà importanti per la gestione del layout, sono: HorizontalAlignment, VerticalAlignment, HorizontalContentAlignment e VerticalContentAlignment, che indicano rispettivamente l'allineamento orizzontale e verticale per il controllo oppure per il contenuto del controllo. I possibili valori sono elencati nella seguente tabella.

Valore Descrizione
Left L'elemento viene allineato a sinistra
Right L'elemento viene allineato a destra
Top L'elemento viene allineato in alto
Bottom L'elemento viene allineato in basso
Center L'elemento viene allineato al centro
Stretch L'elemento viene allargato per riempire l'intero spazio disponibile

Vediamo un esempio:

<StackPanel x:Name="LayoutRoot" Background="Azure"
             >
  <Button Content="Left"    HorizontalAlignment="Left"    Margin="10" />
  <Button Content="Center"  HorizontalAlignment="Center"  Margin="10" />
  <Button Content="Right"   HorizontalAlignment="Right"   Margin="10" />
  <Button Content="Stretch" HorizontalAlignment="Stretch" Margin="10" />
</StackPanel>
Figura 25. Modifica dei margini e dell'allineamento
Modifica dei margini e dell'allineamento


Ti consigliamo anche