Xamarin.Forms Esercitazione su Griglia

Articolo
Developer (Principiante)
9 minuti per il completamento

Prima di provare questa esercitazione è necessario avere completato correttamente:

Creare la prima Xamarin.Forms guida introduttiva all'app .

In questa esercitazione apprenderai a:

Creare un Xamarin.FormsGrid oggetto in XAML.
Specificare le colonne e le righe per l'elemento Grid.
Estendere il contenuto su più colonne o righe in Grid.

Si userà Visual Studio 2019 o Visual Studio per Mac per creare un'applicazione semplice che dimostri come creare il layout dei controlli in un oggetto Grid. Gli screenshot seguenti illustrano l'applicazione finale:

Userai anche Ricaricamento rapido XAML per Xamarin.Forms visualizzare le modifiche dell'interfaccia utente senza ricompilare l'applicazione.

Creare una griglia

8 minuti rimanenti

Un Grid è un layout che organizza gli elementi figlio in righe e colonne, che possono avere dimensioni proporzionali o assolute. Per impostazione predefinita, un elemento Grid contiene una riga e una colonna.

Visual Studio
Visual Studio per Mac

Per completare questa esercitazione è necessario Visual Studio 2019 (la versione più recente) con installato il carico di lavoro Sviluppo di applicazioni per dispositivi mobili con .NET. È inoltre necessario un Mac associato per compilare l'applicazione dell'esercitazione per iOS. Per informazioni sull'installazione della piattaforma Xamarin, vedere Installazione di Xamarin. Per informazioni sulla connessione di Visual Studio 2019 a un host di compilazione Mac, vedere Associa a Mac per lo sviluppo di Xamarin.iOS.

Avviare Visual Studio e creare una nuova app vuota Xamarin.Forms denominata GridTutorial.

Importante

I frammenti di codice C# e XAML in questa esercitazione richiedono che la soluzione sia denominata GridTutorial. Se si usa un nome diverso, si verificheranno errori di compilazione quando si copia il codice da questa esercitazione alla soluzione.

Per altre informazioni sulla libreria .NET Standard che viene creata, vedere Anatomia di un'applicazioneXamarin.Forms nell'approfondimento della Xamarin.Forms guida introduttiva.
Fare doppio clic su MainPage.xaml nel progetto GridTutorial in Esplora soluzioni per aprire il file. In MainPage.xaml rimuovere tutto il codice del modello e sostituirlo con il codice seguente:
```
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="GridTutorial.MainPage">
    <Grid Margin="20,35,20,20">
        <Label Text="The Grid has its Margin property set, to control the rendering position of the Grid." />
    </Grid>
</ContentPage>
```
Questo codice definisce in modo dichiarativo l'interfaccia utente per la pagina costituita da un Label in uno Grid. Per impostazione predefinita, Grid posiziona le relative visualizzazioni figlio in un'unica posizione. Pertanto, un Grid che contiene più elementi figlio deve specificare colonne e righe, che verranno trattate nel prossimo esercizio. Inoltre la proprietà Margin indica la posizione di rendering di Grid all'interno di ContentPage.

Nota

Oltre alla proprietà Margin, anche la proprietà Padding può essere impostata su un Grid. Il valore della proprietà Padding specifica la distanza tra i limiti del controllo Grid e i relativi elementi figlio. Per altre informazioni, vedere l'articolo sulle proprietà Margin e Padding.
Nella barra degli strumenti di Visual Studio premere il pulsante Avvia, ovvero il pulsante a forma di triangolo simile a un pulsante di riproduzione, per avviare l'applicazione all'interno del simulatore remoto iOS o dell'emulatore Android prescelto:

Per altre informazioni su Grid, vedere Xamarin.Forms Grid.

Per completare questa esercitazione è necessario Visual Studio per Mac, la versione più recente, con installato il supporto della piattaforma Android e iOS. Sarà necessario anche Xcode, la versione più recente. Per altre informazioni sull'installazione della piattaforma Xamarin, vedere Installazione di Xamarin.

