Freigeben über

Erstellen einer Seite für eine Notiz

Jetzt erstellen Sie eine Seite, die es einem Benutzer ermöglicht, eine Notiz zu bearbeiten, und dann schreiben Sie den Code, um die Notiz zu speichern oder zu löschen.

Tipp

Sie können den Code für dieses Lernprogramm aus dem GitHub-Repository herunterladen oder anzeigen. Um den Code wie in diesem Schritt anzuzeigen, lesen Sie diesen Commit: Notizseite – Initial.

Fügen Sie zunächst die neue Seite zum Projekt hinzu:

  1. Klicken Sie im Projektmappen-Explorer-Bereich von Visual Studio mit der rechten Maustaste auf das WinUINotes-Projekt> "Neues Element>...".

  2. Wählen Sie im Dialogfeld " Neues Element hinzufügen " winUI in der Vorlagenliste auf der linken Seite des Fensters aus. Wählen Sie als Nächstes die Vorlage "Leere Seite (WinUI 3)" aus. Benennen Sie die Datei NotePage.xaml, und wählen Sie dann "Hinzufügen" aus.

  3. Die NotePage.xaml Datei wird auf einer neuen Registerkarte geöffnet, wobei alle XAML-Markups angezeigt werden, die die Benutzeroberfläche der Seite darstellen. Ersetzen Sie das <Grid> ... </Grid> Element im XAML-Code durch das folgende Markup:

    <Grid Padding="16" RowSpacing="8">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="400"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <TextBox x:Name="NoteEditor"
         AcceptsReturn="True"
         TextWrapping="Wrap"
         PlaceholderText="Enter your note"
         Header="New note"
         ScrollViewer.VerticalScrollBarVisibility="Auto"
         Width="400"
         Grid.Column="1"/>

    <StackPanel Orientation="Horizontal"
            HorizontalAlignment="Right"
            Spacing="4"
            Grid.Row="1" Grid.Column="1">
        <Button Content="Save" Style="{StaticResource AccentButtonStyle}"/>
        <Button Content="Delete"/>
    </StackPanel>
</Grid>

  4. Speichern Sie die Datei, indem Sie STRG+S drücken, auf das Symbol "Speichern" in der Symbolleiste klicken oder das Menü "Datei>speichern NotePage.xaml" auswählen.

    Wenn Sie die App gerade ausführen, wird die soeben erstellte Notizseite nicht angezeigt. Das liegt daran, dass Sie es trotzdem als Inhalt des Frame Steuerelements festlegen MainWindowmüssen.

  5. Öffnen MainWindow.xaml Und als NotePage im Folgenden festlegenFrame:

    <Frame x:Name="rootFrame" Grid.Row="1"
       SourcePageType="local:NotePage"/>

    Wenn Sie die App jetzt ausführen, Frame wird eine Instanz geladen NotePage und dem Benutzer angezeigt.

Von Bedeutung

XAML-Namespacezuordnungen (xmlns) sind das XAML-Gegenstück zur C# using -Anweisung. local: ist ein Präfix, das Für Sie innerhalb der XAML-Seiten für Ihr App-Projekt (xmlns:local="using:WinUINotes") zugeordnet ist. Es wird zugeordnet, um auf denselben Namespace zu verweisen, der erstellt wird, um das Attribut und den x:Class Code für alle XAML-Dateien einschließlich enthalten App.xaml. Solange Sie benutzerdefinierte Klassen definieren, die Sie in XAML in diesem Namespace verwenden möchten, können Sie das local: Präfix verwenden, um auf Ihre benutzerdefinierten Typen in XAML zu verweisen.

Lassen Sie uns die wichtigsten Teile der XAML-Steuerelemente auf der Seite aufgliedern:

