Procedura: aggiungere righe e colonne a una griglia

Articolo
08/11/2011

Il controllo WPF (Windows Presentation Foundation) Grid consente di posizionare e allineare rapidamente i controlli creando layout basati su griglia. In fase di progettazione è possibile aggiungere righe e colonne a un controllo Grid in WPF Designer. Per impostazione predefinita, per le nuove righe e colonne si utilizza il ridimensionamento Star.

Importante
Se le dimensioni di righe e colonne vengono impostate su Auto prima di aggiungervi contenuto, non è possibile visualizzarle nella finestra di progettazione. Per questo motivo può risultare difficile posizionare i controlli nella riga o nella colonna corretta. Per evitare tale comportamento, è possibile utilizzare il ridimensionamento proporzionale durante la progettazione e impostare il valore su Auto al termine.

Se le dimensioni di righe e colonne vengono impostate su Auto prima di aggiungervi contenuto, non è possibile visualizzarle nella finestra di progettazione. Per questo motivo può risultare difficile posizionare i controlli nella riga o nella colonna corretta. Per evitare tale comportamento, è possibile utilizzare il ridimensionamento proporzionale durante la progettazione e impostare il valore su Auto al termine.

In questo argomento vengono descritte tre modalità in cui è possibile aggiungere righe e colonne a un controllo Grid. È inoltre possibile rimuovere righe e colonne da una griglia. Per ulteriori informazioni, vedere Procedura: rimuovere righe e colonne da una griglia.

Utilizzo della finestra di progettazione

In WPF Designer, quando si seleziona un controllo Grid, nella parte superiore e sul lato sinistro vengono visualizzate delle sbarre. È possibile utilizzarle per aggiungere righe e colonne direttamente nel controllo Grid. La visualizzazione XAML viene aggiornata automaticamente con le nuove righe e colonne.

Nota

Se la proprietà FlowDirection è impostata su RightToLeft, la sbarra relativa alle righe viene visualizzata a destra di Grid.

Per aggiungere righe a una griglia utilizzando la finestra di progettazione

In WPF Designer, selezionare un controllo Grid.
Spostare il puntatore sul bordo esterno della sbarra laterale. Il puntatore assume la forma di un mirino e viene visualizzata una linea della griglia indicante il punto in cui verrà aggiunta la riga.
Fare clic sulla sbarra per impostare la riga.

La linea della griglia viene posizionata e all'estremità viene visualizzato un indicatore nella sbarra.

Suggerimento

È possibile regolare le dimensioni della riga trascinando la linea nella griglia o l'indicatore nella sbarra.
(Facoltativo) Ripetere i passaggi 2 e 3 per aggiungere più righe.

Suggerimento
È possibile regolare le dimensioni della riga trascinando la linea nella griglia o l'indicatore nella sbarra.

Per aggiungere colonne a una griglia utilizzando la finestra di progettazione

In WPF Designer selezionare un controllo Grid.
Spostare il puntatore sul bordo superiore della sbarra superiore. Il puntatore assume la forma di un mirino e viene visualizzata una linea della griglia indicante il punto in cui verrà aggiunta la colonna.
Fare clic sulla sbarra per impostare la colonna.

La linea della griglia viene posizionata e all'estremità viene visualizzato un indicatore nella sbarra.

Suggerimento

È possibile regolare le dimensioni della colonna trascinando la linea nella griglia o l'indicatore nella sbarra.
(Facoltativo) Ripetere i passaggi 2 e 3 per aggiungere più colonne.

Suggerimento
È possibile regolare le dimensioni della colonna trascinando la linea nella griglia o l'indicatore nella sbarra.

Utilizzo dell'editor dell'insieme

È anche possibile aggiungere righe e colonne a un controllo Grid utilizzando l'editor dell'insieme. Quando si utilizza l'editor dell'insieme per configurare righe e colonne, la visualizzazione Progettazione e la visualizzazione XAML vengono aggiornate automaticamente.

Per aggiungere righe a una griglia utilizzando l'editor dell'insieme

In WPF Designer selezionare un controllo Grid.
Nella finestra Proprietà individuare la proprietà RowDefinitions e fare clic sul pulsante con i puntini di sospensione nella colonna del valore della proprietà.

Verrà visualizzata la finestra di dialogo Editor dell'insieme.
Fare clic su Aggiungi per aggiungere una nuova riga.
(Facoltativo) Impostare le proprietà della riga.
(Facoltativo) Ripetere i passaggi 3 e 4 per aggiungere più righe.
Scegliere OK per chiudere l'Editor dell'insieme e tornare a WPF Designer.

Per aggiungere colonne a una griglia utilizzando l'editor dell'insieme

In WPF Designer selezionare un controllo Grid.
Nella finestra Proprietà, individuare la proprietà ColumnDefinitions e fare clic sul pulsante con i puntini di sospensione nella colonna del valore della proprietà.

Verrà visualizzata la finestra di dialogo Editor dell'insieme.
Fare clic su Aggiungi per aggiungere una nuova colonna.
(Facoltativo) Impostare le proprietà della colonna.
(Facoltativo) Ripetere i passaggi 3 e 4 per aggiungere più colonne.
Scegliere OK per chiudere l'Editor dell'insieme e tornare a WPF Designer.

Utilizzo dell'editor XAML

È anche possibile aggiungere manualmente righe e colonne a un controllo Grid utilizzando l'editor XAML. La visualizzazione Progettazione viene aggiornata automaticamente con le nuove righe e colonne.

Per aggiungere righe a una griglia utilizzando l'editor XAML

Nell'editor XAML individuare un elemento Grid.
Aggiungere un elemento Grid.RowDefinitions come figlio dell'elemento Grid. Il codice dovrebbe essere analogo al seguente:
```
<Grid>
    <Grid.RowDefinitions>
    </Grid.RowDefinitions>
</Grid>
```

Aggiungere elementi RowDefinition. Nel markup seguente viene illustrato un esempio:

<Grid.RowDefinitions>
    <RowDefinition Height="100" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
    <RowDefinition Height="5*" />
</Grid.RowDefinitions>

Per aggiungere colonne a una griglia utilizzando l'editor XAML

Nell'editor XAML individuare un elemento Grid.
Aggiungere un elemento Grid.ColumnDefinitions come figlio dell'elemento Grid. Il codice dovrebbe essere analogo al seguente:
```
<Grid>
    <Grid.ColumnDefinitions>
    </Grid.ColumnDefinitions>
</Grid>
```

Aggiungere elementi ColumnDefinition. Nel markup seguente viene illustrato un esempio:

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="100" />
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="5*" />
</Grid.ColumnDefinitions>

Vedere anche

Condividi tramite