Guida Xamarin.Forms introduttiva alla creazione di un'applicazione

Scaricare l'esempio Scaricare l'esempio

In questo argomento di avvio rapido si apprenderà come:

  • Creare Xamarin.Forms un'applicazione shell.
  • Definire l'interfaccia utente per una pagina usando eXtensible Application Markup Language (XAML) e interagire con gli elementi XAML dal codice.
  • Descrivere la gerarchia visiva di un'applicazione shell sottoclassando la Shell classe .

La guida introduttiva illustra come creare un'applicazione shell multipiattaforma, che consente di immettere una nota e di rendere persistente la nota Xamarin.Forms nell'archiviazione del dispositivo. L'applicazione finale è riportata di seguito:

Pagina Notes ApplicationNotes About (Note sull'applicazione Notes)

Prerequisiti

  • Visual Studio 2019 (la versione più recente) con installato il carico di lavoro Sviluppo di applicazioni per dispositivi mobili con .NET.
  • Conoscenza di C#.
  • (facoltativo) Un Mac associato per compilare l'applicazione in iOS.

Per altre informazioni su questi prerequisiti, 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.

Introduzione a Visual Studio 2019

  1. Avviare Visual Studio 2019 e nella finestra iniziale fare clic su Crea un nuovo progetto per creare un nuovo progetto:

    Nuova soluzione

  2. Nella finestra Crea un nuovo progetto selezionare Dispositivi mobili nell'elenco Project tipo di progetto, selezionare il modello App per dispositivi mobili ( ) e fare clic sul pulsante Avanti:

    Scegliere un modello

  3. Nella finestra Configura il nuovo progetto impostare Nome progetto su Notes, scegliere un percorso appropriato per il progetto e fare clic sul pulsante Crea:

    Configurare l'applicazione shell

    Importante

    I frammenti di codice C# e XAML in questa guida introduttiva richiedono che sia la soluzione che il progetto siano denominati Notes. Se si usa un nome diverso, si verificheranno errori di compilazione quando si copia il codice da questa guida introduttiva al progetto.

  4. Nella finestra di dialogo Nuova app per dispositivi mobili selezionare il modello a schede e fare clic sul pulsante Crea:

    Creare l'applicazione shell

    Dopo la creazione del progetto, chiudere il GettingStarted.txt file.

    Per altre informazioni sulla libreria .NET Standard che viene creata, Anatomy of a Xamarin.Forms Shell application vedere in Xamarin.Forms Shell Quickstart Deep Dive .

  5. In Esplora soluzioni, nel progetto Notes, eliminare le cartelle seguenti (e il relativo contenuto):

    • Modelli
    • Services
    • ViewModel
    • Visualizzazioni
  6. In Esplora soluzioni, nel progetto Notes, eliminare GettingStarted.txt.

  7. In Esplora soluzioni, nel progetto Notes, aggiungere una nuova cartella denominata Views.

  8. In Esplora soluzioni, nel progetto Notes, selezionare la cartella Visualizzazioni, fare clic con il pulsante destro del mouse e scegliere Aggiungi nuovo elemento. Nella finestra di dialogo Aggiungi nuovo elemento selezionare Pagina contenuto elementi di Visual C#, assegnare al nuovo file il nome NotesPagee fare clic sul pulsante Aggiungi:

    Aggiungere NotesPage

    Verrà aggiunta una nuova pagina denominata NotesPage alla cartella Views. Questa pagina sarà la pagina principale dell'applicazione.

  9. Nel Esplora soluzioniNotes fare doppio clic su NotesPage.xaml nel progetto Notes per aprirlo:

    Aprire NotesPage.xaml

  10. In NotesPage.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="Notes.Views.NotesPage"
                 Title="Notes">
        <!-- Layout children vertically -->
        <StackLayout Margin="20">
            <Editor x:Name="editor"
                    Placeholder="Enter your note"
                    HeightRequest="100" />
            <!-- Layout children in two columns -->
            <Grid ColumnDefinitions="*,*">
                <Button Text="Save"
                        Clicked="OnSaveButtonClicked" />
                <Button Grid.Column="1"
                        Text="Delete"
                        Clicked="OnDeleteButtonClicked"/>
            </Grid>
        </StackLayout>
    </ContentPage>
    

    Questo codice definisce in modo dichiarativo l'interfaccia utente per la pagina, costituita da un oggetto per l'input di testo e da due oggetti che indirizzano l'applicazione al salvataggio o all'eliminazione EditorButton di un file. I due Button oggetti sono disposti orizzontalmente in un oggetto , con e disposti GridEditorGrid verticalmente in un oggetto StackLayout . Per altre informazioni sulla creazione dell'interfaccia utente, vedere Interfaccia utente in .

    Salvare le modifiche apportate a NotesPage.xaml premendo CTRL+S.

  11. Nel Esplora soluzioniNotes fare doppio clic su NotesPage.xaml.cs nel progetto Notes per aprirlo:

    Aprire NotesPage.xaml.cs

  12. In NotesPage.xaml.cs rimuovere tutto il codice del modello e sostituirlo con il codice seguente:

    using System;
    using System.IO;
    using Xamarin.Forms;
    
    namespace Notes.Views
    {
        public partial class NotesPage : ContentPage
        {
            string _fileName = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData), "notes.txt");
    
            public NotesPage()
            {
                InitializeComponent();
    
                // Read the file.
                if (File.Exists(_fileName))
                {
                    editor.Text = File.ReadAllText(_fileName);
                }
            }
    
            void OnSaveButtonClicked(object sender, EventArgs e)
            {
                // Save the file.
                File.WriteAllText(_fileName, editor.Text);
            }
    
            void OnDeleteButtonClicked(object sender, EventArgs e)
            {
                // Delete the file.
                if (File.Exists(_fileName))
                {
                    File.Delete(_fileName);
                }
                editor.Text = string.Empty;
            }
        }
    }
    

    Questo codice definisce un campo _fileName, che fa riferimento a un file denominato notes.txt che archivia i dati delle note nella cartella locale dei dati delle applicazioni per l'applicazione. Quando viene eseguito il costruttore della pagina, il file viene letto, se presente, e visualizzato in Editor. Quando si seleziona Save premendo , viene eseguito il gestore dell'evento OnSaveButtonClicked, che consente di salvare il contenuto di Editor nel file. Se per selezionare Elimina si preme , viene eseguito il gestore dell'evento OnDeleteButtonClicked, che elimina il file, a condizione che esista, e rimuove qualsiasi testo da Editor. Per altre informazioni sull'interazione dell'utente, vedere Risposta all'interazione dell'utente in .

    Salvare le modifiche apportate a NotesPage.xaml.cs premendo CTRL+S.

  13. In Esplora soluzioni, nel progetto Notes, selezionare la cartella Visualizzazioni, fare clic con il pulsante destro del mouse e scegliere Aggiungi nuovo elemento. Nella finestra di dialogo Aggiungi nuovo elemento selezionare Pagina contenuto elementi di Visual C#, assegnare al nuovo file il nome AboutPagee fare clic sul pulsante Aggiungi:

    Aggiungere AboutPage

    Verrà aggiunta una nuova pagina denominata AboutPage alla cartella Views.

  14. In Esplora soluzioni, nel progetto Notes, fare doppio clic su AboutPage.xaml per aprirlo:

    Aprire AboutPage.xaml

  15. In AboutPage.xamlrimuovere 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="Notes.Views.AboutPage"
                 Title="About">
        <!-- Layout children in two rows -->
        <Grid RowDefinitions="Auto,*">
            <Image Source="xamarin_logo.png"
                   BackgroundColor="{OnPlatform iOS=LightSlateGray, Android=#2196F3}"
                   VerticalOptions="Center"
                   HeightRequest="64" />
            <!-- Layout children vertically -->
            <StackLayout Grid.Row="1"
                         Margin="20"
                         Spacing="20">
                <Label FontSize="22">
                    <Label.FormattedText>
                        <FormattedString>
                            <FormattedString.Spans>
                                <Span Text="Notes"
                                      FontAttributes="Bold"
                                      FontSize="22" />
                                <Span Text=" v1.0" />
                            </FormattedString.Spans>
                        </FormattedString>
                    </Label.FormattedText>
                </Label>
                <Label Text="This app is written in XAML and C# with the Xamarin Platform." />
                <Button Text="Learn more"
                        Clicked="OnButtonClicked" />
            </StackLayout>
        </Grid>
    </ContentPage>
    

    Questo codice definisce in modo dichiarativo l'interfaccia utente per la pagina, costituita da un oggetto , due oggetti che visualizzano Image testo e un oggetto LabelButton . I due oggetti e sono disposti verticalmente in un oggetto , con e disposti LabelButtonStackLayoutImageStackLayout verticalmente in un oggetto Grid . Per altre informazioni sulla creazione dell'interfaccia utente, vedere Interfaccia utente in .

    Salvare le modifiche apportate a AboutPage.xaml premendo CTRL+S.

  16. In Esplora soluzioni, nel progetto Notes, fare doppio clic su AboutPage.xaml.cs per aprirlo:

    Aprire AboutPage.xaml.cs

  17. In AboutPage.xaml.csrimuovere tutto il codice del modello e sostituirlo con il codice seguente:

    using System;
    using Xamarin.Essentials;
    using Xamarin.Forms;
    
    namespace Notes.Views
    {
        public partial class AboutPage : ContentPage
        {
            public AboutPage()
            {
                InitializeComponent();
            }
    
            async void OnButtonClicked(object sender, EventArgs e)
            {
                // Launch the specified URL in the system browser.
                await Launcher.OpenAsync("https://aka.ms/xamarin-quickstart");
            }
        }
    }
    

    Questo codice definisce il gestore OnButtonClicked dell'evento , che viene eseguito quando si preme OnButtonClicked pulsante Button Altre informazioni. Quando si preme il pulsante, viene avviato un Web browser e viene visualizzata la pagina rappresentata dall'argomento URI OpenAsync del metodo . Per altre informazioni sull'interazione dell'utente, vedere Risposta all'interazione dell'utente in .

    Salvare le modifiche apportate a AboutPage.xaml.cs premendo CTRL+S.

  18. In Esplora soluzioni, nel progetto Notes, fare doppio clic su AppShell.xaml per aprirlo:

    Aprire AppShell.xaml

  19. In AppShell.xamlrimuovere tutto il codice del modello e sostituirlo con il codice seguente:

    <?xml version="1.0" encoding="UTF-8"?>
    <Shell xmlns="http://xamarin.com/schemas/2014/forms"
           xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
           xmlns:views="clr-namespace:Notes.Views"
           x:Class="Notes.AppShell">
        <!-- Display a bottom tab bar containing two tabs -->   
        <TabBar>
            <ShellContent Title="Notes"
                          Icon="icon_feed.png"
                          ContentTemplate="{DataTemplate views:NotesPage}" />
            <ShellContent Title="About"
                          Icon="icon_about.png"
                          ContentTemplate="{DataTemplate views:AboutPage}" />
        </TabBar>
    </Shell>
    

    Questo codice definisce in modo dichiarativo la gerarchia visiva dell'applicazione, costituita da un oggetto TabBar contenente due ShellContent oggetti . Questi oggetti non rappresentano elementi dell'interfaccia utente, ma piuttosto l'organizzazione della gerarchia visiva dell'applicazione. Shell accetta questi oggetti e produce l'interfaccia utente per il contenuto. Per altre informazioni sulla creazione dell'interfaccia utente, vedere Interfaccia utente in .

    Salvare le modifiche apportate ad AppShell.xaml premendo CTRL+S.

  20. In Esplora soluzioni, nel progetto Notes espandere AppShell.xamle fare doppio clic su AppShell.xaml.cs per aprirlo:

    Aprire AppShell.xaml.cs

  21. In AppShell.xaml.csrimuovere tutto il codice del modello e sostituirlo con il codice seguente:

    using Xamarin.Forms;
    
    namespace Notes
    {
        public partial class AppShell : Shell
        {
            public AppShell()
            {
                InitializeComponent();
            }
        }
    }
    

    Salvare le modifiche apportate a AppShell.xaml.cs premendo CTRL+S.

  22. Nel Esplora soluzioniNotes fare doppio clic su App.xaml nel progetto Notes per aprirlo:

    Aprire App.xaml

  23. In App.xamlrimuovere tutto il codice del modello e sostituirlo con il codice seguente:

    <?xml version="1.0" encoding="utf-8" ?>
    <Application xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="Notes.App">
    
    </Application>
    

    Questo codice definisce in modo dichiarativo una classe , responsabile della App creazione di un'istanza dell'applicazione.

    Salvare le modifiche apportate ad App.xaml premendo CTRL+S.

  24. In Esplora soluzioni, nel progetto Notes espandere App.xamle fare doppio clic su App.xaml.cs per aprirlo:

    Aprire App.xaml.cs

  25. In App.xaml.csrimuovere tutto il codice del modello e sostituirlo con il codice seguente:

    using Xamarin.Forms;
    
    namespace Notes
    {
        public partial class App : Application
        {
    
            public App()
            {
                InitializeComponent();
                MainPage = new AppShell();
            }
    
            protected override void OnStart()
            {
            }
    
            protected override void OnSleep()
            {
            }
    
            protected override void OnResume()
            {
            }
        }
    }
    

    Questo codice definisce il code-behind per la classe , responsabile della App creazione di un'istanza dell'applicazione. Inizializza la proprietà Xamarin_Forms _Application_MainPage" data-linktype="absolute-path">MainPage all'oggetto Shell sottoclassato.

    Salvare le modifiche apportate ad App.xaml.cs premendo CTRL+S.

