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#), assegnare al nuovo file il nome 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 visual >Xamarin.Forms> C#, denominare il nuovo file 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à utilizzata per la voce di 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 Editor oggetto 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 bindingnell'approfondimentoXamarin.Forms di 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 alla 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 del parametro di query. Pertanto, QueryParameterAttribute nel codice precedente viene specificato 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 il metodo SaveButton viene premuto, 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 il metodo DeleteButton viene premuto, viene eseguito il OnDeleteButtonClicked gestore eventi, che elimina il file, a condizione che esista e torni alla pagina precedente. Per altre informazioni sulla navigazione, vedere Esplorazione nella guida introduttiva allaXamarin.Forms shell.

    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. Nel progetto Notes di Esplora soluzioni 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 le 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 bindingnell'approfondimentoXamarin.Forms di avvio rapido.

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

  12. In Esplora soluzioni, nel progetto Notes 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 Esplorazione nell'approfondimento Xamarin.Forms della 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 NoteEntryPage, che 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 ad 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 assegnare alla nuova cartella il nome Models:

    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 Classe vuota generale>, assegnare al nuovo file il nome 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 > 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à utilizzata per la voce di 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 Editor oggetto 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 bindingnell'approfondimentoXamarin.Forms di avvio rapido.

    Salvare le modifiche in 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 QueryPropertyAttribute oggetto che consente di passare i dati alla 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, nel QueryParameterAttribute codice precedente viene specificato 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 sulla Note pagina.

    Quando viene premuto il OnSaveButtonClicked gestore eventi salva, 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.Button In entrambi i casi, il file viene archiviato nella cartella dei dati dell'applicazione locale, quindi il metodo torna alla pagina precedente. Quando vieneButton premuto Il gestore eventi viene premuto, che elimina il OnDeleteButtonClicked file, a condizione che esista e torna alla pagina precedente. Per altre informazioni sulla navigazione, vedere Navigazione nella Xamarin.Forms shell Guida introduttiva Approfondimento.

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

    Avviso

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

  10. Nel riquadrodella soluzione aprire NotesPage.xaml nella cartella Visualizzazioni.

  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. L'oggetto usa il CollectionView data binding per visualizzare le note recuperate dall'applicazione. Se si seleziona una nota, passare 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 bindingnell'approfondimentoXamarin.Forms di avvio rapido.

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

  12. Nel progetto Note del riquadro della soluzione 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 a NoteEntryPage, a condizione che un elemento nell'oggetto CollectionView sia selezionato, passando la Filename proprietà dell'oggetto selezionato Note come parametro di query alla pagina. Per altre informazioni sulla navigazione, vedere Navigazionenell'approfondimentoXamarin.Forms di avvio rapido.

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

    Avviso

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

  14. Nel progetto Note del riquadro della soluzione 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 NoteEntryPage, che non è rappresentata nella gerarchia visiva della shell. Questa pagina può quindi essere spostata sull'uso dello spostamento basato su URI, con il GoToAsync metodo .

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

  15. Nel progetto Note del riquadro della soluzione 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 proprietà nel costruttore e inizializza la FolderPathMainPage proprietà nell'oggetto sottoclassatoShell.App

    Salvare le modifiche in 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 riattivarla per assicurarsi che le note immesse siano state salvate nel dispositivo.

Passaggi successivi

In questo argomento di avvio rapido si è appreso come:

  • Aggiungere pagine aggiuntive 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.

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