Die benutzeroberfläche der neuen Notizseite, auf der das Raster von Visual Studio hervorgehoben ist.

  • Grid.RowDefinitions und Grid.ColumnDefinitions definieren ein Raster mit 2 Zeilen und 3 Spalten (platziert unter der Titelleiste).

    • Die untere Zeile wird automatisch (Auto) so angepasst, dass sie an den Inhalt angepasst wird, die beiden Schaltflächen. In der obersten Zeile werden alle verbleibenden vertikalen Abstände (*) verwendet.
    • Die mittlere Spalte ist 400epx breit und befindet sich dort, wo sich der Notiz-Editor befindet. Die Spalten auf beiden Seiten sind leer und teilen den verbleibenden horizontalen Abstand zwischen ihnen (*).

    Hinweis

    Aufgrund der Funktionsweise des Skalierungssystems, wenn Sie Ihre XAML-App entwerfen, entwerfen Sie in effektiven Pixeln und nicht in tatsächlichen physischen Pixeln. Effektive Pixel (Epx) sind eine virtuelle Maßeinheit und werden verwendet, um Layoutabmessungen und Abstände unabhängig von der Bildschirmdichte auszudrücken.

  • <TextBox x:Name="NoteEditor" ... > ... </TextBox> ist ein Texteingabesteuerelement (TextBox), das für die mehrzeilige Texteingabe konfiguriert ist und in der oberen mittleren Zelle der Grid (Grid.Column="1") platziert wird. Zeilen- und Spaltenindizes sind 0-basiert, und standardmäßig werden Steuerelemente in Zeile 0 und Spalte 0 des übergeordneten Elements Gridplatziert. Dies entspricht also der Angabe von Zeile 0, Spalte 1.

  • <StackPanel Orientation="Horizontal" ... > ... </StackPanel> definiert ein Layoutsteuerelement (StackPanel), das seine untergeordneten Elemente vertikal (Standard) oder horizontal stapelt. Sie wird in der unteren Mittleren Zelle der Grid (Grid.Row="1" Grid.Column="1") platziert.

    Hinweis

    Grid.Row="1" Grid.Column="1" ist ein Beispiel für angefügte XAML-Eigenschaften. Mit angefügten Eigenschaften kann ein XAML-Objekt eine Eigenschaft festlegen, die zu einem anderen XAML-Objekt gehört. Wie in diesem Fall können untergeordnete Elemente angefügte Eigenschaften verwenden, um ihr übergeordnetes Element darüber zu informieren, wie sie in der Benutzeroberfläche dargestellt werden sollen.

  • Zwei <Button> Steuerelemente befinden sich innerhalb der <StackPanel> horizontal angeordneten und angeordneten Steuerelemente. Sie fügen den Code hinzu, um die Click-Ereignisse der Schaltflächen im nächsten Abschnitt zu behandeln.

Weitere Informationen finden Sie in den Dokumenten:

Laden und Speichern einer Notiz

Öffnen Sie die NotePage.xaml.cs CodeBehind-Datei. Wenn Sie eine neue XAML-Datei hinzufügen, enthält der Code-Behind eine einzige Zeile im Konstruktor, einen Aufruf der InitializeComponent-Methode:

namespace WinUINotes
{
    public sealed partial class NotePage : Page
    {
        public NotePage()
        {
            this.InitializeComponent();
        }
    }
}

Die InitializeComponent-Methode liest das XAML-Markup und initialisiert alle vom Markup definierten Objekte. Die Objekte sind in ihrer verschachtelten Beziehung miteinander verbunden und die im Code definierten Event-Handler werden an die in der XAML festgelegten Ereignisse angehängt.

Jetzt fügen Sie der NotePage.xaml.cs CodeBehind-Datei Code hinzu, um das Laden und Speichern von Notizen zu verarbeiten.

  1. Fügen Sie der NotePage Klasse die folgenden Variablendeklarationen hinzu:

    public sealed partial class NotePage : Page
{
    private StorageFolder storageFolder = ApplicationData.Current.LocalFolder;
    private StorageFile? noteFile = null;
    private string fileName = "note.txt";

    Wenn eine Notiz gespeichert wird, wird sie im lokalen Speicher der App als Textdatei gespeichert.

    Sie verwenden die StorageFolder-Klasse , um auf den lokalen Datenordner der App zuzugreifen. Dieser Ordner ist spezifisch für Ihre App, sodass hier gespeicherte Notizen nicht von anderen Apps aufgerufen werden können. Sie verwenden die StorageFile-Klasse , um auf die in diesem Ordner gespeicherte Textdatei zuzugreifen. Der Name der Datei wird durch die fileName-Variable dargestellt. Legen Sie vorerst auf "fileName" fest.

  2. Erstellen Sie einen Ereignishandler für das Loaded-Ereignis der Notizseite.

    public NotePage()
{
    this.InitializeComponent();
    // ↓ Add this. ↓
    Loaded += NotePage_Loaded;
}

// ↓ Add this event handler method. ↓
private async void NotePage_Loaded(object sender, RoutedEventArgs e)
{
    noteFile = (StorageFile)await storageFolder.TryGetItemAsync(fileName);
    if (noteFile is not null)
    {
        NoteEditor.Text = await FileIO.ReadTextAsync(noteFile);
    }
}

