Ausführen der Navigation in einer mehrseitigen xamarin. Forms-AnwendungPerform Navigation in a Multi-Page Xamarin.Forms Application

Beispiel herunterladen Das Beispiel herunterladenDownload Sample Download the sample

In dieser Schnellstartanleitung erfahren Sie Folgendes:In this quickstart, you will learn how to:

  • Fügen Sie einer xamarin. Forms-Projekt Mappe weitere Seiten hinzu.Add additional pages to a Xamarin.Forms solution.
  • Führt die Navigation zwischen Seiten aus.Perform navigation between pages.
  • Verwenden Sie die Datenbindung, um Daten zwischen Benutzeroberflächen Elementen und Ihrer Datenquelle zu synchronisieren.Use data binding to synchronize data between user interface elements and their data source.

In der Schnellstartanleitung erfahren Sie, wie Sie eine plattformübergreifende xamarin. Forms-Anwendung mit einer einzelnen Seite aktivieren, in der Sie einen einzelnen Hinweis in einer mehrseitigen Anwendung speichern können, um mehrere Notizen speichern zu können.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. Die fertige Anwendung wird unten gezeigt:The final application is shown below:

Erforderliche VoraussetzungenPrerequisites

Sie sollten den vorherigen Schnellstart erfolgreich abgeschlossen haben, bevor Sie diesen Schnellstart durchführen.You should successfully complete the previous quickstart before attempting this quickstart. Alternativ können Sie das vorherige Schnellstart Beispiel herunterladen und als Ausgangspunkt für diesen Schnellstart verwenden.Alternatively, download the previous quickstart sample and use it as the starting point for this quickstart.

