Eseguire lo spostamento in un'applicazione Novell. Forms a più paginePerform Navigation in a Multi-Page Xamarin.Forms Application

Scaricare esempio Scaricare l'esempioDownload Sample Download the sample

In questa Guida introduttiva si apprenderà come:In this quickstart, you will learn how to:

  • Aggiungere altre pagine a una soluzione Novell. Forms.Add additional pages to a Xamarin.Forms solution.
  • Eseguire lo spostamento tra le pagine.Perform navigation between pages.
  • Utilizzare data binding per sincronizzare i dati tra gli elementi dell'interfaccia utente e la relativa origine dati.Use data binding to synchronize data between user interface elements and their data source.

Questa Guida introduttiva illustra come trasformare un'applicazione Novell. Forms multipiattaforma a pagina singola, in grado di archiviare una singola nota, in un'applicazione a più pagine, in grado di archiviare più note.The quickstart walks through how to turn a single page cross-platform Xamarin.Forms application, capable of storing a single note, into a multi-page application, capable of storing multiple notes. Il risultato è riportato di seguito:The final application is shown below:

della pagina note

PrerequisitiPrerequisites

Prima di provare questa Guida introduttiva, è necessario completare correttamente la Guida introduttiva precedente .You should successfully complete the previous quickstart before attempting this quickstart. In alternativa, scaricare l' esempio di Guida introduttiva precedente e usarlo come punto di partenza per questa Guida introduttiva.Alternatively, download the previous quickstart sample and use it as the starting point for this quickstart.

