Eseguire lo spostamento in un'applicazione Xamarin.Forms

Download Sample Scaricare l'esempio

In questo argomento di avvio rapido si apprenderà come:

  • Aggiungere altre pagine a un'applicazione Xamarin.Forms Shell.
  • Eseguire lo spostamento tra le pagine.
  • Usare il data binding per sincronizzare i dati tra gli elementi dell'interfaccia utente e la relativa origine dati.

La guida introduttiva illustra come trasformare un'applicazione Shell multipiattaforma Xamarin.Forms , in grado di archiviare una singola nota, in un'applicazione in grado di archiviare più note. L'applicazione finale è riportata di seguito:

Notes PageNote Entry Page

Prerequisiti

È consigliabile completare l'argomento di avvio rapido precedente prima di provare con questo. In alternativa, scaricare l'esempio di avvio rapido precedente e usarlo come punto di partenza per questo avvio rapido.

Aggiornare l'app con Visual Studio

  1. Avviare Visual Studio. Nella finestra di avvio fare clic sulla soluzione Notes nell'elenco di progetti/soluzioni recenti oppure fare clic su Apri un progetto o una soluzione e nella finestra di dialogo Apri progetto/soluzione selezionare il file della soluzione per il progetto Notes:

    Open Solution

  2. In Esplora soluzioni fare clic con il pulsante destro del mouse sul progetto Notes e scegliere Aggiungi > nuova cartella:

    Add New Folder

  3. In Esplora soluzioni assegnare alla nuova cartella il nome Models:

    Models Folder

  4. In Esplora soluzioni selezionare la cartella Modelli, fare clic con il pulsante destro del mouse e scegliere Aggiungi > classe...:

    Add New File

  5. Nella finestra di dialogo Aggiungi nuovo elemento selezionare Visual C# Items Class (Classe elementi > Visual C#), denominare il nuovo file Note e fare clic sul pulsante Aggiungi:

    Add Note Class

    Verrà aggiunta una classe denominata Note alla cartella Models del progetto Notes.

  6. In Note.cs rimuovere tutto il codice del modello e sostituirlo con il codice seguente:

    using System;
    
    namespace Notes.Models
    {
        public class Note
        {
            public string Filename { get; set; }
            public string Text { get; set; }
            public DateTime Date { get; set; }
        }
    }
    

    Questa classe definisce un modello Note che archivierà i dati relativi a ogni nota nell'applicazione.

    Salvare le modifiche apportate a Note.cs premendo CTRL+S.

  7. 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#, assegnare al nuovo file il nome NoteEntryPage e fare clic sul pulsante Aggiungi:

    Add Xamarin.Forms ContentPage

    Verrà aggiunta una nuova pagina denominata NoteEntryPage alla cartella Views del progetto. Questa pagina verrà usata per la voce della nota.

  8. In NoteEntryPage.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.NoteEntryPage"
                 Title="Note Entry">
        <!-- Layout children vertically -->
        <StackLayout Margin="20">
            <Editor Placeholder="Enter your note"
                    Text="{Binding Text}"
                    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. Le due istanze di Button sono disposte orizzontalmente in un oggetto Grid, con Editor e Grid disposti verticalmente in un oggetto StackLayout. L'Editor usa inoltre il data binding per eseguire il binding alla proprietà Text del modello Note. Per altre informazioni sul data binding, vedere Data binding in Deep Dive (Approfondimento di Xamarin.Forms avvio rapido).

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

  9. In NoteEntryPage.xaml.cs rimuovere tutto il codice del modello e sostituirlo con il codice seguente:

    using System;
    using System.IO;
    using Notes.Models;
    using Xamarin.Forms;
    
    namespace Notes.Views
    {
        [QueryProperty(nameof(ItemId), nameof(ItemId))]
        public partial class NoteEntryPage : ContentPage
        {
            public string ItemId
            {
                set
                {
                    LoadNote(value);
                }
            }
    
            public NoteEntryPage()
            {
                InitializeComponent();
    
                // Set the BindingContext of the page to a new Note.
                BindingContext = new Note();
            }
    
            void LoadNote(string filename)
            {
                try
                {
                    // Retrieve the note and set it as the BindingContext of the page.
                    Note note = new Note
                    {
                        Filename = filename,
                        Text = File.ReadAllText(filename),
                        Date = File.GetCreationTime(filename)
                    };
                    BindingContext = note;
                }
                catch (Exception)
                {
                    Console.WriteLine("Failed to load note.");
                }
            }
    
            async void OnSaveButtonClicked(object sender, EventArgs e)
            {
                var note = (Note)BindingContext;
    
                if (string.IsNullOrWhiteSpace(note.Filename))
                {
                    // Save the file.
                    var filename = Path.Combine(App.FolderPath, $"{Path.GetRandomFileName()}.notes.txt");
                    File.WriteAllText(filename, note.Text);
                }
                else
                {
                    // Update the file.
                    File.WriteAllText(note.Filename, note.Text);
                }
    
                // Navigate backwards
                await Shell.Current.GoToAsync("..");
            }
    
            async void OnDeleteButtonClicked(object sender, EventArgs e)
            {
                var note = (Note)BindingContext;
    
                // Delete the file.
                if (File.Exists(note.Filename))
                {
                    File.Delete(note.Filename);
                }
    
                // Navigate backwards
                await Shell.Current.GoToAsync("..");
            }
        }
    }
    

    Questo codice archivia un'istanza di Note, che rappresenta una singola nota, nella proprietà BindingContext della pagina. La classe è decorata con un oggetto QueryPropertyAttribute che consente di passare i dati nella pagina, durante la navigazione, tramite parametri di query. Il primo argomento per l'oggetto QueryPropertyAttribute specifica il nome della proprietà che riceverà i dati, con il secondo argomento che specifica l'ID parametro di query. Pertanto, QueryParameterAttribute nel codice precedente specifica che la ItemId proprietà riceverà i dati passati nel ItemId parametro di query dall'URI specificato in una GoToAsync chiamata al metodo. La ItemId proprietà chiama quindi il LoadNote metodo per creare un Note oggetto dal file nel dispositivo e imposta l'oggetto BindingContext della pagina sull'oggetto Note .

    Quando si preme SaveButton , viene eseguito il OnSaveButtonClicked gestore eventi, che salva il contenuto di Editor in un nuovo file con un nome file generato in modo casuale o in un file esistente se viene aggiornata una nota. In entrambi i casi, il file viene archiviato nella cartella dei dati dell'applicazione locale, quindi il metodo torna alla pagina precedente. Quando si preme DeleteButton , viene eseguito il OnDeleteButtonClicked gestore eventi, che elimina il file, a condizione che esista e si sposta di nuovo alla pagina precedente. Per altre informazioni sulla navigazione, vedere Navigazione nella guida introduttiva alla Xamarin.Forms shell Approfondimento.

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

    Avviso

    L'applicazione non verrà attualmente compilata a causa di errori che verranno corretti nei passaggi successivi.

  10. In Esplora soluzioni, nel progetto Notes aprire NotesPage.xaml nella cartella Views.

  11. 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">
        <!-- Add an item to the toolbar -->
        <ContentPage.ToolbarItems>
            <ToolbarItem Text="Add"
                         Clicked="OnAddClicked" />
        </ContentPage.ToolbarItems>
    
        <!-- Display notes in a list -->
        <CollectionView x:Name="collectionView"
                        Margin="20"
                        SelectionMode="Single"
                        SelectionChanged="OnSelectionChanged">
            <CollectionView.ItemsLayout>
                <LinearItemsLayout Orientation="Vertical"
                                   ItemSpacing="10" />
            </CollectionView.ItemsLayout>
            <!-- Define the appearance of each item in the list -->
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout>
                        <Label Text="{Binding Text}"
                               FontSize="Medium"/>
                        <Label Text="{Binding Date}"
                               TextColor="Silver"
                               FontSize="Small" />
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </ContentPage>
    

    Questo codice definisce in modo dichiarativo l'interfaccia utente per la pagina costituita da un elemento CollectionView e da un elemento ToolbarItem. CollectionView usa il data binding per visualizzare eventuali note recuperate dall'applicazione. Se si seleziona una nota, si passerà alla NoteEntryPage posizione in cui è possibile modificare la nota. In alternativa, è possibile creare una nuova nota premendo ToolbarItem. Per altre informazioni sul data binding, vedere Data binding in Deep Dive (Approfondimento di Xamarin.Forms avvio rapido).

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

  12. Nel progetto Notes Esplora soluzioni espandere NotesPage.xaml nella cartella Views e aprire NotesPage.xaml.cs.

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

    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using Notes.Models;
    using Xamarin.Forms;
    
    namespace Notes.Views
    {
        public partial class NotesPage : ContentPage
        {
            public NotesPage()
            {
                InitializeComponent();
            }
    
            protected override void OnAppearing()
            {
                base.OnAppearing();
    
                var notes = new List<Note>();
    
                // Create a Note object from each file.
                var files = Directory.EnumerateFiles(App.FolderPath, "*.notes.txt");
                foreach (var filename in files)
                {
                    notes.Add(new Note
                    {
                        Filename = filename,
                        Text = File.ReadAllText(filename),
                        Date = File.GetCreationTime(filename)
                    });
                }
    
                // Set the data source for the CollectionView to a
                // sorted collection of notes.
                collectionView.ItemsSource = notes
                    .OrderBy(d => d.Date)
                    .ToList();
            }
    
            async void OnAddClicked(object sender, EventArgs e)
            {
                // Navigate to the NoteEntryPage, without passing any data.
                await Shell.Current.GoToAsync(nameof(NoteEntryPage));
            }
    
            async void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
            {
                if (e.CurrentSelection != null)
                {
                    // Navigate to the NoteEntryPage, passing the filename as a query parameter.
                    Note note = (Note)e.CurrentSelection.FirstOrDefault();
                    await Shell.Current.GoToAsync($"{nameof(NoteEntryPage)}?{nameof(NoteEntryPage.ItemId)}={note.Filename}");
                }
            }
        }
    }
    

    Questo codice definisce le funzionalità per NotesPage. Quando viene visualizzata la pagina, viene eseguito il metodo OnAppearing, che popola CollectionView con le eventuali note recuperate dalla cartella dati dell'applicazione locale. Quando si preme ToolbarItem, viene eseguito il gestore dell'evento OnAddClicked. Questo metodo passa a NoteEntryPage. Quando viene selezionato un elemento in CollectionView, viene eseguito il gestore dell'evento OnSelectionChanged. Questo metodo passa all'oggetto NoteEntryPage, a condizione che sia selezionato un elemento in CollectionView , passando la Filename proprietà dell'oggetto selezionato Note come parametro di query alla pagina. Per altre informazioni sulla navigazione, vedere Navigazione nell'argomento Di approfondimento della Xamarin.Forms guida introduttiva.

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

    Avviso

    L'applicazione non verrà attualmente compilata a causa di errori che verranno corretti nei passaggi successivi.

  14. In Esplora soluzioni, nel progetto Notes espandere AppShell.xaml e aprire AppShell.xaml.cs. quindi sostituire il codice esistente con il seguente:

    using Notes.Views;
    using Xamarin.Forms;
    
    namespace Notes
    {
        public partial class AppShell : Shell
        {
            public AppShell()
            {
                InitializeComponent();
                Routing.RegisterRoute(nameof(NoteEntryPage), typeof(NoteEntryPage));
            }
        }
    }
    

    Questo codice registra una route per , NoteEntryPageche non è rappresentata nella gerarchia visiva della shell (AppShell.xaml). È quindi possibile passare a questa pagina usando lo spostamento basato su URI, con il GoToAsync metodo .

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

  15. In Esplora soluzioni, nel progetto Notes espandere App.xaml e aprire App.xaml.cs. quindi sostituire il codice esistente con il seguente:

    using System;
    using System.IO;
    using Xamarin.Forms;
    
    namespace Notes
    {
        public partial class App : Application
        {
            public static string FolderPath { get; private set; }
    
            public App()
            {
                InitializeComponent();
                FolderPath = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData));
                MainPage = new AppShell();
            }
    
            protected override void OnStart()
            {
            }
    
            protected override void OnSleep()
            {
            }
    
            protected override void OnResume()
            {
            }
        }
    }
    
    

    Questo codice aggiunge una dichiarazione per lo spazio dei nomi System.IO e aggiunge una dichiarazione per una proprietà FolderPath statica di tipo string. La proprietà FolderPath viene usata per archiviare il percorso nel dispositivo in cui verranno archiviati i dati della nota. Inoltre, il codice inizializza la FolderPath proprietà nel App costruttore e inizializza la MainPage proprietà nell'oggetto sottoclassato Shell .

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

  16. Compilare ed eseguire il progetto in ogni piattaforma. Per altre informazioni, vedere Compilazione dell'avvio rapido.

    In NotesPage premere il pulsante Aggiungi per passare a NoteEntryPage e immettere una nota. Dopo aver salvato la nota, l'applicazione tornerà a NotesPage.

    Immettere diverse note, di lunghezza variabile, per osservare il comportamento dell'applicazione. Chiudere l'applicazione e avviarla nuovamente per assicurarsi che le note immesse siano state salvate nel dispositivo.