Aktualisieren der App mit Visual StudioUpdate the app with Visual Studio

  1. Starten Sie Visual Studio.Launch Visual Studio. Klicken Sie im Startfenster in der Liste zuletzt verwendete Projekte/Projektmappen auf die Lösung Notizen , oder klicken Sie auf Projekt oder Projekt Mappe öffnen, und wählen Sie im Dialogfeld Projekt/Projekt Mappe öffnen die Projektmappendatei für das Notizen-Projekt aus: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. Klicken Sie in Projektmappen-Explorermit der rechten Maustaste auf das Notizen -Projekt, und wählen Sie > neuen Ordner hinzufügenaus:In Solution Explorer, right-click on the Notes project and select Add > New Folder:

  3. Benennen Sie in Projektmappen-Explorerdie neuen Ordner Modelle:In Solution Explorer, name the new folder Models:

  4. Wählen Sie in Projektmappen-Explorerden Ordner Modelle aus, klicken Sie mit der rechten Maustaste, und wählen Sie > Neues Element hinzufügen... aus:In Solution Explorer, select the Models folder, right-click, and select Add > New Item...:

  5. Wählen Sie im Dialogfeld Neues Element hinzufügen die Option visuelle C# Elemente > Klasseaus, benennen Sie die neue Datei, und klicken Sie auf die Schaltfläche Hinzufügen :In the Add New Item dialog, select Visual C# Items > Class, name the new file Note, and click the Add button:

    Dadurch wird dem Ordner " Models " des Notes -Projekts eine Klasse mit dem Namen " Note " hinzugefügt.This will add a class named Note to the Models folder of the Notes project.

  6. Entfernen Sie in Note.csden gesamten Vorlagen Code, und ersetzen Sie ihn durch den folgenden Code: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; }
        }
    }
    

    Diese Klasse definiert ein Note Modell, das Daten zu jeder Notiz in der Anwendung speichert.This class defines a Note model that will store data about each note in the application.

    Speichern Sie die Änderungen an Note.cs , indem Sie STRG + Sdrücken, und schließen Sie die Datei.Save the changes to Note.cs by pressing CTRL+S, and close the file.

  7. Klicken Sie in Projektmappen-Explorermit der rechten Maustaste auf das Notizen -Projekt, und wählen Sie > Neues Element hinzufügen.. . aus. Wählen Sie im Dialogfeld Neues Element hinzufügen die Option visuelle C# Elemente > xamarin. Forms > Seite Inhaltaus, benennen Sie die neue Datei noteentrypage, und klicken Sie auf die Schaltfläche Hinzufügen :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:

    Dadurch wird dem Stamm Ordner des Projekts eine neue Seite mit dem Namen noteentrypage hinzugefügt.This will add a new page named NoteEntryPage to the root folder of the project. Diese Seite wird die zweite Seite in der Anwendung.This page will be the second page in the application.

  8. Entfernen Sie in noteentrypage. XAMLden gesamten Vorlagen Code, und ersetzen Sie ihn durch den folgenden Code: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>
    

    Mit diesem Code wird die Benutzeroberfläche für die Seite deklarativ definiert, die aus einem Editor für Texteingaben besteht, und zwei Button Instanzen, die die Anwendung anweisen, eine Datei zu speichern oder zu löschen.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. Die beiden Button Instanzen werden horizontal in einem Gridangelegt, wobei die Editor und Grid vertikal in einem StackLayoutangeordnet werden.The two Button instances are horizontally laid out in a Grid, with the Editor and Grid being vertically laid out in a StackLayout. Außerdem verwendet der Editor die Datenbindung, um eine Bindung an die Text-Eigenschaft des Note Modells herzustellen.In addition, the Editor uses data binding to bind to the Text property of the Note model. Weitere Informationen zur Datenbindung finden Sie unter Data Binding in the xamarin. Forms Quick Start Deep Dive.For more information about data binding, see Data binding in the Xamarin.Forms Quickstart Deep Dive.

    Speichern Sie die Änderungen an noteentrypage. XAML , indem Sie STRG + Sdrücken, und schließen Sie die Datei.Save the changes to NoteEntryPage.xaml by pressing CTRL+S, and close the file.

  9. Entfernen Sie in NoteEntryPage.XAML.csden gesamten Vorlagen Code, und ersetzen Sie ihn durch den folgenden Code: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();
            }
        }
    }
    

    In diesem Code wird eine Note-Instanz, die einen einzelnen Hinweis darstellt, im BindingContext der Seite gespeichert.This code stores a Note instance, which represents a single note, in the BindingContext of the page. Beim Drücken der Speicher Button wird der OnSaveButtonClicked Ereignishandler ausgeführt, der den Inhalt des Editor entweder in einer neuen Datei mit einem zufällig generierten Dateinamen speichert, oder in einer vorhandenen Datei, wenn ein Hinweis aktualisiert wird.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 beiden Fällen wird die Datei im Ordner Lokale Anwendungsdaten für die Anwendung gespeichert.In both cases, the file is stored in the local application data folder for the application. Anschließend navigiert die Methode zurück zur vorherigen Seite.Then the method navigates back to the previous page. Wenn die Delete -Button gedrückt wird, wird der OnDeleteButtonClicked-Ereignishandler ausgeführt, der die Datei löscht, sofern Sie vorhanden ist, und zur vorherigen Seite zurück navigiert.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. Weitere Informationen zur Navigation finden Sie unter Navigation in xamarin. Forms Quick Start Deep Dive.For more information about navigation, see Navigation in the Xamarin.Forms Quickstart Deep Dive.

    Speichern Sie die Änderungen an NoteEntryPage.XAML.cs , indem Sie STRG + Sdrücken, und schließen Sie die Datei.Save the changes to NoteEntryPage.xaml.cs by pressing CTRL+S, and close the file.

    Warnung

    Der Versuch, die Anwendung an diesem Punkt zu erstellen, führt zu Fehlern, die in den nachfolgenden Schritten korrigiert werden.Attempting to build the application at this point will result in errors that will be fixed in subsequent steps.

  10. Klicken Sie in Projektmappen-Explorermit der rechten Maustaste auf das Notizen -Projekt, und wählen Sie > Neues Element hinzufügen.. . aus. Wählen Sie im Dialogfeld Neues Element hinzufügen die Option visuelle C# Elemente > xamarin. Forms > Seite Inhaltaus, benennen Sie die neue Datei in NotesPage, und klicken Sie auf die Schaltfläche Hinzufügen .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.

    Dadurch wird dem Stamm Ordner des Projekts eine Seite mit dem Namen " NotesPage " hinzugefügt.This will add a page named NotesPage to the root folder of the project. Diese Seite ist die Stamm Seite der Anwendung.This page will be the root page of the application.

  11. Entfernen Sie in " NotesPage. XAML" den gesamten Vorlagen Code, und ersetzen Sie ihn durch den folgenden Code: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>
    

    Mit diesem Code wird die Benutzeroberfläche für die Seite deklarativ definiert, die aus einem ListView und einem ToolbarItembesteht.This code declaratively defines the user interface for the page, which consists of a ListView and a ToolbarItem. Der ListView verwendet die Datenbindung zum Anzeigen von Notizen, die von der Anwendung abgerufen werden, und die Auswahl eines Notiz Orts navigiert zum NoteEntryPage, in dem der Hinweis geändert werden kann.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. Alternativ kann ein neuer Hinweis durch Drücken der ToolbarItem erstellt werden.Alternatively, a new note can be created by pressing the ToolbarItem. Weitere Informationen zur Datenbindung finden Sie unter Data Binding in the xamarin. Forms Quick Start Deep Dive.For more information about data binding, see Data binding in the Xamarin.Forms Quickstart Deep Dive.

    Speichern Sie die Änderungen an der Datei " NotesPage. XAML ", indem Sie STRG + Sdrücken, und schließen Sie die Datei.Save the changes to NotesPage.xaml by pressing CTRL+S, and close the file.

  12. Entfernen Sie in NotesPage.XAML.csden gesamten Vorlagen Code, und ersetzen Sie ihn durch den folgenden Code: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
                    });
                }
            }
        }
    }
    

    Dieser Code definiert die Funktionalität für das NotesPage.This code defines the functionality for the NotesPage. Wenn die Seite angezeigt wird, wird die OnAppearing-Methode ausgeführt, die die ListView mit allen Notizen auffüllt, die aus dem lokalen Anwendungsdatenordner abgerufen wurden.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. Wenn die ToolbarItem gedrückt wird, wird der OnNoteAddedClicked Ereignishandler ausgeführt.When the ToolbarItem is pressed the OnNoteAddedClicked event handler is executed. Diese Methode navigiert zum NoteEntryPage, wobei die BindingContext der NoteEntryPage auf eine neue Note Instanz festgelegt wird.This method navigates to the NoteEntryPage, setting the BindingContext of the NoteEntryPage to a new Note instance. Wenn ein Element im ListView ausgewählt wird, wird der OnListViewItemSelected-Ereignishandler ausgeführt.When an item in the ListView is selected the OnListViewItemSelected event handler is executed. Diese Methode navigiert zum NoteEntryPage, wobei die BindingContext der NoteEntryPage auf die ausgewählte Note Instanz festgelegt wird.This method navigates to the NoteEntryPage, setting the BindingContext of the NoteEntryPage to the selected Note instance. Weitere Informationen zur Navigation finden Sie unter Navigation in xamarin. Forms Quick Start Deep Dive.For more information about navigation, see Navigation in the Xamarin.Forms Quickstart Deep Dive.

    Speichern Sie die Änderungen an NotesPage.XAML.cs , indem Sie STRG + Sdrücken, und schließen Sie die Datei.Save the changes to NotesPage.xaml.cs by pressing CTRL+S, and close the file.

    Warnung

    Der Versuch, die Anwendung an diesem Punkt zu erstellen, führt zu Fehlern, die in den nachfolgenden Schritten korrigiert werden.Attempting to build the application at this point will result in errors that will be fixed in subsequent steps.

  13. Doppelklicken Sie in Projektmappen-Explorerauf app.XAML.cs , um es zu öffnen.In Solution Explorer, double-click App.xaml.cs to open it. Ersetzen Sie dann den vorhandenen Code durch den folgenden Code: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());
            }
            // ...
        }
    }
    

    Mit diesem Code wird eine Namespace Deklaration für den System.IO-Namespace hinzugefügt, und es wird eine Deklaration für eine statische FolderPath Eigenschaft des Typs string hinzugefügt.This code adds a namespace declaration for the System.IO namespace, and adds a declaration for a static FolderPath property of type string. Mit der FolderPath-Eigenschaft wird der Pfad auf dem Gerät gespeichert, auf dem die Hinweis Daten gespeichert werden.The FolderPath property is used to store the path on the device where note data will be stored. Außerdem initialisiert der Code die FolderPath-Eigenschaft im App-Konstruktor und initialisiert die MainPage -Eigenschaft als NavigationPage , die eine Instanz von NotesPage hostet.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. Weitere Informationen zur Navigation finden Sie unter Navigation in xamarin. Forms Quick Start Deep Dive.For more information about navigation, see Navigation in the Xamarin.Forms Quickstart Deep Dive.

    Speichern Sie die Änderungen an App.xaml.cs, indem Sie STRG+S drücken, und schließen Sie die Datei.Save the changes to App.xaml.cs by pressing CTRL+S, and close the file.

  14. Klicken Sie in Projektmappen-Explorerim Notes -Projekt mit der rechten Maustaste auf MainPage. XAML, und wählen Sie Löschenaus.In Solution Explorer, in the Notes project, right-click MainPage.xaml, and select Delete. Klicken Sie im angezeigten Dialogfeld auf die Schaltfläche OK , um die Datei von der Festplatte zu entfernen.In the dialog that appears press the OK button to remove the file from your hard disk.

    Dadurch wird eine Seite entfernt, die nicht mehr verwendet wird.This removes a page that's no longer used.

  15. Erstellen Sie das Projekt auf jeder Plattform, und führen Sie es aus.Build and run the project on each platform. Weitere Informationen finden Sie unter Erste Schritte mit der Schnellstartanleitung.For more information, see Building the quickstart.

    Klicken Sie auf der Seite NotesPage auf die Schaltfläche + , um zur noteentrypage zu navigieren, und geben Sie einen Hinweis ein.On the NotesPage press the + button to navigate to the NoteEntryPage and enter a note. Nach dem Speichern des Hinweises wird die Anwendung zurück zur NotesPagenavigiert.After saving the note the application will navigate back to the NotesPage.

    Geben Sie eine Anzahl von Notizen unterschiedlicher Länge ein, um das Verhalten der Anwendung zu beobachten.Enter a number of notes, of varying length, to observe the application behavior.