Compilazione della guida rapida

  1. In Visual Studio selezionare la voce di menu Compila soluzione o premere F6. La soluzione viene compilata e nella barra di stato di Visual Studio viene visualizzato un messaggio di operazione completata:

    Compilazione completata

    In caso di errori, ripetere i passaggi precedenti e correggere gli errori finché i progetti non vengono compilati correttamente.

  2. 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 in un emulatore Android:

    Barra degli strumenti di Visual Studio Android

    Notes nell'emulatore Android

    Immettere una nota e premere il pulsante Salva. Chiudere quindi l'applicazione e riavviarla per assicurarsi che la nota immessa sia ricaricata.

    Premere l'icona della scheda Informazioni su per passare a :

    Pagina Note sulla versione di Android Emulator

    Fare clic sul pulsante Altre informazioni per avviare la pagina Web delle guide introduttive.

    Per altre informazioni sul modo in cui l'applicazione viene avviata in ogni piattaforma, vedere Avvio dell'applicazione in ogni piattaforma in .

    Nota

    I passaggi seguenti devono essere eseguiti solo se si dispone di un Mac associato che soddisfa i requisiti di sistema per lo sviluppo.

  3. Nella barra degli strumenti di Visual Studio fare clic con il pulsante destro del mouse sul progetto Notes.iOS e selezionare Imposta come progetto di avvio.

    Impostare Notes.iOS come Avvio Project

  4. 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 nel simulatore iOS remoto:

    Barra degli strumenti di Visual Studio iOS

    Notes nel simulatore iOS

    Immettere una nota e premere il pulsante Salva. Chiudere quindi l'applicazione e riavviarla per assicurarsi che la nota immessa sia ricaricata.

    Premere l'icona della scheda Informazioni su per passare a :

    Pagina Note sulla pagina nel simulatore iOS

    Fare clic sul pulsante Altre informazioni per avviare la pagina Web delle guide introduttive.

    Per altre informazioni sul modo in cui l'applicazione viene avviata in ogni piattaforma, vedere Avvio dell'applicazione in ogni piattaforma in .