    In dieser Methode rufen Sie TryGetItemAsync auf, um die Textdatei aus dem Ordner abzurufen. Wenn die Datei nicht vorhanden ist, wird sie zurückgegeben null. Wenn die Datei vorhanden ist, rufen Sie ReadTextAsync auf, um den Text aus der Datei in die NoteEditor des Steuerelements zu lesen. (Denken Sie daran, dass das Steuerelement, NoteEditor das TextBox Sie in der XAML-Datei erstellt haben. Sie verweisen hier in Ihrer CodeBehind-Datei mithilfe der x:Name zugewiesenen CodeBehind-Datei darauf.)

    Von Bedeutung

    Sie müssen diese Methode mit dem async Schlüsselwort markieren, da die Dateizugriffsaufrufe asynchron sind. Kurz gesagt, wenn Sie eine Methode aufrufen, die auf ...Async (z TryGetItemAsync. B.) endet, können Sie dem Aufruf den Await-Operator hinzufügen. Dadurch wird der nachfolgende Code erst ausgeführt, wenn der erwartete Aufruf abgeschlossen ist und die Benutzeroberfläche reaktionsfähig bleibt. Bei Verwendung awaitmuss die Methode, aus der Sie aufrufen, mit dem asynchronen Schlüsselwort gekennzeichnet werden. Weitere Informationen finden Sie unter Aufrufen asynchroner APIs in C#.

Weitere Informationen finden Sie in den Dokumenten:

Hinzufügen von Ereignishandlern

Fügen Sie als Nächstes die Click-Ereignishandler für die Schaltflächen " Speichern " und "Löschen " hinzu. Das Hinzufügen von Ereignishandlern ist etwas, das Sie beim Erstellen Ihrer Apps häufig ausführen, sodass Visual Studio mehrere Features bereitstellt, um dies zu vereinfachen.

  1. Platzieren Sie den Cursor in der NotePage.xaml Datei nach dem Content Attribut im Save-SteuerelementButton . Geben Sie Click= ein. Zu diesem Zeitpunkt sollte Visual Studio eine automatisch abgeschlossene Benutzeroberfläche auffüllen, die wie folgt aussieht:

    Screenshot der automatisch abgeschlossenen Benutzeroberfläche des neuen Ereignishandlers in Visual Studio im XAML-Editor

    • Drücken Sie die NACH-UNTEN-TASTE, um den neuen Ereignishandler< auszuwählen>, und drücken Sie dann die TAB-TASTE. Visual Studio schließt das Attribut mit Click="Button_Click" und fügt eine Ereignishandlermethode hinzu, die in der Button_Click CodeBehind-Datei benannt istNotePage.xaml.cs.

    Jetzt sollten Sie die Button_Click Methode in etwas aussagekräftiger umbenennen. Dies führen Sie in den folgenden Schritten aus.

  2. Suchen Sie in NotePage.xaml.cs, die Methode, die für Sie hinzugefügt wurde:

    private void Button_Click(object sender, RoutedEventArgs e)
{

}

    Tipp

    Um Code in Ihrer App zu finden, klicken Sie in der Titelleiste von Visual Studio auf "Suchen ", und verwenden Sie die Option "Codesuche ". Doppelklicken Sie auf das Suchergebnis, um den Code im Code-Editor zu öffnen.

    Suchfeature in Visual Studio

  3. Platzieren Sie den Cursor vor dem "B", Button und geben Sie ein Save. Warten Sie einen Moment, und der Methodenname wird grün hervorgehoben.

  4. Wenn Sie mit dem Mauszeiger auf den Methodennamen zeigen, zeigt Visual Studio eine QuickInfo mit einem Schraubenzieher oder Glühbirnensymbol an. Klicken Sie auf die Nach-unten-Taste neben dem Symbol, und klicken Sie dann auf "Button_Click" in "SaveButton_Click".

    Die Visual Studio-Methode benennt Popup-UI um.

    Visual Studio benennt die Methode überall in Ihrer App um, einschließlich in der XAML-Datei, in der Sie sie zuerst hinzugefügt Buttonhaben.

  5. Wiederholen Sie diese Schritte für die Schaltfläche "Löschen ", und benennen Sie die Methode DeleteButton_Clickin " um.

Nachdem die Ereignishandler verknüpft wurden, können Sie den Code hinzufügen, um die Notizdatei zu speichern und zu löschen.

  1. Fügen Sie diesen Code in der SaveButton_Click Methode hinzu, um die Datei zu speichern. Beachten Sie, dass Sie auch die Methodensignatur mit dem async Schlüsselwort aktualisieren müssen.

    private async void SaveButton_Click(object sender, RoutedEventArgs e)
{
    if (noteFile is null)
    {
        noteFile = await storageFolder.CreateFileAsync(fileName, CreationCollisionOption.ReplaceExisting);
    }
    await FileIO.WriteTextAsync(noteFile, NoteEditor.Text);
}