Avviare Visual Studio per Mac e creare una nuova app vuota Xamarin.Forms denominata GridTutorial.

Importante

I frammenti di codice C# e XAML in questa esercitazione richiedono che la soluzione sia denominata GridTutorial. Se si usa un nome diverso, si verificheranno errori di compilazione quando si copia il codice da questa esercitazione alla soluzione.

Per altre informazioni sulla libreria .NET Standard che viene creata, vedere Anatomia di un'applicazioneXamarin.Forms nell'approfondimento della Xamarin.Forms guida introduttiva.
Fare doppio clic su MainPage.xaml nel progetto GridTutorial nel riquadro della soluzione per aprire il file. In MainPage.xaml rimuovere tutto il codice del modello e sostituirlo con il codice seguente:
```
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="GridTutorial.MainPage">
    <Grid Margin="20,35,20,20">
        <Label Text="The Grid has its Margin property set, to control the rendering position of the Grid." />
    </Grid>
</ContentPage>
```
Questo codice definisce in modo dichiarativo l'interfaccia utente per la pagina costituita da un Label in uno Grid. Per impostazione predefinita, Grid posiziona le relative visualizzazioni figlio in un'unica posizione. Pertanto, un Grid che contiene più elementi figlio deve specificare colonne e righe, che verranno trattate nel prossimo esercizio. Inoltre la proprietà Margin indica la posizione di rendering di Grid all'interno di ContentPage.

Nota

Oltre alla proprietà Margin, anche la proprietà Padding può essere impostata su un Grid. Il valore della proprietà Padding specifica la distanza tra le visualizzazioni in Grid. Per altre informazioni, vedere l'articolo sulle proprietà Margin e Padding.
Nella barra degli strumenti di Visual Studio per Mac premere il pulsante Avvia, ovvero il pulsante a forma di triangolo simile a un pulsante di riproduzione, per avviare l'applicazione all'interno del simulatore iOS o dell'emulatore Android prescelto:

Per altre informazioni su Grid, vedere Xamarin.Forms Grid.

Specificare colonne e righe

6 minuti rimanenti

Visual Studio
Visual Studio per Mac

In MainPage.xaml modificare la dichiarazione Grid per definire le colonne e le righe, quindi posizionare il contenuto nelle colonne e nelle righe:
```
<Grid Margin="20,35,20,20">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.5*" />
        <ColumnDefinition Width="0.5*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="50" />
    </Grid.RowDefinitions>
    <Label Text="Column 0, Row 0" />
    <Label Grid.Column="1"
           Text="Column 1, Row 0" />
    <Label Grid.Row="1"
           Text="Column 0, Row 1" />
    <Label Grid.Column="1"
           Grid.Row="1"
           Text="Column 1, Row 1" />
</Grid>
```
Questo codice definisce le colonne e le righe per Grid e posiziona le istanze di Label in colonne e righe specifiche. I dati delle colonne e delle righe sono archiviati nelle proprietà ColumnDefinitions e RowDefinitions, che sono rispettivamente raccolte di oggetti ColumnDefinition e RowDefinition. La larghezza di ogni ColumnDefinition è impostata dalla proprietà ColumnDefinition.Width e l'altezza di ogni RowDefinition è impostata dalla proprietà RowDefinition.Height. I valori di larghezza e altezza validi sono:
- Auto, che consente di adattare le dimensioni di colonna o riga al contenuto.
- Valori proporzionali, che consentono di ridimensionare le colonne e le righe in proporzione allo spazio rimanente. I valori proporzionali sono indicati dalla terminazione *.
- Valori assoluti, che consentono di ridimensionare le colonne o le righe con valori fissi specifici.
Nel codice precedente, pertanto, ogni colonna ha una larghezza pari a metà di Grid, mentre ogni riga ha un'altezza pari a 50 unità indipendenti dal dispositivo.

