Lavora con noi

ASP.Net

Siti tematici

Lezioni:

...
<
18
19
20
>
...
Indice

StackPanel

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"
            Width="400" Height="300">

  <Button Content="Cliccami1" Height="50" Width="100" />
  <Button Content="Cliccami2" Height="50" Width="100" />
  <Button Content="Cliccami3" Height="50" Width="100" />
</StackPanel>

Figura 24. 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"
            Width="400" Height="300">
  <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