Aggiornare l'app con Visual Studio per Mac

  1. Avviare Visual Studio per Mac. Nella finestra iniziale fare clic su Apri e nella finestra di dialogo selezionare il file della soluzione per il progetto Notes:

    Open Solution

  2. Nel riquadro della soluzione fare clic con il pulsante destro del mouse sul progetto Notes e scegliere Aggiungi > nuova cartella:

    Add New Folder

  3. Nella finestra di dialogo Nuova cartella denominare la nuova cartella Modelli:

    Models Folder

  4. Nel riquadro della soluzione selezionare la cartella Modelli, fare clic con il pulsante destro del mouse e scegliere Aggiungi > nuova classe...:

    Add New File

  5. Nella finestra di dialogo Nuovo file selezionare General Empty Class (Classe vuota generale>), denominare il nuovo file Note e fare clic sul pulsante Nuovo:

    Add Note Class

    Verrà aggiunta una classe denominata Note alla cartella Models del progetto Notes.

  6. In Note.cs rimuovere tutto il codice del modello e sostituirlo con il codice seguente:

    using System;
    
    namespace Notes.Models
    {
        public class Note
        {
            public string Filename { get; set; }
            public string Text { get; set; }
            public DateTime Date { get; set; }
        }
    }
    

    Questa classe definisce un modello Note che archivierà i dati relativi a ogni nota nell'applicazione.

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

  7. Nel riquadro della soluzione selezionare il progetto Notes, 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 NoteEntryPage e fare clic sul pulsante Nuovo:

    Add Xamarin.Forms ContentPage

    Verrà aggiunta una nuova pagina denominata NoteEntryPage alla cartella Views del progetto. Questa pagina verrà usata per la voce della nota.

  8. In NoteEntryPage.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.NoteEntryPage"
                 Title="Note Entry">
        <!-- Layout children vertically -->
        <StackLayout Margin="20">
            <Editor Placeholder="Enter your note"
                    Text="{Binding Text}"
                    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. Le due istanze di Button sono disposte orizzontalmente in un oggetto Grid, con Editor e Grid disposti verticalmente in un oggetto StackLayout. L'Editor usa inoltre il data binding per eseguire il binding alla proprietà Text del modello Note. Per altre informazioni sul data binding, vedere Data binding in Deep Dive (Approfondimento di Xamarin.Forms avvio rapido).

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

  9. In NoteEntryPage.xaml.cs rimuovere tutto il codice del modello e sostituirlo con il codice seguente:

    using System;
    using System.IO;
    using Notes.Models;
    using Xamarin.Forms;
    
    namespace Notes.Views
    {
        [QueryProperty(nameof(ItemId), nameof(ItemId))]
        public partial class NoteEntryPage : ContentPage
        {
            public string ItemId
            {
                set
                {
                    LoadNote(value);
                }
            }
    
            public NoteEntryPage()
            {
                InitializeComponent();
    
                // Set the BindingContext of the page to a new Note.
                BindingContext = new Note();
            }
    
            void LoadNote(string filename)
            {
                try
                {
                    // Retrieve the note and set it as the BindingContext of the page.
                    Note note = new Note
                    {
                        Filename = filename,
                        Text = File.ReadAllText(filename),
                        Date = File.GetCreationTime(filename)
                    };
                    BindingContext = note;
                }
                catch (Exception)
                {
                    Console.WriteLine("Failed to load note.");
                }
            }
    
            async void OnSaveButtonClicked(object sender, EventArgs e)
            {
                var note = (Note)BindingContext;
    
                if (string.IsNullOrWhiteSpace(note.Filename))
                {
                    // Save the file.
                    var filename = Path.Combine(App.FolderPath, $"{Path.GetRandomFileName()}.notes.txt");
                    File.WriteAllText(filename, note.Text);
                }
                else
                {
                    // Update the file.
                    File.WriteAllText(note.Filename, note.Text);
                }
    
                // Navigate backwards
                await Shell.Current.GoToAsync("..");
            }
    
            async void OnDeleteButtonClicked(object sender, EventArgs e)
            {
                var note = (Note)BindingContext;
    
                // Delete the file.
                if (File.Exists(note.Filename))
                {
                    File.Delete(note.Filename);
                }
    
                // Navigate backwards
                await Shell.Current.GoToAsync("..");
            }
        }
    }
    

    Questo codice archivia un'istanza di Note, che rappresenta una singola nota, nella proprietà BindingContext della pagina. La classe è decorata con un oggetto QueryPropertyAttribute che consente di passare i dati nella pagina, durante la navigazione, tramite parametri di query. Il primo argomento per l'oggetto QueryPropertyAttribute specifica il nome della proprietà che riceverà i dati, con il secondo argomento che specifica l'ID parametro di query. Pertanto, QueryParameterAttribute nel codice precedente specifica che la ItemId proprietà riceverà i dati passati nel ItemId parametro di query dall'URI specificato in una GoToAsync chiamata al metodo. La ItemId proprietà chiama quindi il LoadNote metodo per creare un Note oggetto dal file nel dispositivo e imposta l'oggetto BindingContext della pagina sull'oggetto Note .

    Quando si preme SaveButton , viene eseguito il OnSaveButtonClicked gestore eventi, che salva il contenuto di Editor in un nuovo file con un nome file generato in modo casuale o in un file esistente se viene aggiornata una nota. In entrambi i casi, il file viene archiviato nella cartella dei dati dell'applicazione locale, quindi il metodo torna alla pagina precedente. Quando si preme DeleteButton , viene eseguito il OnDeleteButtonClicked gestore eventi, che elimina il file, a condizione che esista e si sposta di nuovo alla pagina precedente. Per altre informazioni sulla navigazione, vedere Navigazione nella guida introduttiva alla Xamarin.Forms shell Approfondimento.

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

    Avviso

    L'applicazione non verrà attualmente compilata a causa di errori che verranno corretti nei passaggi successivi.

  10. Nel riquadro della soluzione aprire NotesPage.xaml nella cartella Views nel progetto Notes.

  11. 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">
        <!-- Add an item to the toolbar -->
        <ContentPage.ToolbarItems>
            <ToolbarItem Text="Add"
                         Clicked="OnAddClicked" />
        </ContentPage.ToolbarItems>
    
        <!-- Display notes in a list -->
        <CollectionView x:Name="collectionView"
                        Margin="20"
                        SelectionMode="Single"
                        SelectionChanged="OnSelectionChanged">
            <CollectionView.ItemsLayout>
                <LinearItemsLayout Orientation="Vertical"
                                   ItemSpacing="10" />
            </CollectionView.ItemsLayout>
            <!-- Define the appearance of each item in the list -->
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout>
                        <Label Text="{Binding Text}"
                               FontSize="Medium"/>
                        <Label Text="{Binding Date}"
                               TextColor="Silver"
                               FontSize="Small" />
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </ContentPage>
    

    Questo codice definisce in modo dichiarativo l'interfaccia utente per la pagina costituita da un elemento CollectionView e da un elemento ToolbarItem. CollectionView usa il data binding per visualizzare eventuali note recuperate dall'applicazione. Se si seleziona una nota, si passerà alla NoteEntryPage posizione in cui è possibile modificare la nota. In alternativa, è possibile creare una nuova nota premendo ToolbarItem. Per altre informazioni sul data binding, vedere Data binding in Deep Dive (Approfondimento di Xamarin.Forms avvio rapido).

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

  12. Nel riquadro della soluzione espandere NotesPage.xaml nella cartella Visualizzazioni e aprire NotesPage.xaml.cs.

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

    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using Notes.Models;
    using Xamarin.Forms;
    
    namespace Notes.Views
    {
        public partial class NotesPage : ContentPage
        {
            public NotesPage()
            {
                InitializeComponent();
            }
    
            protected override void OnAppearing()
            {
                base.OnAppearing();
    
                var notes = new List<Note>();
    
                // Create a Note object from each file.
                var files = Directory.EnumerateFiles(App.FolderPath, "*.notes.txt");
                foreach (var filename in files)
                {
                    notes.Add(new Note
                    {
                        Filename = filename,
                        Text = File.ReadAllText(filename),
                        Date = File.GetCreationTime(filename)
                    });
                }
    
                // Set the data source for the CollectionView to a
                // sorted collection of notes.
                collectionView.ItemsSource = notes
                    .OrderBy(d => d.Date)
                    .ToList();
            }
    
            async void OnAddClicked(object sender, EventArgs e)
            {
                // Navigate to the NoteEntryPage, without passing any data.
                await Shell.Current.GoToAsync(nameof(NoteEntryPage));
            }
    
            async void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
            {
                if (e.CurrentSelection != null)
                {
                    // Navigate to the NoteEntryPage, passing the filename as a query parameter.
                    Note note = (Note)e.CurrentSelection.FirstOrDefault();
                    await Shell.Current.GoToAsync($"{nameof(NoteEntryPage)}?{nameof(NoteEntryPage.ItemId)}={note.Filename}");
                }
            }
        }
    }
    

    Questo codice definisce le funzionalità per NotesPage. Quando viene visualizzata la pagina, viene eseguito il metodo OnAppearing, che popola CollectionView con le eventuali note recuperate dalla cartella dati dell'applicazione locale. Quando si preme ToolbarItem, viene eseguito il gestore dell'evento OnAddClicked. Questo metodo passa a NoteEntryPage. Quando viene selezionato un elemento in CollectionView, viene eseguito il gestore dell'evento OnSelectionChanged. Questo metodo passa all'oggetto NoteEntryPage, a condizione che sia selezionato un elemento in CollectionView , passando la Filename proprietà dell'oggetto selezionato Note come parametro di query alla pagina. Per altre informazioni sulla navigazione, vedere Navigazione nell'argomento Di approfondimento della Xamarin.Forms guida introduttiva.

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

    Avviso

    L'applicazione non verrà attualmente compilata a causa di errori che verranno corretti nei passaggi successivi.

  14. Nel riquadro della soluzione espandere AppShell.xaml nel progetto Notes e aprire AppShell.xaml.cs. quindi sostituire il codice esistente con il seguente:

    using Notes.Views;
    using Xamarin.Forms;
    
    namespace Notes
    {
        public partial class AppShell : Shell
        {
            public AppShell()
            {
                InitializeComponent();
                Routing.RegisterRoute(nameof(NoteEntryPage), typeof(NoteEntryPage));
            }
        }
    }
    

    Questo codice registra una route per , NoteEntryPageche non è rappresentata nella gerarchia visiva della shell. È quindi possibile passare a questa pagina usando lo spostamento basato su URI, con il GoToAsync metodo .

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

  15. Nel riquadro della soluzione espandere App.xaml nel progetto Notes e aprire App.xaml.cs. quindi sostituire il codice esistente con il seguente:

    using System;
    using System.IO;
    using Xamarin.Forms;
    
    namespace Notes
    {
        public partial class App : Application
        {
            public static string FolderPath { get; private set; }
    
            public App()
            {
                InitializeComponent();
                FolderPath = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData));
                MainPage = new AppShell();
            }
    
            protected override void OnStart()
            {
            }
    
            protected override void OnSleep()
            {
            }
    
            protected override void OnResume()
            {
            }
        }
    }
    
    

    Questo codice aggiunge una dichiarazione per lo spazio dei nomi System.IO e aggiunge una dichiarazione per una proprietà FolderPath statica di tipo string. La proprietà FolderPath viene usata per archiviare il percorso nel dispositivo in cui verranno archiviati i dati della nota. Inoltre, il codice inizializza la FolderPath proprietà nel App costruttore e inizializza la MainPage proprietà nell'oggetto sottoclassato Shell .

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

  16. Compilare ed eseguire il progetto in ogni piattaforma. Per altre informazioni, vedere Compilazione dell'avvio rapido.

    In NotesPage premere il pulsante Aggiungi per passare a NoteEntryPage e immettere una nota. Dopo aver salvato la nota, l'applicazione tornerà a NotesPage.

    Immettere diverse note, di lunghezza variabile, per osservare il comportamento dell'applicazione. Chiudere l'applicazione e avviarla nuovamente per assicurarsi che le note immesse siano state salvate nel dispositivo.

Passaggi successivi

In questa guida introduttiva si è appreso come:

  • Aggiungere altre pagine a un'applicazione Xamarin.Forms Shell.
  • Eseguire lo spostamento tra le pagine.
  • Usare il data binding per sincronizzare i dati tra gli elementi dell'interfaccia utente e la relativa origine dati.

Passare alla guida introduttiva successiva per modificare l'applicazione in modo che archivii i dati in un database di SQLite.NET locale.