    In der SaveButton_Click Methode überprüfen Sie zunächst, ob noteFile erstellt wurde. Wenn dies der Name ist null, müssen Sie eine neue Datei im lokalen Speicherordner mit dem Namen erstellen, der durch die fileName Variable dargestellt wird, und die Datei der noteFile Variablen zuweisen. Anschließend schreiben Sie den Text im Steuerelement in TextBox die datei, dargestellt durch noteFile.

  2. Fügen Sie diesen Code in der DeleteButton_Click Methode hinzu, um die Datei zu löschen. Sie müssen die Methodensignatur auch hier mit dem async Schlüsselwort aktualisieren.

    private async void DeleteButton_Click(object sender, RoutedEventArgs e)
{
    if (noteFile is not null)
    {
        await noteFile.DeleteAsync();
        noteFile = null;
        NoteEditor.Text = string.Empty;
    }
}

    In der DeleteButton_Click Methode überprüfen Sie zunächst, ob noteFile vorhanden ist. Wenn dies der Fall ist, löschen Sie die Datei, die durch den lokalen Speicherordner dargestellt wird noteFile , und legen Sie sie noteFile auf null. Setzen Sie dann den Text im TextBox Steuerelement auf eine leere Zeichenfolge zurück.

    Von Bedeutung

    Nachdem die Textdatei aus dem Dateisystem gelöscht wurde, ist es wichtig, auf .noteFilenull Denken Sie daran, dass es sich um eine noteFile handelt, die Zugriff auf die Systemdatei in Ihrer App ermöglicht. Nachdem die Systemdatei gelöscht wurde, verweist sie immer noch auf die Stelle, noteFile an der sich die Systemdatei befand, weiß aber nicht, dass sie nicht mehr vorhanden ist. Wenn Sie versuchen, die Systemdatei jetzt zu lesen, zu schreiben oder zu löschen, wird eine Fehlermeldung angezeigt.

  3. Speichern Sie die Datei, indem Sie STRG+S drücken, auf das Symbol "Speichern" in der Symbolleiste klicken oder das Menü "Datei>speichern NotePage.xaml.cs" auswählen.

Der endgültige Code für die CodeBehind-Datei sollte wie folgt aussehen:

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using System;
using Windows.Storage;

namespace WinUINotes
{
    public sealed partial class NotePage : Page
    {
        private StorageFolder storageFolder = ApplicationData.Current.LocalFolder;
        private StorageFile? noteFile = null;
        private string fileName = "note.txt";

        public NotePage()
        {
            this.InitializeComponent();
            Loaded += NotePage_Loaded;
        }

        private async void NotePage_Loaded(object sender, RoutedEventArgs e)
        {
            noteFile = (StorageFile)await storageFolder.TryGetItemAsync(fileName);
            if (noteFile is not null)
            {
                NoteEditor.Text = await FileIO.ReadTextAsync(noteFile);
            }
        }

        private async void SaveButton_Click(object sender, RoutedEventArgs e)
        {
            if (noteFile is null)
            {
                noteFile = await storageFolder.CreateFileAsync(fileName, CreationCollisionOption.ReplaceExisting);
            }
            await FileIO.WriteTextAsync(noteFile, NoteEditor.Text);
        }

        private async void DeleteButton_Click(object sender, RoutedEventArgs e)
        {
            if (noteFile is not null)
            {
                await noteFile.DeleteAsync();
                noteFile = null;
                NoteEditor.Text = string.Empty;
            }
        }
    }
}

Testen der Notiz

Mit diesem Code können Sie die App testen, um sicherzustellen, dass die Notiz ordnungsgemäß gespeichert und geladen wird.

  1. Erstellen Sie das Projekt, und führen Sie es aus, indem Sie F5 drücken, in der Symbolleiste auf die Schaltfläche "Start debuggen" klicken oder das Menü "Debuggen starten> auswählen.
  2. Geben Sie in das Textfeld ein, und drücken Sie die Schaltfläche "Speichern".
  3. Schließen Sie die App, und starten Sie sie dann neu. Die eingegebene Notiz sollte aus dem Speicher des Geräts geladen werden.
  4. Drücken Sie die Entf-Taste .
  5. Schließen Sie die App, starten Sie sie neu. Sie sollten eine neue leere Notiz erhalten.

Von Bedeutung

Nachdem Sie bestätigt haben, dass das Speichern und Löschen einer Notiz ordnungsgemäß funktioniert, erstellen und speichern Sie erneut eine neue Notiz. Sie möchten eine gespeicherte Notiz haben, um die App in späteren Schritten zu testen.

Fahren Sie mit Schritt 3 fort – Hinzufügen einer Ansicht und eines Modells für die Notiz

  • Last updated on