Creare un'applicazione Xamarin.Forms di avvio rapido

Scaricare l'esempio

In questo argomento di avvio rapido si apprenderà come:

• Creare un'applicazione Xamarin.Forms 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 Xamarin.Forms , che consente di immettere una nota e renderla persistente nell'archiviazione del dispositivo. L'applicazione finale è riportata di seguito:

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:

   

2. Nella finestra Crea un nuovo progetto selezionare Mobile nell'elenco a discesa Tipo di progetto, selezionare il modello App per dispositivi mobili (Xamarin.Forms) e fare clic sul pulsante Avanti:

   

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:

   

   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:

   

   Dopo aver creato il progetto, chiudere il file GettingStarted.txt .

   Per altre informazioni sulla libreria .NET Standard creata, vedere Anatomia di un'applicazioneXamarin.Forms Shell nell'argomento Xamarin.Forms di avvio rapido della shell.

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

   • Modelli
   • Servizi
   • ViewModels
   • Visualizzazioni

6. In Esplora soluzioni, nel progetto Notes eliminare GettingStarted.txt.

7. Nel progetto Notes Esplora soluzioni 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 >>Xamarin.Formsvisual C#, assegnare al nuovo file il nome NotesPage e fare clic sul pulsante Aggiungi:

   

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

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

   

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 Editor per l'input di testo e due Button oggetti che indirizzano l'applicazione a salvare o eliminare un file. I due Button oggetti sono disposti orizzontalmente in un Gridoggetto , con Editor e Grid disposti verticalmente in un oggetto StackLayout. Per altre informazioni sulla creazione dell'interfaccia utente, vedere User interface in the Shell Quickstart Deep Dive (Approfondimento della guida introduttiva alla shell).Xamarin.Forms

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

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

    

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 Salva premendo Button, viene eseguito il gestore eventi OnSaveButtonClicked, che consente di salvare il contenuto di Editor nel file. Se per selezionare Elimina si preme Button, viene eseguito il gestore eventi OnDeleteButtonClicked, che elimina il file, a condizione che esista, e rimuove qualsiasi testo da Editor. Per altre informazioni sull'interazione dell'utente, vedere Rispondere all'interazione dell'utente in Approfondimento della guida introduttiva di Xamarin.Forms Shell.

    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 >Xamarin.Forms> visual C#, denominare il nuovo file AboutPage e fare clic sul pulsante Aggiungi:

    

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

14. Nel progetto Notes Esplora soluzioni fare doppio clic su AboutPage.xaml per aprirlo:

    

15. In AboutPage.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.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 Imageoggetto , due Label oggetti che visualizzano testo e un oggetto Button. I due Label oggetti e Button sono disposti verticalmente in un StackLayoutoggetto , con e ImageStackLayout disposti verticalmente in un oggetto Grid. Per altre informazioni sulla creazione dell'interfaccia utente, vedere User interface in the Shell Quickstart Deep Dive (Approfondimento della guida introduttiva alla shell).Xamarin.Forms

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

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

    

17. In AboutPage.xaml.cs rimuovere 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 OnButtonClicked gestore eventi, che viene eseguito quando viene premuto Learn moreButton . Quando si preme il pulsante, viene avviato un Web browser e viene visualizzata la pagina rappresentata dall'argomento URI del OpenAsync metodo . Per altre informazioni sull'interazione dell'utente, vedere Rispondere all'interazione dell'utente in Approfondimento della guida introduttiva di Xamarin.Forms Shell.

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

18. Nel progetto Notes Esplora soluzioni fare doppio clic su AppShell.xaml per aprirlo:

    

19. In AppShell.xaml rimuovere 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 ShellContent oggetti. Questi oggetti non rappresentano elementi dell'interfaccia utente, ma piuttosto l'organizzazione della gerarchia visiva dell'applicazione. Shell prenderà questi oggetti e produrrà l'interfaccia utente per il contenuto. Per altre informazioni sulla creazione dell'interfaccia utente, vedere User interface in the Shell Quickstart Deep Dive (Approfondimento della guida introduttiva alla shell).Xamarin.Forms

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

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

    

21. In AppShell.xaml.cs rimuovere 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 progetto Notes Esplora soluzioni fare doppio clic su App.xaml per aprirlo:

    

23. In App.xaml rimuovere 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 apportate a App.xaml premendo CTRL+S.

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

    

25. In App.xaml.cs rimuovere 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 App classe , responsabile della creazione di un'istanza dell'applicazione. Inizializza la MainPage proprietà nell'oggetto sottoclassato Shell .

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

Compilazione della guida rapida

1. In Visual Studio selezionare la voce di menu Compila soluzione compila > (o premere F6). La soluzione viene compilata e nella barra di stato di Visual Studio viene visualizzato un messaggio di operazione 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:

   

   

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

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

   

   Premere il pulsante Altre informazioni per avviare la pagina Web delle guide introduttive.

   Per altre informazioni sull'avvio dell'applicazione in ogni piattaforma, vedere Avvio dell'applicazione in ogni piattaforma nell'approfondimento Xamarin.Forms della guida introduttiva.

   Nota

   I passaggi seguenti devono essere eseguiti solo se si dispone di un Mac associato che soddisfi i requisiti di sistema per Xamarin.Forms 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.

   

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:

   

   

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

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

   

   Premere il pulsante Altre informazioni per avviare la pagina Web delle guide introduttive.

   Per altre informazioni sull'avvio dell'applicazione in ogni piattaforma, vedere Avvio dell'applicazione in ogni piattaforma nell'approfondimento Xamarin.Forms della guida introduttiva.

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:

   