Prerequisiti

  • Visual Studio per Mac (versione più recente) con installato il supporto delle piattaforme Android e iOS.
  • Xcode (versione più recente).
  • Conoscenza di C#.

Per altre informazioni su questi prerequisiti, vedere Installazione di Xamarin.

Introduzione a Visual Studio per Mac

  1. Avviare Visual Studio per Mac e nella finestra iniziale fare clic su Nuovo per creare un nuovo progetto:

    Nuova soluzione

  2. Nella finestra di dialogo Scegliere un modello per il nuovo progetto fare clic su Appmultipiattaforma, selezionare il modello Shell Forms App e fare clic sul pulsante Avanti:

    Scegliere un modello

  3. Nella finestra di dialogo Configura l'app Shell Forms assegnare alla nuova app il nome Notese fare clic sul pulsante Avanti:

    Configurare l'applicazione shell

  4. Nella finestra di dialogo Configura la nuova app Moduli shell lasciare i nomi delle soluzioni e dei Project impostati su Note,scegliere un percorso appropriato per il progetto e fare clic sul pulsante Crea per creare il progetto:

    Configurare l'Project Shell

    Importante

    I frammenti di codice C# e XAML in questa guida introduttiva richiedono che sia la soluzione che il progetto siano denominati Notes. Se si usa un nome diverso, si verificheranno errori di compilazione quando si copia il codice da questa guida introduttiva al progetto.

    Per altre informazioni sulla .NET Standard che viene creata, vedere Anatomy of a Xamarin.Forms Shell application in Xamarin.Forms Shell Quickstart Deep Dive .

  5. Nel riquadro della soluzione, nel progetto Notes, eliminare le cartelle seguenti (e il relativo contenuto):

    • Modelli
    • Services
    • ViewModel
    • Visualizzazioni
  6. Nel riquadro della soluzione, nel progetto Notes, eliminare GettingStarted.txt.

  7. Nel riquadro della soluzione, nel progetto Notes, aggiungere una nuova cartella denominata Views.

  8. Nel riquadro della soluzione, nel progetto Notes, selezionare la cartella Views, fare clic con il pulsante destro del mouse e scegliere Aggiungi nuovo file.... Nella finestra di dialogo Nuovo file selezionare Form Forms ContentPage XAML,assegnare al nuovo file il nome NotesPagee fare clic sul pulsante Nuovo:

    Aggiungere NotesPage

    Verrà aggiunta una nuova pagina denominata NotesPage alla cartella Views. Questa pagina sarà la pagina principale dell'applicazione.

  9. Nella finestra riquadro della soluzione, nel progetto Notes, fare doppio clic su NotesPage.xaml per aprirlo:

    Aprire NotesPage.xaml

  10. In NotesPage.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="Notes.Views.NotesPage"
                 Title="Notes">
        <!-- Layout children vertically -->
        <StackLayout Margin="20">
            <Editor x:Name="editor"
                    Placeholder="Enter your note"
                    HeightRequest="100" />
            <!-- Layout children in two columns -->
            <Grid ColumnDefinitions="*,*">
                <Button Text="Save"
                        Clicked="OnSaveButtonClicked" />
                <Button Grid.Column="1"
                        Text="Delete"
                        Clicked="OnDeleteButtonClicked"/>
            </Grid>
        </StackLayout>
    </ContentPage>
    

    Questo codice definisce in modo dichiarativo l'interfaccia utente per la pagina, costituita da un oggetto per l'input di testo e due oggetti che indirizzano l'applicazione a salvare EditorButton o eliminare un file. I due Button oggetti sono disposti orizzontalmente in un oggetto , con e disposti GridEditorGrid verticalmente in un oggetto StackLayout . Per altre informazioni sulla creazione dell'interfaccia utente, vedere Interfaccia utente in .

    Salvare le modifiche in NotesPage.xaml scegliendo Salva file (o premendo ⌘ + S).

  11. Nella finestra riquadro della soluzione, nel progetto Notes, fare doppio clic su NotesPage.xaml.cs per aprirlo:

    Aprire NotesPage.xaml.cs

  12. In NotesPage.xaml.cs rimuovere tutto il codice del modello e sostituirlo con il codice seguente:

    using System;
    using System.IO;
    using Xamarin.Forms;
    
    namespace Notes.Views
    {
        public partial class NotesPage : ContentPage
        {
            string _fileName = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData), "notes.txt");
    
            public NotesPage()
            {
                InitializeComponent();
    
                // Read the file.
                if (File.Exists(_fileName))
                {
                    editor.Text = File.ReadAllText(_fileName);
                }
            }
    
            void OnSaveButtonClicked(object sender, EventArgs e)
            {
                // Save the file.
                File.WriteAllText(_fileName, editor.Text);
            }
    
            void OnDeleteButtonClicked(object sender, EventArgs e)
            {
                // Delete the file.
                if (File.Exists(_fileName))
                {
                    File.Delete(_fileName);
                }
                editor.Text = string.Empty;
            }
        }
    }
    

    Questo codice definisce un campo _fileName, che fa riferimento a un file denominato notes.txt che archivia i dati delle note nella cartella locale dei dati delle applicazioni per l'applicazione. Quando viene eseguito il costruttore della pagina, il file viene letto, se presente, e visualizzato in Editor. Quando si seleziona Save premendo , viene eseguito il gestore dell'evento OnSaveButtonClicked, che consente di salvare il contenuto di Editor nel file. Se per selezionare Elimina si preme , viene eseguito il gestore dell'evento OnDeleteButtonClicked, che elimina il file, a condizione che esista, e rimuove qualsiasi testo da Editor. Per altre informazioni sull'interazione dell'utente, vedere Risposta all'interazione dell'utente in .

    Salvare le modifiche apportate a NotesPage.xaml.cs scegliendo Salva file (o premendo ⌘ + S).

  13. Nel riquadro della soluzione, nel progetto Notes, selezionare la cartella Views, fare clic con il pulsante destro del mouse e scegliere Aggiungi nuovo file.... Nella finestra di dialogo Nuovo file selezionare Form Forms ContentPage XAML,assegnare al nuovo file il nome AboutPagee fare clic sul pulsante Nuovo:

    Aggiungere AboutPage

  14. Nella finestra riquadro della soluzione, nel progetto Notes, fare doppio clic su AboutPage.xaml per aprirlo:

    Aprire AboutPage.xaml

    Verrà aggiunta una nuova pagina denominata AboutPage alla cartella Views.

  15. In AboutPage.xamlrimuovere 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="Notes.Views.AboutPage"
                 Title="About">
        <!-- Layout children in two rows -->
        <Grid RowDefinitions="Auto,*">
            <Image Source="xamarin_logo.png"
                   BackgroundColor="{OnPlatform iOS=LightSlateGray, Android=#2196F3}"
                   VerticalOptions="Center"
                   HeightRequest="64" />
            <!-- Layout children vertically -->
            <StackLayout Grid.Row="1"
                         Margin="20"
                         Spacing="20">
                <Label FontSize="22">
                    <Label.FormattedText>
                        <FormattedString>
                            <FormattedString.Spans>
                                <Span Text="Notes"
                                      FontAttributes="Bold"
                                      FontSize="22" />
                                <Span Text=" v1.0" />
                            </FormattedString.Spans>
                        </FormattedString>
                    </Label.FormattedText>
                </Label>
                <Label Text="This app is written in XAML and C# with the Xamarin Platform." />
                <Button Text="Learn more"
                        Clicked="OnButtonClicked" />
            </StackLayout>
        </Grid>
    </ContentPage>
    

    Questo codice definisce in modo dichiarativo l'interfaccia utente per la pagina, costituita da un oggetto , due oggetti che visualizzano Image testo e un oggetto LabelButton . I due oggetti e sono disposti verticalmente in un oggetto , con e disposti LabelButtonStackLayoutImageStackLayout verticalmente in un Grid oggetto . Per altre informazioni sulla creazione dell'interfaccia utente, vedere Interfaccia utente in .

    Salvare le modifiche in AboutPage.xaml scegliendo Salva file (o premendo ⌘ + S).

  16. Nel riquadro della soluzione, nel progetto Notes, fare doppio clic su AboutPage.xaml.cs per aprirlo:

    Aprire AboutPage.xaml.cs

  17. In AboutPage.xaml.csrimuovere tutto il codice del modello e sostituirlo con il codice seguente:

    using System;
    using Xamarin.Essentials;
    using Xamarin.Forms;
    
    namespace Notes.Views
    {
        public partial class AboutPage : ContentPage
        {
            public AboutPage()
            {
                InitializeComponent();
            }
    
            async void OnButtonClicked(object sender, EventArgs e)
            {
                // Launch the specified URL in the system browser.
                await Launcher.OpenAsync("https://aka.ms/xamarin-quickstart");
            }
        }
    }
    

    Questo codice definisce il gestore OnButtonClicked eventi, che viene eseguito quando viene premuto OnButtonClicked pulsante Button Altre informazioni. Quando si preme il pulsante, viene avviato un Web browser e viene visualizzata la pagina rappresentata dall'argomento URI OpenAsync del metodo . Per altre informazioni sull'interazione dell'utente, vedere Risposta all'interazione dell'utente in .

    Salvare le modifiche in AboutPage.xaml.cs scegliendo Salva file (o premendo ⌘ + S).

  18. Nella finestra riquadro della soluzione, nel progetto Notes, fare doppio clic su AppShell.xaml per aprirlo:

    Aprire AppShell.xaml

  19. In AppShell.xamlrimuovere tutto il codice del modello e sostituirlo con il codice seguente:

    <?xml version="1.0" encoding="UTF-8"?>
    <Shell xmlns="http://xamarin.com/schemas/2014/forms"
           xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
           xmlns:views="clr-namespace:Notes.Views"
           x:Class="Notes.AppShell">
        <!-- Display a bottom tab bar containing two tabs -->
        <TabBar>
            <ShellContent Title="Notes"
                          Icon="icon_feed.png"
                          ContentTemplate="{DataTemplate views:NotesPage}" />
            <ShellContent Title="About"
                          Icon="icon_about.png"
                          ContentTemplate="{DataTemplate views:AboutPage}" />
        </TabBar>
    </Shell>
    

    Questo codice definisce in modo dichiarativo la gerarchia visiva dell'applicazione, costituita da un TabBar oggetto contenente due oggetti ShellContent . Questi oggetti non rappresentano elementi dell'interfaccia utente, ma piuttosto l'organizzazione della gerarchia visiva dell'applicazione. Shell accetta questi oggetti e produce l'interfaccia utente per il contenuto. Per altre informazioni sulla creazione dell'interfaccia utente, vedere Interfaccia utente in .

    Salvare le modifiche in AppShell.xaml scegliendo Salva file (o premendo ⌘ + S).

  20. Nel riquadro della soluzione, nel progetto Notes, espandere AppShell.xamle fare doppio clic su AppShell.xaml.cs per aprirlo:

    Aprire AppShell.xaml.cs

  21. In AppShell.xaml.csrimuovere tutto il codice del modello e sostituirlo con il codice seguente:

    using Xamarin.Forms;
    
    namespace Notes
    {
        public partial class AppShell : Shell
        {
            public AppShell()
            {
                InitializeComponent();
            }
        }
    }
    

    Salvare le modifiche in AppShell.xaml.cs scegliendo Salva file (o premendo ⌘ + S).

  22. Nella finestra riquadro della soluzione, nel progetto Notes, fare doppio clic su App.xaml per aprirlo:

    Aprire App.xaml

  23. In App.xamlrimuovere tutto il codice del modello e sostituirlo con il codice seguente:

    <?xml version="1.0" encoding="utf-8" ?>
    <Application xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="Notes.App">
    
    </Application>
    

    Questo codice definisce in modo dichiarativo una App classe, responsabile della creazione di un'istanza dell'applicazione.

    Salvare le modifiche in App.xaml scegliendo Salva file (o premendo ⌘ + S).

  24. Nel riquadro della soluzione, nel progetto Notes, espandere App.xamle fare doppio clic su App.xaml.cs per aprirlo:

    Aprire App.xaml.cs

  25. In App.xaml.csrimuovere tutto il codice del modello e sostituirlo con il codice seguente:

    using Xamarin.Forms;
    
    namespace Notes
    {
        public partial class App : Application
        {
    
            public App()
            {
                InitializeComponent();
                MainPage = new AppShell();
            }
    
            protected override void OnStart()
            {
            }
    
            protected override void OnSleep()
            {
            }
    
            protected override void OnResume()
            {
            }
        }
    }
    

    Questo codice definisce il code-behind per la classe , responsabile della creazione di App un'istanza dell'applicazione. Inizializza la proprietà Xamarin_Forms _Application_MainPage" data-linktype="absolute-path">MainPage all'oggetto Shell sottoclassato.

    Salvare le modifiche in App.xaml.cs scegliendo Salva file (o premendo ⌘ + S).