Aktualisieren der App mit Visual Studio für MacUpdate the app with Visual Studio for Mac

  1. Starten Sie Visual Studio für Mac.Launch Visual Studio for Mac. Klicken Sie im Startfenster auf Öffnen, und wählen Sie im Dialogfeld die Projektmappendatei für das Notes-Projekt aus:In the start window click Open, and in the dialog select the solution file for the Notes project:

  2. Wählen Sie im Lösungspaddas Projekt Notes aus, klicken Sie mit der rechten Maustaste, und wählen Sie > neuen Ordner hinzufügenaus:In the Solution Pad, select the Notes project, right-click, and select Add > New Folder:

  3. Benennen Sie im Lösungspaddie neuen Ordner Modelle:In the Solution Pad, name the new folder Models:

  4. Wählen Sie im Lösungspadden Ordner Modelle aus, klicken Sie mit der rechten Maustaste, und wählen Sie > neue Datei hinzufügen... aus:In the Solution Pad, select the Models folder, right-click, and select Add > New File...:

  5. Klicken Sie im Dialogfeld neue Datei auf Allgemein > leere Klasse, benennen Sie die neue Datei, und klicken Sie auf die Schaltfläche neu :In the New File dialog, select General > Empty Class, name the new file Note, and click the New button:

    Dadurch wird dem Ordner " Models " des Notes -Projekts eine Klasse mit dem Namen " Note " hinzugefügt.This will add a class named Note to the Models folder of the Notes project.

  6. Entfernen Sie in Note.csden gesamten Vorlagen Code, und ersetzen Sie ihn durch den folgenden Code: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; }
        }
    }
    

    Diese Klasse definiert ein Note Modell, das Daten zu jeder Notiz in der Anwendung speichert.This class defines a Note model that will store data about each note in the application.

    Speichern Sie die Änderungen an Note.cs , indem Sie Datei > Speichern auswählen (oder indem Sie ⌘ + Sdrücken), und schließen Sie die Datei.Save the changes to Note.cs by choosing File > Save (or by pressing ⌘ + S), and close the file.

  7. Wählen Sie im Lösungspaddas Projekt Notes aus, klicken Sie mit der rechten Maustaste, und wählen Sie > neue Datei hinzufügen... aus. Wählen Sie im Dialogfeld neue Datei die Option Formulare > Forms ContentPage XAMLaus, benennen Sie die neue Datei noteentrypage, und klicken Sie auf die Schaltfläche neu :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:

    Dadurch wird dem Stamm Ordner des Projekts eine neue Seite mit dem Namen noteentrypage hinzugefügt.This will add a new page named NoteEntryPage to the root folder of the project. Diese Seite wird die zweite Seite in der Anwendung.This page will be the second page in the application.

  8. Entfernen Sie in noteentrypage. XAMLden gesamten Vorlagen Code, und ersetzen Sie ihn durch den folgenden Code: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>
    

    Mit diesem Code wird die Benutzeroberfläche für die Seite deklarativ definiert, die aus einem Editor für Texteingaben besteht, und zwei Button Instanzen, die die Anwendung anweisen, eine Datei zu speichern oder zu löschen.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. Die beiden Button Instanzen werden horizontal in einem Gridangelegt, wobei die Editor und Grid vertikal in einem StackLayoutangeordnet werden.The two Button instances are horizontally laid out in a Grid, with the Editor and Grid being vertically laid out in a StackLayout. Außerdem verwendet der Editor die Datenbindung, um eine Bindung an die Text-Eigenschaft des Note Modells herzustellen.In addition, the Editor uses data binding to bind to the Text property of the Note model. Weitere Informationen zur Datenbindung finden Sie unter Data Binding in the xamarin. Forms Quick Start Deep Dive.For more information about data binding, see Data binding in the Xamarin.Forms Quickstart Deep Dive.

    Speichern Sie die Änderungen an noteentrypage. XAML , indem Sie Datei > Speichern (oder durch Drücken ⌘ von + S) auswählen, und schließen Sie die Datei.Save the changes to NoteEntryPage.xaml by choosing File > Save (or by pressing ⌘ + S), and close the file.

  9. Entfernen Sie in NoteEntryPage.XAML.csden gesamten Vorlagen Code, und ersetzen Sie ihn durch den folgenden Code: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();
            }
        }
    }
    

    In diesem Code wird eine Note-Instanz, die einen einzelnen Hinweis darstellt, im BindingContext der Seite gespeichert.This code stores a Note instance, which represents a single note, in the BindingContext of the page. Beim Drücken der Speicher Button wird der OnSaveButtonClicked Ereignishandler ausgeführt, der den Inhalt des Editor entweder in einer neuen Datei mit einem zufällig generierten Dateinamen speichert, oder in einer vorhandenen Datei, wenn ein Hinweis aktualisiert wird.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 beiden Fällen wird die Datei im Ordner Lokale Anwendungsdaten für die Anwendung gespeichert.In both cases, the file is stored in the local application data folder for the application. Anschließend navigiert die Methode zurück zur vorherigen Seite.Then the method navigates back to the previous page. Wenn die Delete -Button gedrückt wird, wird der OnDeleteButtonClicked-Ereignishandler ausgeführt, der die Datei löscht, sofern Sie vorhanden ist, und zur vorherigen Seite zurück navigiert.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. Weitere Informationen zur Navigation finden Sie unter Navigation in xamarin. Forms Quick Start Deep Dive.For more information about navigation, see Navigation in the Xamarin.Forms Quickstart Deep Dive.

    Speichern Sie die Änderungen an NoteEntryPage.XAML.cs , indem Sie Datei > Speichern auswählen (oder indem Sie ⌘ + Sdrücken), und schließen Sie die Datei.Save the changes to NoteEntryPage.xaml.cs by choosing File > Save (or by pressing ⌘ + S), and close the file.

    Warnung

    Der Versuch, die Anwendung an diesem Punkt zu erstellen, führt zu Fehlern, die in den nachfolgenden Schritten korrigiert werden.Attempting to build the application at this point will result in errors that will be fixed in subsequent steps.

  10. Wählen Sie im Lösungspaddas Projekt Notes aus, klicken Sie mit der rechten Maustaste, und wählen Sie > neue Datei hinzufügen... aus. Wählen Sie im Dialogfeld neue Datei die Option Formulare > Forms ContentPage XAMLaus, benennen Sie die neue Datei NotesPage, und klicken Sie auf die Schaltfläche neu .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.

    Dadurch wird dem Stamm Ordner des Projekts eine Seite mit dem Namen " NotesPage " hinzugefügt.This will add a page named NotesPage to the root folder of the project. Diese Seite ist die Stamm Seite der Anwendung.This page will be the root page of the application.

  11. Entfernen Sie in " NotesPage. XAML" den gesamten Vorlagen Code, und ersetzen Sie ihn durch den folgenden Code: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>
    

    Mit diesem Code wird die Benutzeroberfläche für die Seite deklarativ definiert, die aus einem ListView und einem ToolbarItembesteht.This code declaratively defines the user interface for the page, which consists of a ListView and a ToolbarItem. Der ListView verwendet die Datenbindung zum Anzeigen von Notizen, die von der Anwendung abgerufen werden, und die Auswahl eines Notiz Orts navigiert zum NoteEntryPage, in dem der Hinweis geändert werden kann.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. Alternativ kann ein neuer Hinweis durch Drücken der ToolbarItem erstellt werden.Alternatively, a new note can be created by pressing the ToolbarItem. Weitere Informationen zur Datenbindung finden Sie unter Data Binding in the xamarin. Forms Quick Start Deep Dive.For more information about data binding, see Data binding in the Xamarin.Forms Quickstart Deep Dive.

    Speichern Sie die Änderungen an der Datei " NotesPage. XAML ", indem Sie Datei > Speichern (oder durch Drücken ⌘ von + S) auswählen, und schließen Sie die Datei.Save the changes to NotesPage.xaml by choosing File > Save (or by pressing ⌘ + S), and close the file.

  12. Entfernen Sie in NotesPage.XAML.csden gesamten Vorlagen Code, und ersetzen Sie ihn durch den folgenden Code: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
                    });
                }
            }
        }
    }
    

    Dieser Code definiert die Funktionalität für das NotesPage.This code defines the functionality for the NotesPage. Wenn die Seite angezeigt wird, wird die OnAppearing-Methode ausgeführt, die die ListView mit allen Notizen auffüllt, die aus dem lokalen Anwendungsdatenordner abgerufen wurden.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. Wenn die ToolbarItem gedrückt wird, wird der OnNoteAddedClicked Ereignishandler ausgeführt.When the ToolbarItem is pressed the OnNoteAddedClicked event handler is executed. Diese Methode navigiert zum NoteEntryPage, wobei die BindingContext der NoteEntryPage auf eine neue Note Instanz festgelegt wird.This method navigates to the NoteEntryPage, setting the BindingContext of the NoteEntryPage to a new Note instance. Wenn ein Element im ListView ausgewählt wird, wird der OnListViewItemSelected-Ereignishandler ausgeführt.When an item in the ListView is selected the OnListViewItemSelected event handler is executed. Diese Methode navigiert zum NoteEntryPage, wobei die BindingContext der NoteEntryPage auf die ausgewählte Note Instanz festgelegt wird.This method navigates to the NoteEntryPage, setting the BindingContext of the NoteEntryPage to the selected Note instance. Weitere Informationen zur Navigation finden Sie unter Navigation in xamarin. Forms Quick Start Deep Dive.For more information about navigation, see Navigation in the Xamarin.Forms Quickstart Deep Dive.

    Speichern Sie die Änderungen an NotesPage.XAML.cs , indem Sie Datei > Speichern auswählen (oder indem Sie ⌘ + Sdrücken), und schließen Sie die Datei.Save the changes to NotesPage.xaml.cs by choosing File > Save (or by pressing ⌘ + S), and close the file.

    Warnung

    Der Versuch, die Anwendung an diesem Punkt zu erstellen, führt zu Fehlern, die in den nachfolgenden Schritten korrigiert werden.Attempting to build the application at this point will result in errors that will be fixed in subsequent steps.

  13. Doppelklicken Sie im Lösungspadauf app.XAML.cs , um es zu öffnen.In the Solution Pad, double-click App.xaml.cs to open it. Ersetzen Sie dann den vorhandenen Code durch den folgenden Code: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());
            }
            // ...
        }
    }
    

    Mit diesem Code wird eine Namespace Deklaration für den System.IO-Namespace hinzugefügt, und es wird eine Deklaration für eine statische FolderPath Eigenschaft des Typs string hinzugefügt.This code adds a namespace declaration for the System.IO namespace, and adds a declaration for a static FolderPath property of type string. Mit der FolderPath-Eigenschaft wird der Pfad auf dem Gerät gespeichert, auf dem die Hinweis Daten gespeichert werden.The FolderPath property is used to store the path on the device where note data will be stored. Außerdem initialisiert der Code die FolderPath-Eigenschaft im App-Konstruktor und initialisiert die MainPage -Eigenschaft als NavigationPage , die eine Instanz von NotesPage hostet.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. Weitere Informationen zur Navigation finden Sie unter Navigation in xamarin. Forms Quick Start Deep Dive.For more information about navigation, see Navigation in the Xamarin.Forms Quickstart Deep Dive.

    Speichern Sie die Änderungen an App.xaml.cs, indem Sie auf Datei > Speichern klicken (oder indem Sie ⌘+S drücken), und schließen Sie die Datei.Save the changes to App.xaml.cs by choosing File > Save (or by pressing ⌘ + S), and close the file.

  14. Klicken Sie im Lösungspadim Notes -Projekt mit der rechten Maustaste auf MainPage. XAML, und wählen Sie Entfernenaus.In the Solution Pad, in the Notes project, right-click MainPage.xaml, and select Remove. Klicken Sie im angezeigten Dialogfeld auf die Schaltfläche Löschen , um die Datei von der Festplatte zu entfernen.In the dialog that appears press the Delete button to remove the file from your hard disk.

    Dadurch wird eine Seite entfernt, die nicht mehr verwendet wird.This removes a page that's no longer used.

  15. Erstellen Sie das Projekt auf jeder Plattform, und führen Sie es aus.Build and run the project on each platform. Weitere Informationen finden Sie unter Erste Schritte mit der Schnellstartanleitung.For more information, see Building the quickstart.

    Klicken Sie auf der Seite NotesPage auf die Schaltfläche + , um zur noteentrypage zu navigieren, und geben Sie einen Hinweis ein.On the NotesPage press the + button to navigate to the NoteEntryPage and enter a note. Nach dem Speichern des Hinweises wird die Anwendung zurück zur NotesPagenavigiert.After saving the note the application will navigate back to the NotesPage.

    Geben Sie eine Anzahl von Notizen unterschiedlicher Länge ein, um das Verhalten der Anwendung zu beobachten.Enter a number of notes, of varying length, to observe the application behavior.

Nächste SchritteNext steps

In dieser Schnellstartanleitung haben Sie Folgendes gelernt:In this quickstart, you learned how to:

  • Fügen Sie einer xamarin. Forms-Projekt Mappe weitere Seiten hinzu.Add additional pages to a Xamarin.Forms solution.
  • Führt die Navigation zwischen Seiten aus.Perform navigation between pages.
  • Verwenden Sie die Datenbindung, um Daten zwischen Benutzeroberflächen Elementen und Ihrer Datenquelle zu synchronisieren.Use data binding to synchronize data between user interface elements and their data source.

Wenn Sie die Anwendung so ändern möchten, dass Ihre Daten in einer lokalen sqlite.net-Datenbank gespeichert werden, fahren Sie mit der nächsten Schnellstartanleitung fort.To modify the application so that it stores its data in a local SQLite.NET database, continue to the next quickstart.