La posizione di ogni Label in Grid viene specificata con le proprietà associate Grid.Column e Grid.Row tramite un indice in base zero. Pertanto, la prima colonna è la colonna 0 e la prima riga è la riga 0. Per il primo elemento Label queste proprietà associate non sono disponibili, perché il rendering di qualsiasi visualizzazione figlio che non le imposta verrà eseguito automaticamente nella colonna 0, riga 0.

Nota

La spaziatura tra le colonne e le righe in un elemento Grid può essere impostata con le proprietà ColumnSpacing e RowSpacing. Per altre informazioni, vedere Spaziatura nella guida alla Xamarin.Forms griglia .
Se l'applicazione è ancora in esecuzione, salvare le modifiche apportate al file e l'interfaccia utente dell'applicazione verrà aggiornata automaticamente nel simulatore o nell'emulatore. In caso contrario, sulla barra degli strumenti di Visual Studio premere il pulsante Avvia, ovvero il pulsante a forma di triangolo simile a un pulsante di riproduzione, per avviare l'applicazione all'interno del simulatore iOS remoto o dell'emulatore Android prescelto:

In MainPage.xaml modificare la dichiarazione Grid per definire le colonne e le righe, quindi posizionare il contenuto nelle colonne e nelle righe:
```
<Grid Margin="20,35,20,20">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.5*" />
        <ColumnDefinition Width="0.5*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="50" />
    </Grid.RowDefinitions>
    <Label Text="Column 0, Row 0" />
    <Label Grid.Column="1"
           Text="Column 1, Row 0" />
    <Label Grid.Row="1"
           Text="Column 0, Row 1" />
    <Label Grid.Column="1"
           Grid.Row="1"
           Text="Column 1, Row 1" />
</Grid>
```
Questo codice definisce le colonne e le righe per Grid e posiziona le istanze di Label in colonne e righe specifiche. I dati delle colonne e delle righe sono archiviati nelle proprietà ColumnDefinitions e RowDefinitions, che sono rispettivamente raccolte di oggetti ColumnDefinition e RowDefinition. La larghezza di ogni ColumnDefinition è impostata dalla proprietà ColumnDefinition.Width e l'altezza di ogni RowDefinition è impostata dalla proprietà RowDefinition.Height. I valori di larghezza e altezza validi sono:
- Auto, che consente di adattare le dimensioni di colonna o riga al contenuto.
- Valori proporzionali, che consentono di ridimensionare le colonne e le righe in proporzione allo spazio rimanente. I valori proporzionali sono indicati dalla terminazione *.
- Valori assoluti, che consentono di ridimensionare le colonne o le righe con valori fissi specifici.
Nel codice precedente, pertanto, ogni colonna ha una larghezza pari a metà di Grid, mentre ogni riga ha un'altezza pari a 50 unità indipendenti dal dispositivo.

La posizione di ogni Label in Grid viene specificata con le proprietà associate Grid.Column e Grid.Row tramite un indice in base zero. Pertanto, la prima colonna è la colonna 0 e la prima riga è la riga 0. Per il primo elemento Label queste proprietà associate non sono disponibili, perché il rendering di qualsiasi visualizzazione figlio che non le imposta verrà eseguito automaticamente nella colonna 0, riga 0.

Nota

La spaziatura tra le colonne e le righe in un elemento Grid può essere impostata con le proprietà ColumnSpacing e RowSpacing. Per altre informazioni, vedere Spaziatura nella guida alla Xamarin.Forms griglia .
Se l'applicazione è ancora in esecuzione, salvare le modifiche apportate al file e l'interfaccia utente dell'applicazione verrà aggiornata automaticamente nel simulatore o nell'emulatore. In caso contrario, sulla barra degli strumenti di Visual Studio per Mac premere il pulsante Avvia, ovvero il pulsante a forma di triangolo simile a un pulsante di riproduzione, per avviare l'applicazione all'interno del simulatore iOS o dell'emulatore Android prescelto:

Estendere il contenuto su più colonne o righe

2 minuti rimanenti

Visual Studio
Visual Studio per Mac