2. Nella finestra di dialogo Scegli un modello per il nuovo progetto fare clic su App multipiattaforma>, selezionare il modello App Form shell e fare clic sul pulsante Avanti:

   

3. Nella finestra di dialogo Configura l'app Form shell assegnare un nome alla nuova app Notes e fare clic sul pulsante Avanti :

   

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

   

   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 libreria .NET Standard creata, vedere Anatomia di un'applicazioneXamarin.Forms Shell nell'argomento Xamarin.Forms di avvio rapido della shell.

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

   • Modelli
   • Servizi
   • ViewModels
   • Visualizzazioni

6. Nel riquadro della soluzione, nel progetto Notes, eliminare GettingStarted.txt.

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

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

   

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

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

   

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 Editor per l'input di testo e due Button oggetti che indirizzano l'applicazione a salvare o eliminare un file. I due Button oggetti sono disposti orizzontalmente in un Gridoggetto , con Editor e Grid disposti verticalmente in un oggetto StackLayout. Per altre informazioni sulla creazione dell'interfaccia utente, vedere User interface in the Shell Quickstart Deep Dive (Approfondimento della guida introduttiva alla shell).Xamarin.Forms

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

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

    

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 Salva premendo Button, viene eseguito il gestore eventi OnSaveButtonClicked, che consente di salvare il contenuto di Editor nel file. Se per selezionare Elimina si preme Button, viene eseguito il gestore eventi OnDeleteButtonClicked, che elimina il file, a condizione che esista, e rimuove qualsiasi testo da Editor. Per altre informazioni sull'interazione dell'utente, vedere Rispondere all'interazione dell'utente in Approfondimento della guida introduttiva di Xamarin.Forms Shell.

    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 Visualizzazioni, fare clic con il pulsante destro del mouse e scegliere Aggiungi > nuovo file....Nella finestra di dialogo Nuovo file selezionare >Forms ContentPage XAML, denominare il nuovo file AboutPage e fare clic sul pulsante Nuovo:

    

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

    

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

15. In AboutPage.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.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 Imageoggetto , due Label oggetti che visualizzano testo e un oggetto Button. I due Label oggetti e Button sono disposti verticalmente in un StackLayoutoggetto , con e ImageStackLayout disposti verticalmente in un oggetto Grid. Per altre informazioni sulla creazione dell'interfaccia utente, vedere User interface in the Shell Quickstart Deep Dive (Approfondimento della guida introduttiva alla shell).Xamarin.Forms

    Salvare le modifiche apportate a 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:

    

17. In AboutPage.xaml.cs rimuovere 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 OnButtonClicked gestore eventi, che viene eseguito quando viene premuto Learn moreButton . Quando si preme il pulsante, viene avviato un Web browser e viene visualizzata la pagina rappresentata dall'argomento URI del OpenAsync metodo . Per altre informazioni sull'interazione dell'utente, vedere Rispondere all'interazione dell'utente in Approfondimento della guida introduttiva di Xamarin.Forms Shell.

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

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

    

19. In AppShell.xaml rimuovere 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 ShellContent oggetti. Questi oggetti non rappresentano elementi dell'interfaccia utente, ma piuttosto l'organizzazione della gerarchia visiva dell'applicazione. Shell prenderà questi oggetti e produrrà l'interfaccia utente per il contenuto. Per altre informazioni sulla creazione dell'interfaccia utente, vedere User interface in the Shell Quickstart Deep Dive (Approfondimento della guida introduttiva alla shell).Xamarin.Forms

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

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

    

21. In AppShell.xaml.cs rimuovere 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 scegliendo Salva file (o premendo ⌘ + S).>

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

    

23. In App.xaml rimuovere 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 apportate a App.xaml scegliendo Salva file > (o premendo ⌘ + S).

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

    

25. In App.xaml.cs rimuovere 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 App classe , responsabile della creazione di un'istanza dell'applicazione. Inizializza la MainPage proprietà nell'oggetto sottoclassato Shell .

    Salvare le modifiche apportate a 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 degli strumenti Visual Studio per Mac:

   

   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:

   

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:

   

   

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

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

   

   Premere il pulsante Altre informazioni per avviare la pagina Web delle guide introduttive.

   Per altre informazioni sull'avvio dell'applicazione in ogni piattaforma, vedere Avvio dell'applicazione in ogni piattaforma nell'approfondimento Xamarin.Forms della guida introduttiva.

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:

   

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:

   

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

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

   

   Premere il pulsante Altre informazioni per avviare la pagina Web delle guide introduttive.

   Per altre informazioni sull'avvio dell'applicazione in ogni piattaforma, vedere Avvio dell'applicazione in ogni piattaforma nell'approfondimento Xamarin.Forms della guida introduttiva.

Passaggi successivi

In questa guida introduttiva si è appreso come:

• Creare un'applicazione Xamarin.Forms 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 .

Continuare con la guida introduttiva successiva per aggiungere altre pagine all'applicazione Xamarin.Forms Shell.

Avanti

Collegamenti correlati

• Notes (esempio)
• Xamarin.Forms Approfondimento della guida introduttiva sulla shell