Guida introduttiva alla creazione di un'applicazione Xamarin.Forms

Download Sample 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:

Notes ApplicationNotes About Page

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:

    New Solution

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

    Choose a Template

  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:

    Configure the Shell Application

    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 :

    Create the Shell Application

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

    Per altre informazioni sulla libreria .NET Standard creata, vedere Anatomia di un'applicazione Xamarin.Forms Shell nell'approfondimento della guida introduttiva allaXamarin.Forms shell.

  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 aggiungere una nuova cartella denominata Views nel progetto Notes.

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

    Add NotesPage

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

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

    Open 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 Editor oggetto 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 oggetto Grid, con e EditorGrid disposti verticalmente in un oggetto StackLayout. Per altre informazioni sulla creazione dell'interfaccia utente, vedere User interface in the Shell Quickstart Deep Dive (Approfondimento sull'interfaccia utente della shell).Xamarin.Forms

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

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

    Open 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 preme SaveButton , viene eseguito il OnSaveButtonClicked gestore eventi, che salva il contenuto dell'oggetto Editor nel file. Quando il metodo DeleteButton viene premuto, viene eseguito il OnDeleteButtonClicked gestore eventi, che elimina il file, purché esista e rimuove qualsiasi testo da Editor. Per altre informazioni sull'interazione dell'utente, vedere Rispondere all'interazione dell'utente nella guida introduttiva allaXamarin.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 visual >Xamarin.Forms> C#, denominare il nuovo file AboutPage e fare clic sul pulsante Aggiungi:

    Add AboutPage

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

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

    Open AboutPage.xaml

  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 oggetto StackLayout, 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 sull'interfaccia utente della shell).Xamarin.Forms

    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:

    Open AboutPage.xaml.cs

  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 nella guida introduttiva allaXamarin.Forms shell.

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

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

    Open AppShell.xaml

  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 accetta questi oggetti e produce l'interfaccia utente per il contenuto. Per altre informazioni sulla creazione dell'interfaccia utente, vedere User interface in the Shell Quickstart Deep Dive (Approfondimento sull'interfaccia utente della 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:

    Open AppShell.xaml.cs

  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 ad AppShell.xaml.cs premendo CTRL+S.

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

    Open App.xaml

  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 classe, responsabile della creazione di un'istanza App 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:

    Open App.xaml.cs

  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 (o premere F6). La soluzione viene compilata e nella barra di stato di Visual Studio viene visualizzato un messaggio di operazione completata:

    Build Successful

    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:

    Visual Studio Android Toolbar

    Notes in the Android Emulator

    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 per passare a AboutPage:

    Notes about page in the Android Emulator

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

    Per altre informazioni sull'avvio dell'applicazione in ogni piattaforma, vedere Avvio dell'applicazione in ogni piattaforma nell'approfondimento Xamarin.Forms di avvio rapido.

    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.

    Set Notes.iOS as Startup 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:

    Visual Studio iOS Toolbar

    Notes in the iOS Simulator

    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 per passare a AboutPage:

    Notes about page in the iOS Simulator

    Premere il pulsante Altre informazioni per avviare la pagina Web di avvio rapido.

    Per altre informazioni su come l'applicazione viene avviata in ogni piattaforma, vedere Avvio dell'applicazione in ogni piattaformanell'approfondimentoXamarin.Forms di avvio rapido.

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:

    New Solution

  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:

    Choose a Template

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

    Configure the Shell Application

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

    Configure the Shell Project

    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'applicazione Xamarin.Forms Shell nella Xamarin.Forms guida introduttiva di Shell.

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

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

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

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

    Add NotesPage

    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 Note fare doppio clic su NotesPage.xaml per aprirlo:

    Open 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 Editor oggetto per l'input di testo e due Button oggetti che indirizzano l'applicazione per salvare o eliminare un file. I due Button oggetti sono disposti orizzontalmente in un Gridoggetto , con l'oggetto Editor e Grid disposto verticalmente in un StackLayoutoggetto . Per altre informazioni sulla creazione dell'interfaccia utente, vedere Interfaccia utente nella Xamarin.Forms guida introduttiva di Shell Deep Dive.

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

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

    Open 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 viene premuto Il OnSaveButtonClicked gestore eventi viene premuto, che salva il contenuto del Editor file nel file.Button Quando l'oggetto DeleteButton viene premuto il gestore eventi viene eseguito, che elimina il OnDeleteButtonClicked file, purché esista e rimuove qualsiasi testo dall'oggetto Editor. Per altre informazioni sull'interazione dell'utente, vedere Risposta all'interazione dell'utente in Xamarin.Forms Shell Quickstart Deep Dive.

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

  13. Nel riquadro della soluzione selezionare la cartella Visualizzazioni, fare clic con il pulsante destro del mouse e selezionare Aggiungi > nuovo file.... Nella finestra di dialogo Nuovo file selezionare Form > Forms ContentPage XAML, assegnare un nome al nuovo file AboutPage e fare clic sul pulsante Nuovo:

    Add AboutPage

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

    Open AboutPage.xaml

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

  15. In AboutPage.xaml rimuovere tutto il codice 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 il testo e un Buttonoggetto . I due Label oggetti e sono disposti verticalmente in un StackLayoutoggetto , con l'oggetto Image e ButtonStackLayout disposti verticalmente in un oggetto Grid. Per altre informazioni sulla creazione dell'interfaccia utente, vedere Interfaccia utente nella Xamarin.Forms guida introduttiva di Shell Deep Dive.

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

  16. Nel progetto Note del riquadro della soluzione fare doppio clic su AboutPage.xaml.cs per aprirlo:

    Open AboutPage.xaml.cs

  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 Altre informazioniButton . Quando viene premuto 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 Risposta all'interazione dell'utente in Xamarin.Forms Shell Quickstart Deep Dive.

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

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

    Open AppShell.xaml

  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 accetta questi oggetti e produce l'interfaccia utente per il contenuto. Per altre informazioni sulla creazione dell'interfaccia utente, vedere Interfaccia utente nella Xamarin.Forms guida introduttiva di Shell Deep Dive.

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

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

    Open AppShell.xaml.cs

  21. In AppShell.xaml.cs rimuovere tutto il codice 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. Nel riquadro della soluzione, nel progetto Note fare doppio clic su App.xaml per aprirlo:

    Open App.xaml

  23. In App.xaml rimuovere tutto il codice 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 dell'istanza dell'applicazione.

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

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

    Open App.xaml.cs

  25. In App.xaml.cs rimuovere tutto il codice 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, che è responsabile dell'istanza App dell'applicazione. Inizializza la proprietà nell'oggetto MainPage sottoclassato Shell .

    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 creeranno e verrà visualizzato un messaggio di esito positivo nella barra degli strumenti Visual Studio per Mac:

    Build Successful

    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:

    Set iOS as Startup Project

  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:

    Visual Studio for Mac Toolbar

    Notes in the iOS Simulator

    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 per passare a AboutPage:

    Notes about page in the iOS Simulator

    Premere il pulsante Altre informazioni per avviare la pagina Web di avvio rapido.

    Per altre informazioni su come l'applicazione viene avviata in ogni piattaforma, vedere Avvio dell'applicazione in ogni piattaformanell'approfondimentoXamarin.Forms di avvio rapido.

  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:

    Set Android as Startup Project

  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 in the Android Emulator

    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 per passare a AboutPage:

    Notes about page in the Android Emulator

    Premere il pulsante Altre informazioni per avviare la pagina Web di avvio rapido.

    Per altre informazioni su come l'applicazione viene avviata in ogni piattaforma, vedere Avvio dell'applicazione in ogni piattaformanell'approfondimentoXamarin.Forms di avvio rapido.

Passaggi successivi

In questo argomento di avvio rapido 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 a questa Xamarin.Forms applicazione Shell.