Xamarin.Forms Esercitazione su Griglia
Prima di provare questa esercitazione è necessario avere completato correttamente:
In questa esercitazione apprenderai a:
- Creare un Xamarin.Forms
Gridoggetto 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
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.
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'applicazione Xamarin.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
Labelin unoGrid. Per impostazione predefinita,Gridposiziona le relative visualizzazioni figlio in un'unica posizione. Pertanto, unGridche contiene più elementi figlio deve specificare colonne e righe, che verranno trattate nel prossimo esercizio. Inoltre la proprietàMarginindica la posizione di rendering diGridall'interno diContentPage.Nota
Oltre alla proprietà
Margin, anche la proprietàPaddingpuò essere impostata su unGrid. Il valore della proprietàPaddingspecifica la distanza tra i limiti del controlloGride 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.
Specificare colonne e righe
In MainPage.xaml modificare la dichiarazione
Gridper 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
Gride posiziona le istanze diLabelin colonne e righe specifiche. I dati delle colonne e delle righe sono archiviati nelle proprietàColumnDefinitionseRowDefinitions, che sono rispettivamente raccolte di oggettiColumnDefinitioneRowDefinition. La larghezza di ogniColumnDefinitionè impostata dalla proprietàColumnDefinition.Widthe l'altezza di ogniRowDefinitionè 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
LabelinGridviene specificata con le proprietà associateGrid.ColumneGrid.Rowtramite un indice in base zero. Pertanto, la prima colonna è la colonna 0 e la prima riga è la riga 0. Per il primo elementoLabelqueste 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
Gridpuò essere impostata con le proprietàColumnSpacingeRowSpacing. 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:
Estendere il contenuto su più colonne o righe
In MainPage.xaml, modificare la dichiarazione
Gridper 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
Gride posiziona le istanze diLabelin colonne e righe specifiche. Il primoLabelimposta la proprietà associataColumnSpanin 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 espandeLabel. Il secondoLabelimposta la proprietà associataRowSpanin 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 espandeLabel.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 .
Congratulazioni!
L'esercitazione è stata completata. Si è appreso come:
- Creare un Xamarin.Forms
Gridoggetto in XAML. - Specificare le colonne e le righe per l'elemento
Grid. - Estendere il contenuto su più colonne o righe in
Grid.
Passaggi successivi
Per altre informazioni sulle nozioni di base sulla creazione di applicazioni per dispositivi mobili con Xamarin.Forms, passare all'esercitazione CollectionView.
Collegamenti correlati
Hai un problema con questa sezione? In caso di problemi, fornisci feedback per contribuire al miglioramento della sezione.