Xamarin.Forms Esercitazione su StackLayout

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.

1. 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.

2. 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 Label in un elemento StackLayout. L'elemento StackLayout posiziona le relative viste figlio, ovvero le istanze Label, in una singola riga, che è orientata in verticale per impostazione predefinita. Inoltre la proprietà Margin indica la posizione di rendering di StackLayout all'interno di ContentPage.

   Nota

   Oltre alla proprietà Margin, anche le proprietà Padding e Spacing possono essere impostate su un StackLayout. Il valore della proprietà Padding specifica la distanza tra le viste nell'elemento StackLayout e il valore della proprietà Spacing specifica la quantità di spazio tra i singoli elementi figlio in StackLayout. Per altre informazioni, vedere l'articolo sulle proprietà Margin e Padding.

3. 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.

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.

1. Avviare Visual Studio per Mac 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.

2. Nel riquadro della soluzione, 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 Label in un elemento StackLayout. L'elemento StackLayout posiziona le relative viste figlio, ovvero le istanze Label, in una singola riga, che è orientata in verticale per impostazione predefinita. Inoltre la proprietà Margin indica la posizione di rendering di StackLayout all'interno di ContentPage.

   Nota

   Oltre alla proprietà Margin, anche le proprietà Padding e Spacing possono essere impostate su un StackLayout. Il valore della proprietà Padding specifica la distanza tra le viste nell'elemento StackLayout e il valore della proprietà Spacing specifica la quantità di spazio tra i singoli elementi figlio in StackLayout. Per altre informazioni, vedere l'articolo sulle proprietà Margin e Padding.

3. 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 StackLayout, vedere Xamarin.Forms StackLayout.

1. In MainPage.xaml modificare la dichiarazione StackLayout per 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à Orientation su Horizontal.

2. 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 Label all'interno di StackLayout sono ora allineate orizzontalmente anziché verticalmente.

1. In MainPage.xaml modificare la dichiarazione StackLayout per 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à Orientation su Horizontal.

2. 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:

   

   Si noti che le istanze di Label all'interno di StackLayout sono ora allineate orizzontalmente anziché verticalmente.

1. In MainPage.xaml modificare la dichiarazione StackLayout per impostare le opzioni di allineamento ed espansione per ogni elemento Label:

   <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 Label e le preferenze di espansione sulle quattro istanze Label finali. I campi Start, Center, End e Fill sono usati per definire l'allineamento delle istanze Label all'interno dell'elemento StackLayout padre. I campi StartAndExpand, CenterAndExpand, EndAndExpand e FillAndExpand sono usati per definire le preferenza di allineamento e se la vista occuperà più spazio quando è disponibile nell'elemento StackLayout padre.

   Nota

   Il valore predefinito delle proprietà HorizontalOptions e VerticalOptions di una vista è Fill.

2. 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 StackLayout rispetta solo le preferenze di allineamento nelle viste figlio che hanno la direzione opposta all'orientamento di StackLayout. Pertanto, le viste figlio Label all'interno dell'elemento StackLayout orientato verticalmente impostano le loro proprietà HorizontalOptions su uno dei campi di allineamento:

   • Start, che posiziona Label sul lato sinistro di StackLayout.
   • Center, che centra Label in StackLayout.
   • End, che posiziona Label sul lato destro di StackLayout.
   • Fill, con cui Label riempie la larghezza di StackLayout.

   Un elemento StackLayout può espandere le viste figlio solo nella direzione del proprio orientamento. Pertanto, l'elemento StackLayout orientato verticalmente può espandere le viste figlio Label che impostano le loro proprietà VerticalOptions su uno dei campi di espansione. Ciò significa che, per l'allineamento verticale, ogni Label occupa la stessa quantità di spazio all'interno dell'elemento StackLayout. Tuttavia solo l'elemento Label finale che imposta la sua proprietà VerticalOptions su FillAndExpand ha 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.

1. In MainPage.xaml modificare la dichiarazione StackLayout per impostare le opzioni di allineamento ed espansione per ogni elemento Label:

   <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 Label e le preferenze di espansione sulle quattro istanze Label finali. I campi Start, Center, End e Fill sono usati per definire l'allineamento delle istanze Label all'interno dell'elemento StackLayout padre. I campi StartAndExpand, CenterAndExpand, EndAndExpand e FillAndExpand sono usati per definire le preferenza di allineamento e se la vista occuperà più spazio quando è disponibile nell'elemento StackLayout padre.

   Nota

   Il valore predefinito delle proprietà HorizontalOptions e VerticalOptions di una vista è Fill.

2. 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:

   

   Un elemento StackLayout rispetta solo le preferenze di allineamento nelle viste figlio che hanno la direzione opposta all'orientamento di StackLayout. Pertanto, le viste figlio Label all'interno dell'elemento StackLayout orientato verticalmente impostano le loro proprietà HorizontalOptions su uno dei campi di allineamento:

   • Start, che posiziona Label sul lato sinistro di StackLayout.
   • Center, che centra Label in StackLayout.
   • End, che posiziona Label sul lato destro di StackLayout.
   • Fill, con cui Label riempie la larghezza di StackLayout.

   Un elemento StackLayout può espandere le viste figlio solo nella direzione del proprio orientamento. Pertanto, l'elemento StackLayout orientato verticalmente può espandere le viste figlio Label che impostano le loro proprietà VerticalOptions su uno dei campi di espansione. Ciò significa che, per l'allineamento verticale, ogni Label occupa la stessa quantità di spazio all'interno dell'elemento StackLayout. Tuttavia solo l'elemento Label finale che imposta la sua proprietà VerticalOptions su FillAndExpand ha una dimensione diversa.

   Importante

   Quando tutto lo spazio in un elemento StackLayout è utilizzato, le preferenze di espansione non hanno alcun effetto.

   In Visual Studio per Mac arrestare l'applicazione.

   Per altre informazioni sull'allineamento e l'espansione, vedere Opzioni di layout in Xamarin.Forms.