Durchführen der Navigation in einer Xamarin.Forms-AnwendungPerform navigation in a Xamarin.Forms application

Beispiel herunterladen Das Beispiel herunterladenDownload Sample Download the sample

In diesem Schnellstart lernen Sie, wie Sie:In this quickstart, you will learn how to:

  • Hinzufügen weiterer Seiten zu einer Xamarin.Forms-ShellanwendungAdd additional pages to a Xamarin.Forms Shell application.
  • Navigieren zwischen SeitenPerform navigation between pages.
  • Verwenden von Datenbindungen zum Synchronisieren von Daten zwischen Benutzeroberflächenelementen und ihren DatenquellenUse data binding to synchronize data between user interface elements and their data source.

In diesem Schnellstart erfahren Sie, wie Sie eine plattformübergreifende Xamarin.Forms-Shellanwendung, in der eine Notiz gespeichert werden kann, in eine Anwendung umwandeln, in der mehrere Notizen gespeichert werden können.The quickstart walks through how to turn a cross-platform Xamarin.Forms Shell application, capable of storing a single note, into an application capable of storing multiple notes. Die fertige Anwendung wird unten gezeigt:The final application is shown below:

Notizenseite NotizeneintragsseiteNotes Page Note Entry Page

VoraussetzungenPrerequisites