In MainPage.xaml, modificare la dichiarazione Grid per definire colonne e righe e posizionare il contenuto che si estende su colonne e righe:
```
<Grid Margin="20,35,20,20">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.5*" />
        <ColumnDefinition Width="0.5*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="30" />
        <RowDefinition Height="30" />
    </Grid.RowDefinitions>
    <Label Grid.ColumnSpan="2"
           Text="This text uses the ColumnSpan property to span both columns." />
    <Label Grid.Row="1"
           Grid.RowSpan="2"
           Text="This text uses the RowSpan property to span two rows." />
</Grid>
```
Questo codice definisce le colonne e le righe per Grid e posiziona le istanze di Label in colonne e righe specifiche. Il primo Label imposta la proprietà associata ColumnSpan in modo che il relativo testo si estenda su più colonne. La proprietà ColumnSpan è impostata su 2, il che rappresenta il numero di colonne su cui si espande Label. Il secondo Label imposta la proprietà associata RowSpan in modo che il relativo testo si estenda su più righe. La proprietà RowSpan è impostata su 2, il che rappresenta il numero di righe su cui si espande Label.
Se l'applicazione è ancora in esecuzione, salvare le modifiche apportate al file e l'interfaccia utente dell'applicazione verrà aggiornata automaticamente nel simulatore o nell'emulatore. In caso contrario, sulla barra degli strumenti di Visual Studio premere il pulsante Avvia, ovvero il pulsante a forma di triangolo simile a un pulsante di riproduzione, per avviare l'applicazione all'interno del simulatore remoto iOS o dell'emulatore Android prescelto:

In Visual Studio arrestare l'applicazione.

Per altre informazioni sull'estensione di colonne e righe, vedere Righe e colonne nella Xamarin.Forms guida Griglia .

In MainPage.xaml, modificare la dichiarazione Grid per definire colonne e righe e posizionare il contenuto che si estende su colonne e righe:
```
<Grid Margin="20,35,20,20">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.5*" />
        <ColumnDefinition Width="0.5*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="30" />
        <RowDefinition Height="30" />
    </Grid.RowDefinitions>
    <Label Grid.ColumnSpan="2"
           Text="This text uses the ColumnSpan property to span both columns." />
    <Label Grid.Row="1"
           Grid.RowSpan="2"
           Text="This text uses the RowSpan property to span two rows." />
</Grid>
```
Questo codice definisce le colonne e le righe per Grid e posiziona le istanze di Label in colonne e righe specifiche. Il primo Label imposta la proprietà associata ColumnSpan in modo che il relativo testo si estenda su più colonne. La proprietà ColumnSpan è impostata su 2, il che rappresenta il numero di colonne su cui si espande Label. Il secondo Label imposta la proprietà associata RowSpan in modo che il relativo testo si estenda su più righe. La proprietà RowSpan è impostata su 2, il che rappresenta il numero di righe su cui si espande Label.
Se l'applicazione è ancora in esecuzione, salvare le modifiche apportate al file e l'interfaccia utente dell'applicazione verrà aggiornata automaticamente nel simulatore o nell'emulatore. In caso contrario, sulla barra degli strumenti di Visual Studio per Mac premere il pulsante Avvia, ovvero il pulsante a forma di triangolo simile a un pulsante di riproduzione, per avviare l'applicazione all'interno del simulatore iOS o dell'emulatore Android prescelto:

In Visual Studio per Mac arrestare l'applicazione.

Per altre informazioni sull'estensione di colonne e righe, vedere Righe e colonne nella Xamarin.Forms guida Griglia .

Xamarin.Forms Esercitazione su Griglia

Creare una griglia

Specificare colonne e righe

Estendere il contenuto su più colonne o righe

Congratulazioni!

Passaggi successivi

Xamarin.Forms Esercitazione su Griglia

Creare una griglia

Specificare colonne e righe

Estendere il contenuto su più colonne o righe

Congratulazioni!

Passaggi successivi

Collegamenti correlati