Xamarin.Forms Esercitazione su StackLayout
Prima di provare questa esercitazione è necessario avere completato correttamente:
In questa esercitazione apprenderai a:
- Creare un Xamarin.Forms
StackLayoutoggetto in XAML. - Specificare l'orientamento dell'elemento
StackLayout. - Controllare l'allineamento e l'espansione della vista figlio all'interno dell'elemento
StackLayout.
Si userà Visual Studio 2019 o Visual Studio per Mac per creare un'applicazione semplice che dimostri come allineare i controlli in un oggetto StackLayout. 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 un elemento StackLayout
Un StackLayout è un layout che organizza gli elementi figlio in uno stack unidimensionale, orizzontalmente o verticalmente. Per impostazione predefinita, un elemento StackLayout è orientato verticalmente.
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 StackLayoutTutorial.
Importante
I frammenti di codice C# e XAML di questa esercitazione richiedono che la soluzione sia denominata StackLayoutTutorial. 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.
In Esplora soluzioni, nel progetto StackLayoutTutorial, fare doppio clic su MainPage.xaml 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="StackLayoutTutorial.MainPage"> <StackLayout Margin="20,35,20,25"> <Label Text="The StackLayout has its Margin property set, to control the rendering position of the StackLayout." /> <Label Text="The Padding property can be set to specify the distance between the StackLayout and its children." /> <Label Text="The Spacing property can be set to specify the distance between views in the StackLayout." /> </StackLayout> </ContentPage>Questo codice definisce in modo dichiarativo l'interfaccia utente per la pagina costituita da tre istanze
Labelin un elementoStackLayout. L'elementoStackLayoutposiziona le relative viste figlio, ovvero le istanzeLabel, in una singola riga, che è orientata in verticale per impostazione predefinita. Inoltre la proprietàMarginindica la posizione di rendering diStackLayoutall'interno diContentPage.Nota
Oltre alla proprietà
Margin, anche le proprietàPaddingeSpacingpossono essere impostate su unStackLayout. Il valore della proprietàPaddingspecifica la distanza tra le viste nell'elementoStackLayoute il valore della proprietàSpacingspecifica la quantità di spazio tra i singoli elementi figlio inStackLayout. 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 iOS remoto o dell'emulatore Android prescelto:
Per altre informazioni su
StackLayout, vedere Xamarin.Forms StackLayout.
Specificare l'orientamento
In MainPage.xaml modificare la dichiarazione
StackLayoutper allineare gli elementi figlio orizzontalmente anziché verticalmente:<StackLayout Margin="20,35,20,25" Orientation="Horizontal"> <Label Text="The StackLayout has its Margin property set, to control the rendering position of the StackLayout." /> <Label Text="The Padding property can be set to specify the distance between the StackLayout and its children." /> <Label Text="The Spacing property can be set to specify the distance between views in the StackLayout." /> </StackLayout>Questo codice imposta la proprietà
OrientationsuHorizontal.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:
Si noti che le istanze di
Labelall'interno diStackLayoutsono ora allineate orizzontalmente anziché verticalmente.
Controllare l'allineamento e l'espansione
Le dimensioni e la posizione delle viste figlio all'interno di un StackLayout dipendono dai valori delle proprietà e WidthRequest delle visualizzazioni HeightRequest figlio e dai valori delle HorizontalOptions proprietà e VerticalOptions .
Le proprietà HorizontalOptions e VerticalOptions possono essere impostate sui campi dello struct LayoutOptions che incapsula due preferenze di layout:
- Allineamento: l'allineamento preferito della vista figlio che determina la sua posizione e dimensioni nel layout padre.
- Espansione: indica se la vista figlio deve usare spazio aggiuntivo quando è disponibile ed è utilizzata solo da un elemento
StackLayout.
In MainPage.xaml modificare la dichiarazione
StackLayoutper impostare le opzioni di allineamento ed espansione per ogni elementoLabel:<StackLayout Margin="20,35,20,25"> <Label Text="Start" HorizontalOptions="Start" BackgroundColor="Gray" /> <Label Text="Center" HorizontalOptions="Center" BackgroundColor="Gray" /> <Label Text="End" HorizontalOptions="End" BackgroundColor="Gray" /> <Label Text="Fill" HorizontalOptions="Fill" BackgroundColor="Gray" /> <Label Text="StartAndExpand" VerticalOptions="StartAndExpand" BackgroundColor="Gray" /> <Label Text="CenterAndExpand" VerticalOptions="CenterAndExpand" BackgroundColor="Gray" /> <Label Text="EndAndExpand" VerticalOptions="EndAndExpand" BackgroundColor="Gray" /> <Label Text="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="Gray" /> </StackLayout>Questo codice imposta le preferenze di allineamento sulle prime quattro istanze
Labele le preferenze di espansione sulle quattro istanzeLabelfinali. I campiStart,Center,EndeFillsono usati per definire l'allineamento delle istanzeLabelall'interno dell'elementoStackLayoutpadre. I campiStartAndExpand,CenterAndExpand,EndAndExpandeFillAndExpandsono usati per definire le preferenza di allineamento e se la vista occuperà più spazio quando è disponibile nell'elementoStackLayoutpadre.Nota
Il valore predefinito delle proprietà
HorizontalOptionseVerticalOptionsdi una vista èFill.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:
Un elemento
StackLayoutrispetta solo le preferenze di allineamento nelle viste figlio che hanno la direzione opposta all'orientamento diStackLayout. Pertanto, le viste figlioLabelall'interno dell'elementoStackLayoutorientato verticalmente impostano le loro proprietàHorizontalOptionssu uno dei campi di allineamento:Start, che posizionaLabelsul lato sinistro diStackLayout.Center, che centraLabelinStackLayout.End, che posizionaLabelsul lato destro diStackLayout.Fill, con cuiLabelriempie la larghezza diStackLayout.
Un elemento
StackLayoutpuò espandere le viste figlio solo nella direzione del proprio orientamento. Pertanto, l'elementoStackLayoutorientato verticalmente può espandere le viste figlioLabelche impostano le loro proprietàVerticalOptionssu uno dei campi di espansione. Ciò significa che, per l'allineamento verticale, ogniLabeloccupa la stessa quantità di spazio all'interno dell'elementoStackLayout. Tuttavia solo l'elementoLabelfinale che imposta la sua proprietàVerticalOptionssuFillAndExpandha una dimensione diversa.Importante
Quando tutto lo spazio in un elemento
StackLayoutè utilizzato, le preferenze di espansione non hanno alcun effetto.In Visual Studio arrestare l'applicazione.
Per altre informazioni sull'allineamento e l'espansione, vedere Opzioni di layout in Xamarin.Forms.
Congratulazioni!
L'esercitazione è stata completata. Si è appreso come:
- Creare un Xamarin.Forms
StackLayoutoggetto in XAML. - Specificare l'orientamento dell'elemento
StackLayout. - Controllare l'allineamento e l'espansione della vista figlio all'interno dell'elemento
StackLayout.
Passaggi successivi
Per altre informazioni sulle nozioni di base sulla creazione di applicazioni per dispositivi mobili con Xamarin.Forms, passare all'esercitazione Etichetta.
Collegamenti correlati
Hai un problema con questa sezione? In caso di problemi, fornisci feedback per contribuire al miglioramento della sezione.