Aggiornare l'app con Visual StudioUpdate the app with Visual Studio

  1. Avviare Visual Studio.Launch Visual Studio. Nella finestra di avvio fare clic sulla soluzione Note nell'elenco progetti/soluzioni recenti oppure fare clic su Apri un progetto o una soluzionee nella finestra di dialogo Apri progetto/soluzione selezionare il file di soluzione per il progetto note:In the start window, click the Notes solution in the recent projects/solutions list, or click Open a project or solution, and in the Open Project/Solution dialog select the solution file for the Notes project:

  2. In Esplora soluzionifare clic con il pulsante destro del mouse sul progetto Notes e scegliere Aggiungi > nuova cartella:In Solution Explorer, right-click on the Notes project and select Add > New Folder:

  3. In Esplora soluzioniassegnare un nome ai nuovi modellidi cartella:In Solution Explorer, name the new folder Models:

  4. In Esplora soluzioniselezionare la cartella modelli , fare clic con il pulsante destro del mouse e scegliere Aggiungi > nuovo elemento... :In Solution Explorer, select the Models folder, right-click, and select Add > New Item...:

  5. Nella finestra di dialogo Aggiungi nuovo elemento selezionare elementi C# visivi > classe, assegnare un nome alla Notadel nuovo file, quindi fare clic sul pulsante Aggiungi :In the Add New Item dialog, select Visual C# Items > Class, name the new file Note, and click the Add button:

    Verrà aggiunta una classe denominata Nota alla cartella Models del progetto Notes .This will add a class named Note to the Models folder of the Notes project.

  6. In note.csrimuovere tutto il codice del modello e sostituirlo con il codice seguente:In Note.cs, remove all of the template code and replace it with the following code:

    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 Note modello in cui vengono archiviati i dati relativi a ogni nota nell'applicazione.This class defines a Note model that will store data about each note in the application.

    Salvare le modifiche apportate a note.cs premendo CTRL + Se chiudere il file.Save the changes to Note.cs by pressing CTRL+S, and close the file.

  7. In Esplora soluzionifare clic con il pulsante destro del mouse sul progetto Notes e scegliere Aggiungi > nuovo elemento.. . Nella finestra di dialogo Aggiungi nuovo elemento selezionare elementi C# visivi > pagina contenuto > Novell. Forms, assegnare al nuovo file il nome NoteEntryPagee fare clic sul pulsante Aggiungi :In Solution Explorer, right-click on the Notes project and select Add > New Item... In the Add New Item dialog, select Visual C# Items > Xamarin.Forms > Content Page, name the new file NoteEntryPage, and click the Add button:

    Verrà aggiunta una nuova pagina denominata NoteEntryPage alla cartella radice del progetto.This will add a new page named NoteEntryPage to the root folder of the project. Questa pagina sarà la seconda pagina dell'applicazione.This page will be the second page in the application.

  8. In NoteEntryPage. XAMLrimuovere tutto il codice del modello e sostituirlo con il codice seguente:In NoteEntryPage.xaml, remove all of the template code and replace it with the following code:

    <?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.NoteEntryPage"
                 Title="Note Entry">
        <StackLayout Margin="20">
            <Editor Placeholder="Enter your note"
                    Text="{Binding Text}"
                    HeightRequest="100" />
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </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, che Editor è costituita da un oggetto Button per l'input di testo e da due istanze che indirizzano l'applicazione al salvataggio o all'eliminazione di un file.This code declaratively defines the user interface for the page, which consists of an Editor for text input, and two Button instances that direct the application to save or delete a file. Le due Button istanze sono disposte orizzontalmente in Gridun oggetto, Editor con Grid l'oggetto e viene disposto verticalmente StackLayoutin un oggetto.The two Button instances are horizontally laid out in a Grid, with the Editor and Grid being vertically laid out in a StackLayout. Inoltre, Editor utilizza Data Binding per eseguire l'associazione Text alla proprietà del Note modello.In addition, the Editor uses data binding to bind to the Text property of the Note model. Per ulteriori informazioni su data binding, vedere Data Binding nella Guida introduttiva a Novell. Forms.For more information about data binding, see Data binding in the Xamarin.Forms Quickstart Deep Dive.

    Salvare le modifiche apportate a NoteEntryPage. XAML premendo CTRL + Se chiudere il file.Save the changes to NoteEntryPage.xaml by pressing CTRL+S, and close the file.

  9. In NoteEntryPage.XAML.csrimuovere tutto il codice del modello e sostituirlo con il codice seguente:In NoteEntryPage.xaml.cs, remove all of the template code and replace it with the following code:

    using System;
    using System.IO;
    using Xamarin.Forms;
    using Notes.Models;
    
    namespace Notes
    {
        public partial class NoteEntryPage : ContentPage
        {
            public NoteEntryPage()
            {
                InitializeComponent();
            }
    
            async void OnSaveButtonClicked(object sender, EventArgs e)
            {
                var note = (Note)BindingContext;
    
                if (string.IsNullOrWhiteSpace(note.Filename))
                {
                    // Save
                    var filename = Path.Combine(App.FolderPath, $"{Path.GetRandomFileName()}.notes.txt");
                    File.WriteAllText(filename, note.Text);
                }
                else
                {
                    // Update
                    File.WriteAllText(note.Filename, note.Text);
                }
    
                await Navigation.PopAsync();
            }
    
            async void OnDeleteButtonClicked(object sender, EventArgs e)
            {
                var note = (Note)BindingContext;
    
                if (File.Exists(note.Filename))
                {
                    File.Delete(note.Filename);
                }
    
                await Navigation.PopAsync();
            }
        }
    }
    

    Questo codice archivia un' Note istanza di, che rappresenta una singola nota, nell' BindingContext oggetto della pagina.This code stores a Note instance, which represents a single note, in the BindingContext of the page. Quando viene Button premuto il pulsante Salva OnSaveButtonClicked , viene eseguito il gestore eventi, il Editor quale salva il contenuto di in un nuovo file con un nome file generato in modo casuale o in un file esistente se viene aggiornata una nota.When the Save Button is pressed the OnSaveButtonClicked event handler is executed, which either saves the content of the Editor to a new file with a randomly generated filename, or to an existing file if a note is being updated. In entrambi i casi, il file è archiviato nella cartella dei dati dell'applicazione locale per l'applicazione.In both cases, the file is stored in the local application data folder for the application. Il metodo torna quindi alla pagina precedente.Then the method navigates back to the previous page. Quando viene Button premuto il pulsante Elimina OnDeleteButtonClicked , viene eseguito il gestore dell'evento, che elimina il file, purché esista, e torna alla pagina precedente.When the Delete Button is pressed the OnDeleteButtonClicked event handler is executed, which deletes the file, provided that it exists, and navigates back to the previous page. Per altre informazioni sulla navigazione, vedere navigazione nella Guida introduttiva a Novell. Forms.For more information about navigation, see Navigation in the Xamarin.Forms Quickstart Deep Dive.

    Salvare le modifiche apportate a NoteEntryPage.XAML.cs premendo CTRL + Se chiudere il file.Save the changes to NoteEntryPage.xaml.cs by pressing CTRL+S, and close the file.

    Avviso

    Il tentativo di compilare l'applicazione a questo punto genererà errori che verranno corretti nei passaggi successivi.Attempting to build the application at this point will result in errors that will be fixed in subsequent steps.

  10. In Esplora soluzionifare clic con il pulsante destro del mouse sul progetto Notes e scegliere Aggiungi > nuovo elemento.. . Nella finestra di dialogo Aggiungi nuovo elemento selezionare elementi C# visivi > pagina contenuto > Novell. Forms, assegnare al nuovo file il nome NotesPagee fare clic sul pulsante Aggiungi .In Solution Explorer, right-click on the Notes project and select Add > New Item... In the Add New Item dialog, select Visual C# Items > Xamarin.Forms > Content Page, name the new file NotesPage, and click the Add button.

    Verrà aggiunta una pagina denominata NotesPage alla cartella radice del progetto.This will add a page named NotesPage to the root folder of the project. Questa pagina sarà la pagina radice dell'applicazione.This page will be the root page of the application.

  11. In NotesPage. XAMLrimuovere tutto il codice del modello e sostituirlo con il codice seguente:In NotesPage.xaml, remove all of the template code and replace it with the following code:

    <?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.NotesPage"
                 Title="Notes">
        <ContentPage.ToolbarItems>
            <ToolbarItem Text="+"
                         Clicked="OnNoteAddedClicked" />
        </ContentPage.ToolbarItems>
        <ListView x:Name="listView"
                  Margin="20"
                  ItemSelected="OnListViewItemSelected">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding Text}"
                              Detail="{Binding Date}" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </ContentPage>
    

    Questo codice definisce in modo dichiarativo l'interfaccia utente per la pagina, che ListView è costituita da un oggetto e un oggetto. ToolbarItemThis code declaratively defines the user interface for the page, which consists of a ListView and a ToolbarItem. Il ListView USA Data Binding per visualizzare eventuali note recuperate dall'applicazione e la NoteEntryPage selezione di una nota passerà alla posizione in cui è possibile modificare la nota.The ListView uses data binding to display any notes that are retrieved by the application, and selecting a note will navigate to the NoteEntryPage where the note can be modified. In alternativa, è possibile creare una nuova nota premendo il ToolbarItem.Alternatively, a new note can be created by pressing the ToolbarItem. Per ulteriori informazioni su data binding, vedere Data Binding nella Guida introduttiva a Novell. Forms.For more information about data binding, see Data binding in the Xamarin.Forms Quickstart Deep Dive.

    Salvare le modifiche apportate a NotesPage. XAML premendo CTRL + Se chiudere il file.Save the changes to NotesPage.xaml by pressing CTRL+S, and close the file.

  12. In NotesPage.XAML.csrimuovere tutto il codice del modello e sostituirlo con il codice seguente:In NotesPage.xaml.cs, remove all of the template code and replace it with the following code:

    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using Xamarin.Forms;
    using Notes.Models;
    
    namespace Notes
    {
        public partial class NotesPage : ContentPage
        {
            public NotesPage()
            {
                InitializeComponent();
            }
    
            protected override void OnAppearing()
            {
                base.OnAppearing();
    
                var notes = new List<Note>();
    
                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)
                    });
                }
    
                listView.ItemsSource = notes
                    .OrderBy(d => d.Date)
                    .ToList();
            }
    
            async void OnNoteAddedClicked(object sender, EventArgs e)
            {
                await Navigation.PushAsync(new NoteEntryPage
                {
                    BindingContext = new Note()
                });
            }
    
            async void OnListViewItemSelected(object sender, SelectedItemChangedEventArgs e)
            {
                if (e.SelectedItem != null)
                {
                    await Navigation.PushAsync(new NoteEntryPage
                    {
                        BindingContext = e.SelectedItem as Note
                    });
                }
            }
        }
    }
    

    Questo codice definisce la funzionalità per l' NotesPageoggetto.This code defines the functionality for the NotesPage. Quando viene visualizzata la pagina, OnAppearing viene eseguito il metodo, che consente ListView di popolare con le eventuali note recuperate dalla cartella dati applicazione locale.When the page appears, the OnAppearing method is executed, which populates the ListView with any notes that have been retrieved from the local application data folder. Quando viene premuto, il OnNoteAddedClicked gestore eventi viene eseguito. ToolbarItemWhen the ToolbarItem is pressed the OnNoteAddedClicked event handler is executed. Questo metodo passa NoteEntryPagea, impostando l'oggetto BindingContext di NoteEntryPage su una nuova Note istanza di.This method navigates to the NoteEntryPage, setting the BindingContext of the NoteEntryPage to a new Note instance. Quando ListView viene selezionato un elemento in, viene OnListViewItemSelected eseguito il gestore eventi.When an item in the ListView is selected the OnListViewItemSelected event handler is executed. Questo metodo consente di passare a NoteEntryPage, impostando BindingContext il valore NoteEntryPage di sull'istanza Note di selezionata.This method navigates to the NoteEntryPage, setting the BindingContext of the NoteEntryPage to the selected Note instance. Per altre informazioni sulla navigazione, vedere navigazione nella Guida introduttiva a Novell. Forms.For more information about navigation, see Navigation in the Xamarin.Forms Quickstart Deep Dive.

    Salvare le modifiche apportate a NotesPage.XAML.cs premendo CTRL + Se chiudere il file.Save the changes to NotesPage.xaml.cs by pressing CTRL+S, and close the file.

    Avviso

    Il tentativo di compilare l'applicazione a questo punto genererà errori che verranno corretti nei passaggi successivi.Attempting to build the application at this point will result in errors that will be fixed in subsequent steps.

  13. In Esplora soluzionifare doppio clic su app.XAML.cs per aprirlo.In Solution Explorer, double-click App.xaml.cs to open it. Sostituire quindi il codice esistente con il codice seguente:Then replace the existing code with the following code:

    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 NavigationPage(new NotesPage());
            }
            // ...
        }
    }
    

    Questo codice aggiunge una dichiarazione dello spazio dei System.IO nomi per lo spazio dei nomi e aggiunge una FolderPath dichiarazione per una stringproprietà statica di tipo.This code adds a namespace declaration for the System.IO namespace, and adds a declaration for a static FolderPath property of type string. La FolderPath proprietà viene usata per archiviare il percorso nel dispositivo in cui verranno archiviati i dati di nota.The FolderPath property is used to store the path on the device where note data will be stored. Inoltre, il codice inizializza la FolderPath proprietà App nel costruttore e inizializza la MainPage proprietà in modo NavigationPage che ospiti un'istanza di NotesPage.In addition, the code initializes the FolderPath property in the App constructor, and initializes the MainPage property to be a NavigationPage that hosts an instance of NotesPage. Per altre informazioni sulla navigazione, vedere navigazione nella Guida introduttiva a Novell. Forms.For more information about navigation, see Navigation in the Xamarin.Forms Quickstart Deep Dive.

    Salvare le modifiche apportate a App.xaml.cs premendo CTRL+S e chiudere il file.Save the changes to App.xaml.cs by pressing CTRL+S, and close the file.

  14. In Esplora soluzioni, nel progetto note , fare clic con il pulsante destro del mouse su MainPage. XAMLe scegliere Elimina.In Solution Explorer, in the Notes project, right-click MainPage.xaml, and select Delete. Nella finestra di dialogo visualizzata premere il pulsante OK per rimuovere il file dal disco rigido.In the dialog that appears press the OK button to remove the file from your hard disk.

    In questo modo viene rimossa una pagina che non viene più utilizzata.This removes a page that's no longer used.

  15. Compilare ed eseguire il progetto in ogni piattaforma.Build and run the project on each platform. Per ulteriori informazioni, vedere la pagina relativa alla compilazione della Guida introduttiva.For more information, see Building the quickstart.

    In NotesPage premere il + pulsante per passare al NoteEntryPage e immettere una nota.On the NotesPage press the + button to navigate to the NoteEntryPage and enter a note. Dopo aver salvato la nota, l'applicazione tornerà a NotesPage.After saving the note the application will navigate back to the NotesPage.

    Immettere un numero di note, di lunghezza variabile, per osservare il comportamento dell'applicazione.Enter a number of notes, of varying length, to observe the application behavior.