Sie sollten den vorherigen Schnellstart erfolgreich abgeschlossen haben, bevor Sie mit diesem Schnellstart beginnen.You should successfully complete the previous quickstart before attempting this quickstart. Alternativ können Sie auch das letzte Schnellstartbeispiel herunterladen und als Startpunkt 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 verwendeter Projekte/Projektmappen auf die Projektmappe Notizen, oder klicken Sie auf die Option Projekt oder Projektmappe öffnen, und wählen Sie dann im Dialogfeld Projekt oder Projektmappe öffnen die Projektmappendatei für das Notizenprojekt 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:

    Projektmappe öffnen

  2. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt Notes, und wählen Sie Hinzufügen > Neuer Ordner aus:In Solution Explorer, right-click on the Notes project, and select Add > New Folder:

    Neuen Ordner hinzufügen

  3. Geben Sie im Projektmappen-Explorer dem neuen Ordner den Namen Modelle:In Solution Explorer, name the new folder Models:

    Ordner „Modelle“

  4. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Ordner Modelle, und wählen Sie Hinzufügen > Neues Element aus:In Solution Explorer, select the Models folder, right-click, and select Add > Class...:

    Neue Datei hinzufügen

  5. Klicken Sie im Dialogfeld Neues Element hinzufügen auf Visual C# > Elemente > Klasse, nennen Sie die neue Datei Notizen, 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:

    Klasse „Notiz“ hinzufügen

    Dadurch wird im Ordner Modelle des Projekts Notizen eine Klasse namens Notiz hinzugefügt.This will add a class named Note to the Models folder of the Notes project.

  6. Entfernen Sie in der Datei Note.cs den gesamten Vorlagencode, und ersetzen Sie ihn durch den folgenden: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 über jede 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+S drücken.Save the changes to Note.cs by pressing CTRL+S.

  7. Klicken Sie im Projektmappen-Explorer im Projekt Notes mit der rechten Maustaste auf den Ordner Ansichten, und wählen Sie Hinzufügen > Neues Element... aus. Klicken Sie im Dialogfeld Neues Element hinzufügen auf Visual C#-Elemente > Xamarin.Forms > Inhaltsseite, nennen Sie die neue Datei NoteEntryPage, und klicken Sie auf die Schaltfläche Hinzufügen:In Solution Explorer, in the Notes project, select the Views folder, right-click, 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:

    Hinzufügen Xamarin.Forms Inhaltsseite

    Dadurch wird im Ordner Ansichten des Projekts eine neue Seite namens NoteEntryPage hinzugefügt.This will add a new page named NoteEntryPage to the Views folder of the project. Diese Seite wird für die Notizeingabe verwendet.This page will be used for note entry.

  8. Entfernen Sie in NoteEntryPage.xaml den gesamten Vorlagencode, und ersetzen Sie ihn durch den folgenden: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.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>
    

    Dieser Code definiert deklarativ die Benutzeroberfläche für die Seite, die aus einem Editor für die Texteingabe und zwei Button-Objekten besteht, 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 objects that direct the application to save or delete a file. Die beiden Button-Instanzen sind horizontal in einer Grid-Klasse angeordnet, wobei Editor und Grid vertikal in einer StackLayout-Klasse angeordnet sind.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 Editor Datenbindung, um die Text-Eigenschaft des Note-Modells zu binden.In addition, the Editor uses data binding to bind to the Text property of the Note model. Weitere Informationen zur Datenbindung finden Sie im Abschnitt Datenbindung des Artikels Ausführliche Erläuterungen zum Xamarin.Forms-Schnellstart.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+S drücken.Save the changes to NoteEntryPage.xaml by pressing CTRL+S.

  9. Entfernen Sie dann in NoteEntryPage.xaml.cs den gesamten Vorlagencode, und ersetzen Sie ihn durch den folgenden:In NoteEntryPage.xaml.cs, remove all of the template code and replace it with the following code:

    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("..");
            }
        }
    }
    

    Dieser Code speichert in der BindingContext-Eigenschaft der Seite eine Note-Instanz, die für eine einzelne Notiz steht.This code stores a Note instance, which represents a single note, in the BindingContext of the page. Die Klasse wird mit einem QueryPropertyAttribute versehen, mit dem Daten während der Navigation über Abfrageparameter an die Seite übermittelt werden können.The class is decorated with a QueryPropertyAttribute that enables data to be passed into the page, during navigation, via query parameters. Das erste Argument für das QueryPropertyAttribute gibt den Namen der Eigenschaft, die die Daten empfangen soll, und das zweite Argument die ID des Abfrageparameters an. Das QueryParameterAttribute im oben stehenden Beispiel legt somit fest, dass die ItemId-Eigenschaft die im ItemId-Abfrageparameter übergebenen Daten aus dem in einem GoToAsync-Methodenaufruf angegebenen URI erhält.The first argument for the QueryPropertyAttribute specifies the name of the property that will receive the data, with the second argument specifying the query parameter id. Therefore, the QueryParameterAttribute in the above code specifies that the ItemId property will receive the data passed in the ItemId query parameter from the URI specified in a GoToAsync method call. Die ItemId-Eigenschaft ruft dann die LoadNote-Methode auf, um ein Note-Objekt aus der Datei auf dem Gerät zu erstellen, und legt den BindingContext der Seite auf das Note-Objekt fest.The ItemId property then calls the LoadNote method to create a Note object from the file on the device, and sets the BindingContext of the page to the Note object.

    Wenn auf die Button zum Speichern geklickt wird, wird der OnSaveButtonClicked-Ereignishandler ausgeführt. Entweder wird dann der Editor-Inhalt in eine neue Datei unter einem zufällig generierten Dateinamen gespeichert, oder in eine vorhandene Datei, wenn eine Notiz 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 mit lokalen Anwendungsdaten der Anwendung gespeichert.In both cases, the file is stored in the local application data folder for the application. Dann navigiert die Methode zurück zur vorherigen Seite.Then the method navigates back to the previous page. Wenn auf die Löschen-Button geklickt wird, wird der OnDeleteButtonClicked-Ereignishandler ausgeführt, sodass die Datei (falls vorhanden) gelöscht wird. Anschließend erfolgt die Navigation zurück zur vorherigen Seite.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 im Abschnitt Navigation des Artikels Ausführliche Erläuterungen zum Schnellstart für die Xamarin.Forms-Shell.For more information about navigation, see Navigation in the Xamarin.Forms Shell Quickstart Deep Dive.

    Speichern Sie die Änderungen an NoteEntryPage.xaml.cs, indem Sie STRG+S drücken.Save the changes to NoteEntryPage.xaml.cs by pressing CTRL+S.

    Warnung

    Die Anwendung wird derzeit aufgrund von Fehlern, die in späteren Schritten korrigiert werden, nicht erstellt.The application will not currently build due to errors that will be fixed in subsequent steps.

  10. Öffnen Sie im Projektmappen-Explorer im Projekt Notes die Datei NotesPage.xaml im Ordner Ansichten.In Solution Explorer, in the Notes project, open NotesPage.xaml in the Views folder.

  11. Entfernen Sie in NotesPage.xaml den gesamten Vorlagencode, und ersetzen Sie ihn durch den folgenden: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.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>
    

    In diesem Codeausschnitt wird die Benutzeroberfläche deklarativ für die Seite definiert, die aus den Klassen CollectionView und ToolbarItem besteht.This code declaratively defines the user interface for the page, which consists of a CollectionView and a ToolbarItem. Die CollectionView verwendet Datenbindung zum Anzeigen von Notizen, die von der Anwendung abgerufen werden.The CollectionView uses data binding to display any notes that are retrieved by the application. Durch Auswählen einer Notiz navigieren Sie zur NoteEntryPage, wo der Hinweis geändert werden kann.Selecting a note will navigate to the NoteEntryPage where the note can be modified. Alternativ kann auch eine neue Notiz erstellt werden, indem Sie auf ToolbarItem klicken.Alternatively, a new note can be created by pressing the ToolbarItem. Weitere Informationen zur Datenbindung finden Sie im Abschnitt Datenbindung des Artikels Ausführliche Erläuterungen zum Xamarin.Forms-Schnellstart.For more information about data binding, see Data binding in the Xamarin.Forms Quickstart Deep Dive.

    Speichern Sie die Änderungen an NotesPage.xaml, indem Sie STRG+S drücken.Save the changes to NotesPage.xaml by pressing CTRL+S.

  12. Erweitern Sie im Projektmappen-Explorer im Projekt Notes den Eintrag NotesPage.xaml im Ordner Ansichten, und öffnen Sie die Datei NotesPage.xaml.cs.In Solution Explorer, in the Notes project, expand NotesPage.xaml in the Views folder and open NotesPage.xaml.cs.

  13. Entfernen Sie in NotesPage.xaml.cs den gesamten Vorlagencode, und ersetzen Sie ihn durch den folgenden: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 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}");
                }
            }
        }
    }
    

    Dieser Code definiert die Funktionalität für NotesPage.This code defines the functionality for the NotesPage. Wenn die Seite angezeigt wird, wird die OnAppearing-Methode ausgeführt, die in CollectionView alle Notizen lädt, die aus dem Ordner mit lokalen Anwendungsdaten abgerufen wurden.When the page appears, the OnAppearing method is executed, which populates the CollectionView with any notes that have been retrieved from the local application data folder. Wenn auf die ToolbarItem-Klasse geklickt wird, wird der OnAddClicked-Ereignishandler ausgeführt.When the ToolbarItem is pressed the OnAddClicked event handler is executed. Diese Methode navigiert zur NoteEntryPage.This method navigates to the NoteEntryPage. Wenn ein Element von CollectionView ausgewählt wird, wird der OnSelectionChanged-Ereignishandler ausgeführt.When an item in the CollectionView is selected the OnSelectionChanged event handler is executed. Diese Methode navigiert zur NoteEntryPage, sofern in der CollectionView ein Element ausgewählt ist, und übergibt die Filename-Eigenschaft des ausgewählten Note-Elements als Abfrageparameter an die Seite.This method navigates to the NoteEntryPage, provided that an item in the CollectionView is selected, passing the Filename property of the selected Note as a query parameter to the page. Weitere Informationen zur Navigation finden Sie im Abschnitt Navigation des Artikels Ausführliche Erläuterungen zum Xamarin.Forms-Schnellstart.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+S drücken.Save the changes to NotesPage.xaml.cs by pressing CTRL+S.

    Warnung

    Die Anwendung wird derzeit aufgrund von Fehlern, die in späteren Schritten korrigiert werden, nicht erstellt.The application will not currently build due to errors that will be fixed in subsequent steps.

  14. Erweitern Sie im Projektmappen-Explorer im Projekt Notes den Eintrag AppShell.xaml, und öffnen Sie die Datei AppShell.xaml.cs.In Solution Explorer, in the Notes project, expand AppShell.xaml and open AppShell.xaml.cs. Ersetzen Sie dann den vorhandenen Code durch folgenden Code:Then replace the existing code with the following code:

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

    Dieser Code registriert eine Route für die NoteEntryPage, die in der visuellen Shellhierarchie (AppShell.xaml) nicht dargestellt wird.This code registers a route for the NoteEntryPage, which isn't represented in the Shell visual hierarchy (AppShell.xaml). Diese Seite kann dann mithilfe der URI-basierten Navigation mit der GoToAsync-Methode aufgerufen werden.This page can then be navigated to using URI-based navigation, with the GoToAsync method.

    Speichern Sie die Änderungen an AppShell.xaml.cs, indem Sie STRG+S drücken.Save the changes to AppShell.xaml.cs by pressing CTRL+S.

  15. Erweitern Sie im Projektmappen-Explorer im Projekt Notes den Eintrag App.xaml, und öffnen Sie App.xaml.cs.In Solution Explorer, in the Notes project, expand App.xaml and open App.xaml.cs. Ersetzen Sie dann den vorhandenen Code durch 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 AppShell();
            }
    
            protected override void OnStart()
            {
            }
    
            protected override void OnSleep()
            {
            }
    
            protected override void OnResume()
            {
            }
        }
    }
    
    

    Dieser Code fügt eine Namespacedeklaration für den System.IO-Namespace hinzu, und fügt eine Deklaration für eine statische FolderPath-Eigenschaft mit dem Typ string hinzu.This code adds a namespace declaration for the System.IO namespace, and adds a declaration for a static FolderPath property of type string. Die FolderPath-Eigenschaft wird verwendet, um den Pfad auf dem Gerät zum Speicherort zu speichern, an dem die Notizendaten 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 Shell-Objekt mit Unterklassen.In addition, the code initializes the FolderPath property in the App constructor, and initializes the MainPage property to the subclassed Shell object.

    Speichern Sie die Änderungen an App.xaml.cs, indem Sie STRG+S drücken.Save the changes to App.xaml.cs by pressing CTRL+S.

  16. Erstellen Sie das Projekt auf jeder Plattform, und führen Sie dieses aus.Build and run the project on each platform. Weitere Informationen finden Sie unter Erstellen des Schnellstarts.For more information, see Building the quickstart.

    Klicken Sie auf der NotesPage auf die Schaltfläche Hinzufügen, um zur NoteEntryPage zu navigieren und eine Notiz einzugeben.On the NotesPage press the Add button to navigate to the NoteEntryPage and enter a note. Nach dem Speichern der Notiz navigiert die Anwendung zurück zur Eigenschaft NotesPage.After saving the note the application will navigate back to the NotesPage.

    Geben Sie verschiedene Notizen unterschiedlicher Länge ein, um das Verhalten der Anwendung zu beobachten.Enter several notes, of varying length, to observe the application behavior. Schließen Sie die Anwendung, und starten Sie sie neu, um sicherzustellen, dass die von Ihnen eingegebenen Notizen auf dem Gerät gespeichert wurden.Close the application and re-launch it to ensure that the notes you entered were saved to the device.

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 auf der Startseite auf Öffnen, und wählen Sie im Dialogfeld die Projektmappendatei für das Notizenprojekt aus:In the start window click Open, and in the dialog select the solution file for the Notes project:

    Projektmappe öffnen

  2. Klicken Sie im Lösungspad mit der rechten Maustaste auf das Projekt Notes, und wählen Sie Hinzufügen > Neuer Ordner aus:In the Solution Pad, right-click on the Notes project, and select Add > New Folder:

    Neuen Ordner hinzufügen

  3. Nennen Sie im Dialogfeld Neuer Ordner den neuen Ordner Modelle:In the New Folder dialog, name the new folder Models:

    Ordner „Modelle“

  4. Wählen Sie im Lösungspad den Ordner Modelle aus, klicken Sie mit der rechten Maustaste darauf, und wählen Sie Hinzufügen > Neue Klasse… aus:In the Solution Pad, select the Models folder, right-click, and select Add > New Class...:

    Neue Datei hinzufügen

  5. Klicken Sie im Dialogfeld Neue Datei auf Allgemein > Leere Klasse, nennen Sie die neue Datei Notiz, 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:

    Klasse „Notiz“ hinzufügen

    Dadurch wird im Ordner Modelle des Projekts Notizen eine Klasse namens Notiz hinzugefügt.This will add a class named Note to the Models folder of the Notes project.

  6. Entfernen Sie in der Datei Note.cs den gesamten Vorlagencode, und ersetzen Sie ihn durch den folgenden: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 über jede 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 auf Datei > Speichern klicken (oder indem Sie ⌘+S drücken).Save the changes to Note.cs by choosing File > Save (or by pressing ⌘ + S).

  7. Wählen Sie im Lösungspad das Projekt Notizen aus, klicken Sie mit der rechten Maustaste darauf, und klicken Sie auf Hinzufügen > Neue Datei… . Klicken Sie im Dialogfeld Neue Datei auf Formular > XAML für Formular-ContentPage, nennen 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:

    Hinzufügen Xamarin.Forms Inhaltsseite

    Dadurch wird im Ordner Ansichten des Projekts eine neue Seite namens NoteEntryPage hinzugefügt.This will add a new page named NoteEntryPage to the Views folder of the project. Diese Seite wird für die Notizeingabe verwendet.This page will be used for note entry.

  8. Entfernen Sie in NoteEntryPage.xaml den gesamten Vorlagencode, und ersetzen Sie ihn durch den folgenden: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.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>
    

    Dieser Code definiert deklarativ die Benutzeroberfläche für die Seite, die aus einem Editor für die Texteingabe und zwei Button-Objekten besteht, 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 objects that direct the application to save or delete a file. Die beiden Button-Instanzen sind horizontal in einer Grid-Klasse angeordnet, wobei Editor und Grid vertikal in einer StackLayout-Klasse angeordnet sind.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 Editor Datenbindung, um die Text-Eigenschaft des Note-Modells zu binden.In addition, the Editor uses data binding to bind to the Text property of the Note model. Weitere Informationen zur Datenbindung finden Sie im Abschnitt Datenbindung des Artikels Ausführliche Erläuterungen zum Xamarin.Forms-Schnellstart.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 auf Datei > Speichern klicken (oder indem Sie ⌘+S drücken).Save the changes to NoteEntryPage.xaml by choosing File > Save (or by pressing ⌘ + S).

  9. Entfernen Sie dann in NoteEntryPage.xaml.cs den gesamten Vorlagencode, und ersetzen Sie ihn durch den folgenden:In NoteEntryPage.xaml.cs, remove all of the template code and replace it with the following code:

    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("..");
            }
        }
    }
    

    Dieser Code speichert in der BindingContext-Eigenschaft der Seite eine Note-Instanz, die für eine einzelne Notiz steht.This code stores a Note instance, which represents a single note, in the BindingContext of the page. Die Klasse wird mit einem QueryPropertyAttribute versehen, mit dem Daten während der Navigation über Abfrageparameter an die Seite übermittelt werden können.The class is decorated with a QueryPropertyAttribute that enables data to be passed into the page, during navigation, via query parameters. Das erste Argument für das QueryPropertyAttribute gibt den Namen der Eigenschaft, die die Daten empfangen soll, und das zweite Argument die ID des Abfrageparameters an. Das QueryParameterAttribute im oben stehenden Beispiel legt somit fest, dass die ItemId-Eigenschaft die im ItemId-Abfrageparameter übergebenen Daten aus dem in einem GoToAsync-Methodenaufruf angegebenen URI erhält.The first argument for the QueryPropertyAttribute specifies the name of the property that will receive the data, with the second argument specifying the query parameter id. Therefore, the QueryParameterAttribute in the above code specifies that the ItemId property will receive the data passed in the ItemId query parameter from the URI specified in a GoToAsync method call. Die ItemId-Eigenschaft ruft dann die LoadNote-Methode auf, um ein Note-Objekt aus der Datei auf dem Gerät zu erstellen, und legt den BindingContext der Seite auf das Note-Objekt fest.The ItemId property then calls the LoadNote method to create a Note object from the file on the device, and sets the BindingContext of the page to the Note object.

    Wenn auf die Button zum Speichern geklickt wird, wird der OnSaveButtonClicked-Ereignishandler ausgeführt. Entweder wird dann der Editor-Inhalt in eine neue Datei unter einem zufällig generierten Dateinamen gespeichert, oder in eine vorhandene Datei, wenn eine Notiz 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 mit lokalen Anwendungsdaten der Anwendung gespeichert.In both cases, the file is stored in the local application data folder for the application. Dann navigiert die Methode zurück zur vorherigen Seite.Then the method navigates back to the previous page. Wenn auf die Löschen-Button geklickt wird, wird der OnDeleteButtonClicked-Ereignishandler ausgeführt, sodass die Datei (falls vorhanden) gelöscht wird. Anschließend erfolgt die Navigation zurück zur vorherigen Seite.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 im Abschnitt Navigation des Artikels Ausführliche Erläuterungen zum Schnellstart für die Xamarin.Forms-Shell.For more information about navigation, see Navigation in the Xamarin.Forms Shell Quickstart Deep Dive.

    Speichern Sie die Änderungen an NoteEntryPage.xaml.cs, indem Sie auf Datei > Speichern klicken (oder indem Sie ⌘+S drücken).Save the changes to NoteEntryPage.xaml.cs by choosing File > Save (or by pressing ⌘ + S).

    Warnung

    Die Anwendung wird derzeit aufgrund von Fehlern, die in späteren Schritten korrigiert werden, nicht erstellt.The application will not currently build due to errors that will be fixed in subsequent steps.

  10. Öffnen Sie im Lösungspad im Projekt Notes die Datei NotesPage.xaml im Ordner Ansichten.In the Solution Pad, in the Notes project, open NotesPage.xaml in the Views folder.

  11. Entfernen Sie in NotesPage.xaml den gesamten Vorlagencode, und ersetzen Sie ihn durch den folgenden: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.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>
    

    In diesem Codeausschnitt wird die Benutzeroberfläche deklarativ für die Seite definiert, die aus den Klassen CollectionView und ToolbarItem besteht.This code declaratively defines the user interface for the page, which consists of a CollectionView and a ToolbarItem. Die CollectionView verwendet Datenbindung zum Anzeigen von Notizen, die von der Anwendung abgerufen werden.The CollectionView uses data binding to display any notes that are retrieved by the application. Durch Auswählen einer Notiz navigieren Sie zur NoteEntryPage, wo der Hinweis geändert werden kann.Selecting a note will navigate to the NoteEntryPage where the note can be modified. Alternativ kann auch eine neue Notiz erstellt werden, indem Sie auf ToolbarItem klicken.Alternatively, a new note can be created by pressing the ToolbarItem. Weitere Informationen zur Datenbindung finden Sie im Abschnitt Datenbindung des Artikels Ausführliche Erläuterungen zum Xamarin.Forms-Schnellstart.For more information about data binding, see Data binding in the Xamarin.Forms Quickstart Deep Dive.

    Speichern Sie die Änderungen an NotePages.xaml, indem Sie auf Datei > Speichern klicken (oder indem Sie ⌘+S drücken).Save the changes to NotesPage.xaml by choosing File > Save (or by pressing ⌘ + S).

  12. Erweitern Sie im Lösungspad im Projekt Notes den Eintrag NotesPage.xaml im Ordner Ansichten, und öffnen Sie die Datei NotesPage.xaml.cs.In the Solution Pad, in the Notes project, expand NotesPage.xaml in the Views folder and open NotesPage.xaml.cs.

  13. Entfernen Sie in NotesPage.xaml.cs den gesamten Vorlagencode, und ersetzen Sie ihn durch den folgenden: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 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}");
                }
            }
        }
    }
    

    Dieser Code definiert die Funktionalität für NotesPage.This code defines the functionality for the NotesPage. Wenn die Seite angezeigt wird, wird die OnAppearing-Methode ausgeführt, die in CollectionView alle Notizen lädt, die aus dem Ordner mit lokalen Anwendungsdaten abgerufen wurden.When the page appears, the OnAppearing method is executed, which populates the CollectionView with any notes that have been retrieved from the local application data folder. Wenn auf die ToolbarItem-Klasse geklickt wird, wird der OnAddClicked-Ereignishandler ausgeführt.When the ToolbarItem is pressed the OnAddClicked event handler is executed. Diese Methode navigiert zur NoteEntryPage.This method navigates to the NoteEntryPage. Wenn ein Element von CollectionView ausgewählt wird, wird der OnSelectionChanged-Ereignishandler ausgeführt.When an item in the CollectionView is selected the OnSelectionChanged event handler is executed. Diese Methode navigiert zur NoteEntryPage, sofern in der CollectionView ein Element ausgewählt ist, und übergibt die Filename-Eigenschaft des ausgewählten Note-Elements als Abfrageparameter an die Seite.This method navigates to the NoteEntryPage, provided that an item in the CollectionView is selected, passing the Filename property of the selected Note as a query parameter to the page. Weitere Informationen zur Navigation finden Sie im Abschnitt Navigation des Artikels Ausführliche Erläuterungen zum Xamarin.Forms-Schnellstart.For more information about navigation, see Navigation in the Xamarin.Forms Quickstart Deep Dive.

    Speichern Sie die Änderungen an NotePages.xaml.cs, indem Sie auf Datei > Speichern klicken (oder indem Sie ⌘+S drücken).Save the changes to NotesPage.xaml.cs by choosing File > Save (or by pressing ⌘ + S).

    Warnung

    Die Anwendung wird derzeit aufgrund von Fehlern, die in späteren Schritten korrigiert werden, nicht erstellt.The application will not currently build due to errors that will be fixed in subsequent steps.

  14. Erweitern Sie im Lösungspad im Projekt Notes den Eintrag AppShell.xaml, und öffnen Sie die Datei AppShell.xaml.cs.In the Solution Pad, in the Notes project, expand AppShell.xaml and open AppShell.xaml.cs. Ersetzen Sie dann den vorhandenen Code durch folgenden Code:Then replace the existing code with the following code:

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

    Dieser Code registriert eine Route für die NoteEntryPage, die in der visuellen Shellhierarchie nicht dargestellt wird.This code registers a route for the NoteEntryPage, which isn't represented in the Shell visual hierarchy. Diese Seite kann dann mithilfe der URI-basierten Navigation mit der GoToAsync-Methode aufgerufen werden.This page can then be navigated to using URI-based navigation, with the GoToAsync method.

    Speichern Sie die Änderungen an AppShell.xaml.cs, indem Sie auf Datei > Speichern klicken (oder indem Sie ⌘+S drücken).Save the changes to AppShell.xaml.cs by choosing File > Save (or by pressing ⌘ + S).

  15. Erweitern Sie im Lösungspad im Projekt Notes den Eintrag App.xaml, und öffnen Sie App.xaml.cs.In the Solution Pad, in the Notes project, expand App.xaml and open App.xaml.cs. Ersetzen Sie dann den vorhandenen Code durch 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 AppShell();
            }
    
            protected override void OnStart()
            {
            }
    
            protected override void OnSleep()
            {
            }
    
            protected override void OnResume()
            {
            }
        }
    }
    
    

    Dieser Code fügt eine Namespacedeklaration für den System.IO-Namespace hinzu, und fügt eine Deklaration für eine statische FolderPath-Eigenschaft mit dem Typ string hinzu.This code adds a namespace declaration for the System.IO namespace, and adds a declaration for a static FolderPath property of type string. Die FolderPath-Eigenschaft wird verwendet, um den Pfad auf dem Gerät zum Speicherort zu speichern, an dem die Notizendaten 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 Shell-Objekt mit Unterklassen.In addition, the code initializes the FolderPath property in the App constructor, and initializes the MainPage property to the subclassed Shell object.

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

  16. Erstellen Sie das Projekt auf jeder Plattform, und führen Sie dieses aus.Build and run the project on each platform. Weitere Informationen finden Sie unter Erstellen des Schnellstarts.For more information, see Building the quickstart.

    Klicken Sie auf der NotesPage auf die Schaltfläche Hinzufügen, um zur NoteEntryPage zu navigieren und eine Notiz einzugeben.On the NotesPage press the Add button to navigate to the NoteEntryPage and enter a note. Nach dem Speichern der Notiz navigiert die Anwendung zurück zur Eigenschaft NotesPage.After saving the note the application will navigate back to the NotesPage.

    Geben Sie verschiedene Notizen unterschiedlicher Länge ein, um das Verhalten der Anwendung zu beobachten.Enter several notes, of varying length, to observe the application behavior. Schließen Sie die Anwendung, und starten Sie sie neu, um sicherzustellen, dass die von Ihnen eingegebenen Notizen auf dem Gerät gespeichert wurden.Close the application and re-launch it to ensure that the notes you entered were saved to the device.

Nächste SchritteNext steps

In diesem Schnellstart haben Sie gelernt, wie Sie:In this quickstart, you learned how to:

  • Hinzufügen weiterer Seiten zu einer Xamarin.Forms-ShellanwendungAdd additional pages to a Xamarin.Forms Shell application.
  • Navigieren zwischen SeitenPerform navigation between pages.
  • Verwenden von Datenbindungen zum Synchronisieren von Daten zwischen Benutzeroberflächenelementen und ihren DatenquellenUse data binding to synchronize data between user interface elements and their data source.

Fahren Sie mit der nächsten Schnellstartanleitung fort, um die Anwendung so zu ändern, dass ihre Daten in einer lokalen SQLite.NET-Datenbank gespeichert werden.Continue to the next quickstart to modify the application so that it stores its data in a local SQLite.NET database.