Alessandro Del Sole's Blog

{ A programming space about Microsoft® .NET® }
posts - 1908, comments - 2047, trackbacks - 352

My Links

News

Your host

This is me! Questo spazio è dedicato a Microsoft® .NET®, di cui sono molto appassionato :-)

Cookie e Privacy

Disabilita cookie ShinyStat

Microsoft MVP

My MVP Profile

Microsoft Certified Professional

Microsoft Specialist

Xamarin Certified Mobile Developer

Il mio libro su VB 2015!

Pre-ordina il mio libro su VB 2015 Pre-ordina il mio libro "Visual Basic 2015 Unleashed". Clicca sulla copertina per informazioni!

Il mio libro su WPF 4.5.1!

Clicca sulla copertina per informazioni! E' uscito il mio libro "Programmare con WPF 4.5.1". Clicca sulla copertina per informazioni!

These postings are provided 'AS IS' for entertainment purposes only with absolutely no warranty expressed or implied and confer no rights.
If you're not an Italian user, please visit my English blog

Le vostre visite

I'm a VB!

Guarda la mia intervista a Seattle

Follow me on Twitter!

Altri spazi

GitHub
I miei progetti open-source su GitHub

Article Categories

Archives

Post Categories

Image Galleries

Privacy Policy

WPF: Suddividere il contenitore Grid come una tabella

Il contenitore di controlli Grid di WPF può essere suddiviso utilizzando righe e colonne, a mò di tabella. E' possibile suddividerlo solo in righe, solo in colonne oppure creare intersezioni di righe e colonne definendo delle celle, proprio come in una tabella.

In questo post vediamo codice XAML un po' più smaliziato. Eccolo:

    <Grid>
      <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
      </Grid.ColumnDefinitions>

      <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
      </Grid.RowDefinitions>

      <Label Grid.Column="0" Grid.Row="0" VerticalAlignment="Center" 
             HorizontalAlignment="Center">Label nella prima cella</Label>

      <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center"
                  Grid.Column="1" Grid.Row="0">
        <Button Margin="10,10,10,10">Primo pulsante</Button>
        <Button Margin="10,10,10,10">Secondo pulsante</Button>
      </StackPanel>

      <TextBox Grid.Row="1" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center"
               TextWrapping="WrapWithOverflow" 
               Margin="10,10,10,10">Casella di testo nella terza cella</TextBox>

      <Ellipse Grid.Column="1" Grid.Row="1" Width="100" Height="100">
        <Ellipse.Fill>
          <SolidColorBrush Color="Red"/>
        </Ellipse.Fill>
      </Ellipse>
    </Grid>

Come potete osservare, vengono definite due colonne. L'elemento Grid.ColumnDefinitions contiene tanti elementi ColumnDefinition tante quante sono le colonne che si desidera inserire. In maniera identica vengono aggiunte due righe, utilizzando un elemento Grid.RowDefinitions che contiene elementi RowDefinition. In questo modo, abbiamo praticamente creato quattro celle.

I controlli, poi, possono essere posizionati nelle celle specificando un attributo Grid.Row e uno Grid.Column. La numerazione delle righe e delle colonne da assegnare agli attributi parte sempre da zero (in questo caso, sia le due righe che le due colonne saranno contrassegnate da 0 e 1).

Per capirlo, basta osservare la dichiarazione del controllo Label, che viene posizionata al centro della prima cella (0,0) utilizzando gli attributi di allineamento HorizontalAlignment e VerticalAlignment.

Il secondo controllo aggiunto è uno StackPanel, che contiene due pulsanti. Questo ci serve per capire come inserire più controlli in una cella. Anche per lo StackPanel è stata specificata la posizione nella Grid mediante gli attributi Grid.Row e GridColumn (0 e 1).

Analogo discorso vale per la successiva casella di testo, per la quale abbiamo stabilito che il testo deve essere mandato a capo se non viene mostrato per intero alle dimensioni originarie del controllo (TextWrapping="WrapWithOverflow").

L'ultimo elemento è un'ellisse. La si posiziona nella stessa modalità vista finora (riga 1, colonna 1). Per disegnarne una, occorre solo specificare la larghezza e l'altezza. E' stato poi specificato un colore di riempimento a tinta unita nell'elemento Ellipse.Fill.

Il risultato a video (questa volta all'interno del designer di Visual Studio è il seguente):

Come potete vedere, il designer ci mostra la suddivisione della griglia in quattro celle, consentendoci, inoltre, di vedere la posizione dell'altro contenitore, lo StackPanel contenente i pulsanti.

Conoscere meglio il contenitore Grid può essere molto utile, quindi spero che questo post vi sia stato utile.

Alessandro

Print | posted on martedì 16 ottobre 2007 21:28 | Filed Under [ Windows Presentation Foundation ]

Powered by:
Powered By Subtext Powered By ASP.NET