Compilazione della guida rapida

  1. In Visual Studio per Mac selezionare la voce di menu Compila tutto (o premere - + B). I progetti verranno compilati e verrà visualizzato un messaggio di esito positivo nella barra Visual Studio per Mac seguente:

    Compilazione completata

    In caso di errori, ripetere i passaggi precedenti e correggere gli errori finché i progetti non vengono compilati correttamente.

  2. Nel riquadro della soluzione selezionare il progetto Notes.iOS, fare clic con il pulsante destro del mouse e scegliere Imposta come progetto di avvio:

    Impostare iOS come progetto di avvio

  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 prescelto:

    Barra degli strumenti di Visual Studio per Mac

    Notes nel simulatore iOS

    Immettere una nota e premere il pulsante Salva. Chiudere quindi l'applicazione e riavviarla per assicurarsi che la nota immessa sia ricaricata.

    Premere l'icona della scheda Informazioni su per passare a :

    Pagina Note sulla pagina nel simulatore iOS

    Fare clic sul pulsante Altre informazioni per avviare la pagina Web delle guide introduttive.

    Per altre informazioni sul modo in cui l'applicazione viene avviata in ogni piattaforma, vedere Avvio dell'applicazione in ogni piattaforma in .

  4. Nel riquadro della soluzione selezionare il progetto Notes.Droid, fare clic con il pulsante destro del mouse e scegliere Imposta come progetto di avvio:

    Impostare Android come progetto di avvio

  5. 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 dell'emulatore Android prescelto:

    Notes nell'emulatore Android

    Immettere una nota e premere il pulsante Salva. Chiudere quindi l'applicazione e riavviarla per assicurarsi che la nota immessa sia ricaricata.

    Premere l'icona della scheda Informazioni su per passare a :

    Pagina Note sulla versione di Android Emulator

    Fare clic sul pulsante Altre informazioni per avviare la pagina Web delle guide introduttive.

    Per altre informazioni sul modo in cui l'applicazione viene avviata in ogni piattaforma, vedere Avvio dell'applicazione in ogni piattaforma in .

Passaggi successivi

In questo argomento di avvio rapido si è appreso come:

  • Creare Xamarin.Forms un'applicazione Shell.
  • Definire l'interfaccia utente per una pagina usando eXtensible Application Markup Language (XAML) e interagire con gli elementi XAML dal codice.
  • Descrivere la gerarchia visiva di un'applicazione Shell sottoclassando la Shell classe .

Passare alla guida introduttiva successiva per aggiungere altre pagine a questa Xamarin.Forms applicazione Shell.