Aggiornare l'app con Visual Studio per MacUpdate the app with Visual Studio for Mac

  1. Avviare Visual Studio per Mac.Launch Visual Studio for Mac. Nella finestra di avvio fare clic su Aprie nella finestra di dialogo selezionare il file della soluzione per il progetto note:In the start window click Open, and in the dialog select the solution file for the Notes project:

  2. Nella riquadro della soluzioneselezionare il progetto note , fare clic con il pulsante destro del mouse e scegliere Aggiungi > nuova cartella:In the Solution Pad, select the Notes project, right-click, and select Add > New Folder:

  3. Nella riquadro della soluzioneassegnare un nome ai nuovi modellidi cartella:In the Solution Pad, name the new folder Models:

  4. Nella riquadro della soluzioneselezionare la cartella modelli , fare clic con il pulsante destro del mouse e scegliere Aggiungi > nuovo file... :In the Solution Pad, select the Models folder, right-click, and select Add > New File...:

  5. Nella finestra di dialogo nuovo file selezionare Generale > classe vuota, denominare il nuovo file Notae fare clic sul pulsante nuovo :In the New File dialog, select General > Empty Class, name the new file Note, and click the New button:

    Verrà aggiunta una classe denominata Nota alla cartella Models del progetto Notes .This will add a class named Note to the Models folder of the Notes project.

  6. In note.csrimuovere tutto il codice del modello e sostituirlo con il codice seguente:In Note.cs, remove all of the template code and replace it with the following code:

    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 Note modello in cui vengono archiviati i dati relativi a ogni nota nell'applicazione.This class defines a Note model that will store data about each note in the application.

    Salvare le modifiche apportate a note.cs scegliendo file > Salva (o premendo ⌘ + S) e chiudere il file.Save the changes to Note.cs by choosing File > Save (or by pressing ⌘ + S), and close the file.

  7. Nella riquadro della soluzioneselezionare il progetto note , fare clic con il pulsante destro del mouse e scegliere Aggiungi > nuovo file. Nella finestra di dialogo nuovo file selezionare Forms > Forms ContentPage XAML, assegnare al nuovo file il nome NoteEntryPagee fare clic sul pulsante nuovo :In the Solution Pad, select the Notes project, right-click, and select Add > New File.... In the New File dialog, select Forms > Forms ContentPage XAML, name the new file NoteEntryPage, and click the New button:

    Verrà aggiunta una nuova pagina denominata NoteEntryPage alla cartella radice del progetto.This will add a new page named NoteEntryPage to the root folder of the project. Questa pagina sarà la seconda pagina dell'applicazione.This page will be the second page in the application.

  8. In NoteEntryPage. XAMLrimuovere tutto il codice del modello e sostituirlo con il codice seguente:In NoteEntryPage.xaml, remove all of the template code and replace it with the following code:

    <?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.NoteEntryPage"
                 Title="Note Entry">
        <StackLayout Margin="20">
            <Editor Placeholder="Enter your note"
                    Text="{Binding Text}"
                    HeightRequest="100" />
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </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, che Editor è costituita da un oggetto Button per l'input di testo e da due istanze che indirizzano l'applicazione al salvataggio o all'eliminazione di un file.This code declaratively defines the user interface for the page, which consists of an Editor for text input, and two Button instances that direct the application to save or delete a file. Le due Button istanze sono disposte orizzontalmente in Gridun oggetto, Editor con Grid l'oggetto e viene disposto verticalmente StackLayoutin un oggetto.The two Button instances are horizontally laid out in a Grid, with the Editor and Grid being vertically laid out in a StackLayout. Inoltre, Editor utilizza Data Binding per eseguire l'associazione Text alla proprietà del Note modello.In addition, the Editor uses data binding to bind to the Text property of the Note model. Per ulteriori informazioni su data binding, vedere Data Binding nella Guida introduttiva a Novell. Forms.For more information about data binding, see Data binding in the Xamarin.Forms Quickstart Deep Dive.

    Salvare le modifiche apportate a NoteEntryPage. XAML scegliendo file > Salva (o premendo ⌘ + S) e chiudere il file.Save the changes to NoteEntryPage.xaml by choosing File > Save (or by pressing ⌘ + S), and close the file.

  9. In NoteEntryPage.XAML.csrimuovere tutto il codice del modello e sostituirlo con il codice seguente:In NoteEntryPage.xaml.cs, remove all of the template code and replace it with the following code:

    using System;
    using System.IO;
    using Xamarin.Forms;
    using Notes.Models;
    
    namespace Notes
    {
        public partial class NoteEntryPage : ContentPage
        {
            public NoteEntryPage()
            {
                InitializeComponent();
            }
    
            async void OnSaveButtonClicked(object sender, EventArgs e)
            {
                var note = (Note)BindingContext;
    
                if (string.IsNullOrWhiteSpace(note.Filename))
                {
                    // Save
                    var filename = Path.Combine(App.FolderPath, $"{Path.GetRandomFileName()}.notes.txt");
                    File.WriteAllText(filename, note.Text);
                }
                else
                {
                    // Update
                    File.WriteAllText(note.Filename, note.Text);
                }
    
                await Navigation.PopAsync();
            }
    
            async void OnDeleteButtonClicked(object sender, EventArgs e)
            {
                var note = (Note)BindingContext;
    
                if (File.Exists(note.Filename))
                {
                    File.Delete(note.Filename);
                }
    
                await Navigation.PopAsync();
            }
        }
    }
    

    Questo codice archivia un' Note istanza di, che rappresenta una singola nota, nell' BindingContext oggetto della pagina.This code stores a Note instance, which represents a single note, in the BindingContext of the page. Quando viene Button premuto il pulsante Salva OnSaveButtonClicked , viene eseguito il gestore eventi, il Editor quale salva il contenuto di in un nuovo file con un nome file generato in modo casuale o in un file esistente se viene aggiornata una nota.When the Save Button is pressed the OnSaveButtonClicked event handler is executed, which either saves the content of the Editor to a new file with a randomly generated filename, or to an existing file if a note is being updated. In entrambi i casi, il file è archiviato nella cartella dei dati dell'applicazione locale per l'applicazione.In both cases, the file is stored in the local application data folder for the application. Il metodo torna quindi alla pagina precedente.Then the method navigates back to the previous page. Quando viene Button premuto il pulsante Elimina OnDeleteButtonClicked , viene eseguito il gestore dell'evento, che elimina il file, purché esista, e torna alla pagina precedente.When the Delete Button is pressed the OnDeleteButtonClicked event handler is executed, which deletes the file, provided that it exists, and navigates back to the previous page. Per altre informazioni sulla navigazione, vedere navigazione nella Guida introduttiva a Novell. Forms.For more information about navigation, see Navigation in the Xamarin.Forms Quickstart Deep Dive.

    Salvare le modifiche apportate a NoteEntryPage.XAML.cs scegliendo file > Salva (o premendo ⌘ + S) e chiudere il file.Save the changes to NoteEntryPage.xaml.cs by choosing File > Save (or by pressing ⌘ + S), and close the file.

    Avviso

    Il tentativo di compilare l'applicazione a questo punto genererà errori che verranno corretti nei passaggi successivi.Attempting to build the application at this point will result in errors that will be fixed in subsequent steps.

  10. Nella riquadro della soluzioneselezionare il progetto note , fare clic con il pulsante destro del mouse e scegliere Aggiungi > nuovo file. Nella finestra di dialogo nuovo file selezionare Forms > Forms ContentPage XAML, assegnare al nuovo file il nome NotesPagee fare clic sul pulsante nuovo .In the Solution Pad, select the Notes project, right-click, and select Add > New File.... In the New File dialog, select Forms > Forms ContentPage XAML, name the new file NotesPage, and click the New button.

    Verrà aggiunta una pagina denominata NotesPage alla cartella radice del progetto.This will add a page named NotesPage to the root folder of the project. Questa pagina sarà la pagina radice dell'applicazione.This page will be the root page of the application.

  11. In NotesPage. XAMLrimuovere tutto il codice del modello e sostituirlo con il codice seguente:In NotesPage.xaml, remove all of the template code and replace it with the following code:

    <?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.NotesPage"
                 Title="Notes">
        <ContentPage.ToolbarItems>
            <ToolbarItem Text="+"
                         Clicked="OnNoteAddedClicked" />
        </ContentPage.ToolbarItems>
        <ListView x:Name="listView"
                  Margin="20"
                  ItemSelected="OnListViewItemSelected">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding Text}"
                              Detail="{Binding Date}" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </ContentPage>
    

    Questo codice definisce in modo dichiarativo l'interfaccia utente per la pagina, che ListView è costituita da un oggetto e un oggetto. ToolbarItemThis code declaratively defines the user interface for the page, which consists of a ListView and a ToolbarItem. Il ListView USA Data Binding per visualizzare eventuali note recuperate dall'applicazione e la NoteEntryPage selezione di una nota passerà alla posizione in cui è possibile modificare la nota.The ListView uses data binding to display any notes that are retrieved by the application, and selecting a note will navigate to the NoteEntryPage where the note can be modified. In alternativa, è possibile creare una nuova nota premendo il ToolbarItem.Alternatively, a new note can be created by pressing the ToolbarItem. Per ulteriori informazioni su data binding, vedere Data Binding nella Guida introduttiva a Novell. Forms.For more information about data binding, see Data binding in the Xamarin.Forms Quickstart Deep Dive.

    Salvare le modifiche apportate a NotesPage. XAML scegliendo file > Salva (o premendo ⌘ + S) e chiudere il file.Save the changes to NotesPage.xaml by choosing File > Save (or by pressing ⌘ + S), and close the file.

  12. In NotesPage.XAML.csrimuovere tutto il codice del modello e sostituirlo con il codice seguente:In NotesPage.xaml.cs, remove all of the template code and replace it with the following code:

    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using Xamarin.Forms;
    using Notes.Models;
    
    namespace Notes
    {
        public partial class NotesPage : ContentPage
        {
            public NotesPage()
            {
                InitializeComponent();
            }
    
            protected override void OnAppearing()
            {
                base.OnAppearing();
    
                var notes = new List<Note>();
    
                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)
                    });
                }
    
                listView.ItemsSource = notes
                    .OrderBy(d => d.Date)
                    .ToList();
            }
    
            async void OnNoteAddedClicked(object sender, EventArgs e)
            {
                await Navigation.PushAsync(new NoteEntryPage
                {
                    BindingContext = new Note()
                });
            }
    
            async void OnListViewItemSelected(object sender, SelectedItemChangedEventArgs e)
            {
                if (e.SelectedItem != null)
                {
                    await Navigation.PushAsync(new NoteEntryPage
                    {
                        BindingContext = e.SelectedItem as Note
                    });
                }
            }
        }
    }
    

    Questo codice definisce la funzionalità per l' NotesPageoggetto.This code defines the functionality for the NotesPage. Quando viene visualizzata la pagina, OnAppearing viene eseguito il metodo, che consente ListView di popolare con le eventuali note recuperate dalla cartella dati applicazione locale.When the page appears, the OnAppearing method is executed, which populates the ListView with any notes that have been retrieved from the local application data folder. Quando viene premuto, il OnNoteAddedClicked gestore eventi viene eseguito. ToolbarItemWhen the ToolbarItem is pressed the OnNoteAddedClicked event handler is executed. Questo metodo passa NoteEntryPagea, impostando l'oggetto BindingContext di NoteEntryPage su una nuova Note istanza di.This method navigates to the NoteEntryPage, setting the BindingContext of the NoteEntryPage to a new Note instance. Quando ListView viene selezionato un elemento in, viene OnListViewItemSelected eseguito il gestore eventi.When an item in the ListView is selected the OnListViewItemSelected event handler is executed. Questo metodo consente di passare a NoteEntryPage, impostando BindingContext il valore NoteEntryPage di sull'istanza Note di selezionata.This method navigates to the NoteEntryPage, setting the BindingContext of the NoteEntryPage to the selected Note instance. Per altre informazioni sulla navigazione, vedere navigazione nella Guida introduttiva a Novell. Forms.For more information about navigation, see Navigation in the Xamarin.Forms Quickstart Deep Dive.

    Salvare le modifiche apportate a NotesPage.XAML.cs scegliendo file > Salva (o premendo ⌘ + S) e chiudere il file.Save the changes to NotesPage.xaml.cs by choosing File > Save (or by pressing ⌘ + S), and close the file.

    Avviso

    Il tentativo di compilare l'applicazione a questo punto genererà errori che verranno corretti nei passaggi successivi.Attempting to build the application at this point will result in errors that will be fixed in subsequent steps.

  13. Nella riquadro della soluzionefare doppio clic su app.XAML.cs per aprirlo.In the Solution Pad, double-click App.xaml.cs to open it. Sostituire quindi il codice esistente con il codice seguente:Then replace the existing code with the following code:

    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 NavigationPage(new NotesPage());
            }
            // ...
        }
    }
    

    Questo codice aggiunge una dichiarazione dello spazio dei System.IO nomi per lo spazio dei nomi e aggiunge una FolderPath dichiarazione per una stringproprietà statica di tipo.This code adds a namespace declaration for the System.IO namespace, and adds a declaration for a static FolderPath property of type string. La FolderPath proprietà viene usata per archiviare il percorso nel dispositivo in cui verranno archiviati i dati di nota.The FolderPath property is used to store the path on the device where note data will be stored. Inoltre, il codice inizializza la FolderPath proprietà App nel costruttore e inizializza la MainPage proprietà in modo NavigationPage che ospiti un'istanza di NotesPage.In addition, the code initializes the FolderPath property in the App constructor, and initializes the MainPage property to be a NavigationPage that hosts an instance of NotesPage. Per altre informazioni sulla navigazione, vedere navigazione nella Guida introduttiva a Novell. Forms.For more information about navigation, see Navigation in the Xamarin.Forms Quickstart Deep Dive.

    Salvare le modifiche apportate a App.xaml.cs scegliendo File > Salva o premendo ⌘ + S e chiudere il file.Save the changes to App.xaml.cs by choosing File > Save (or by pressing ⌘ + S), and close the file.

  14. Nel riquadro della soluzione, nel progetto note , fare clic con il pulsante destro del mouse su MainPage. XAMLe scegliere Rimuovi.In the Solution Pad, in the Notes project, right-click MainPage.xaml, and select Remove. Nella finestra di dialogo visualizzata premere il pulsante Elimina per rimuovere il file dal disco rigido.In the dialog that appears press the Delete button to remove the file from your hard disk.

    In questo modo viene rimossa una pagina che non viene più utilizzata.This removes a page that's no longer used.

  15. Compilare ed eseguire il progetto in ogni piattaforma.Build and run the project on each platform. Per ulteriori informazioni, vedere la pagina relativa alla compilazione della Guida introduttiva.For more information, see Building the quickstart.

    In NotesPage premere il + pulsante per passare al NoteEntryPage e immettere una nota.On the NotesPage press the + button to navigate to the NoteEntryPage and enter a note. Dopo aver salvato la nota, l'applicazione tornerà a NotesPage.After saving the note the application will navigate back to the NotesPage.

    Immettere un numero di note, di lunghezza variabile, per osservare il comportamento dell'applicazione.Enter a number of notes, of varying length, to observe the application behavior.

Passaggi successiviNext steps

In questa Guida introduttiva si è appreso come:In this quickstart, you learned how to:

  • Aggiungere altre pagine a una soluzione Novell. Forms.Add additional pages to a Xamarin.Forms solution.
  • Eseguire lo spostamento tra le pagine.Perform navigation between pages.
  • Utilizzare data binding per sincronizzare i dati tra gli elementi dell'interfaccia utente e la relativa origine dati.Use data binding to synchronize data between user interface elements and their data source.

Per modificare l'applicazione in modo da archiviare i dati in un database SQLite.NET locale, passare alla Guida introduttiva successiva.To modify the application so that it stores its data in a local SQLite.NET database, continue to the next quickstart.