Een pagina voor een notitie maken

U gaat nu een pagina maken waarmee een gebruiker een notitie kan bewerken en vervolgens de code schrijft om de notitie op te slaan of te verwijderen.

Aanbeveling

U kunt de code voor deze zelfstudie downloaden of bekijken vanuit de GitHub-opslagplaats. Als u de code in deze stap wilt zien, raadpleegt u deze doorvoering: notitiepagina - eerste.

Voeg eerst de nieuwe pagina toe aan het project:

Klik in het deelvenster Solution Explorer van Visual Studio met de rechtermuisknop op het WinUINotes-project>Nieuw item>....
Selecteer In het dialoogvenster Nieuw item toevoegenWinUI in de sjabloonlijst aan de linkerkant van het venster. Selecteer vervolgens de sjabloon Lege pagina (WinUI 3 ). Geef het bestand NotePage.xamleen naam en selecteer vervolgens Toevoegen.

Het NotePage.xaml bestand wordt geopend op een nieuw tabblad met alle XAML-markeringen die de gebruikersinterface van de pagina vertegenwoordigen. Vervang het <Grid> ... </Grid> element in de XAML door de volgende markeringen:

<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>

Sla het bestand op door op Ctrl+S te drukken, op het pictogram Opslaan te klikken in de werkbalk of door het menu Bestand>opslaan NotePage.xamlte selecteren.

Als u de app nu uitvoert, ziet u de notitiepagina die u zojuist hebt gemaakt niet. Dat komt omdat u het nog steeds moet instellen als de inhoud van het Frame besturingselement in MainWindow.
Open MainWindow.xaml en stel deze NotePage in als het SourcePageType op de Framevolgende pagina:
```
<Frame x:Name="rootFrame" Grid.Row="1"
       SourcePageType="local:NotePage"/>
```
Wanneer u de app uitvoert, wordt er Frame een exemplaar geladen van NotePage en weergegeven aan de gebruiker.

Belangrijk

XAML-naamruimtetoewijzingen (XMLNS) zijn de XAML-tegenhanger voor de C# using -instructie. local: is een voorvoegsel dat voor u is toegewezen binnen de XAML-pagina's voor uw app-project (xmlns:local="using:WinUINotes"). Het is toegewezen om te verwijzen naar dezelfde naamruimte die is gemaakt om het x:Class kenmerk en de code voor alle XAML-bestanden, inclusief App.xaml. Zolang u aangepaste klassen definieert die u in XAML in dezelfde naamruimte wilt gebruiken, kunt u het local: voorvoegsel gebruiken om te verwijzen naar uw aangepaste typen in XAML.

Laten we de belangrijkste onderdelen van de XAML-besturingselementen op de pagina opsplitsen:

De gebruikersinterface van de nieuwe notitiepagina met het raster gemarkeerd door Visual Studio.

De Grid.RowDefinitions en Grid.ColumnDefinitions definiëren een raster met 2 rijen en 3 kolommen (geplaatst onder de titelbalk).
- De onderste rij wordt automatisch (Auto) aangepast aan de inhoud, de twee knoppen. In de bovenste rij wordt alle resterende verticale ruimte (*) gebruikt.
- De middelste kolom is 400epx breed en is de plek waar de notitieeditor heen gaat. De kolommen aan beide zijden zijn leeg en splitsen alle resterende horizontale ruimte ertussen (*).
Opmerking

Vanwege de werking van het schaalsysteem, wanneer u uw XAML-app ontwerpt, ontwerpt u in effectieve pixels, niet in werkelijke fysieke pixels. Effectieve pixels (epx) zijn een virtuele maateenheid en worden gebruikt om indelingsdimensies en afstand uit te drukken, onafhankelijk van schermdichtheid.
<TextBox x:Name="NoteEditor" ... > ... </TextBox> is een besturingselement voor tekstinvoer (Tekstvak) dat is geconfigureerd voor tekstinvoer met meerdere regels en wordt in de bovenste middelste cel van de Grid (Grid.Column="1") geplaatst. Rij- en kolomindexen zijn gebaseerd op 0 en standaard worden besturingselementen in rij 0 en kolom 0 van het bovenliggende Griditem geplaatst. Dit is dus het equivalent van het opgeven van rij 0, kolom 1.
<StackPanel Orientation="Horizontal" ... > ... </StackPanel> definieert een indelingsbesturing (StackPanel) die de onderliggende elementen verticaal (standaard) of horizontaal stapelt. Deze wordt in de onderste middelste cel van de Grid (Grid.Row="1" Grid.Column="1") geplaatst.

Opmerking

Grid.Row="1" Grid.Column="1" is een voorbeeld van gekoppelde XAML-eigenschappen. Met gekoppelde eigenschappen kan één XAML-object een eigenschap instellen die deel uitmaakt van een ander XAML-object. In dit geval kunnen onderliggende elementen vaak gekoppelde eigenschappen gebruiken om hun bovenliggende element te informeren over hoe ze moeten worden gepresenteerd in de gebruikersinterface.
Twee <Button> besturingselementen bevinden zich in de <StackPanel> en horizontaal gerangschikt. U voegt de code toe om de klik-gebeurtenissen van de knoppen in de volgende sectie af te handelen.

Meer informatie in de documenten:

Een notitie laden en opslaan

Open het NotePage.xaml.cs code-behind-bestand. Wanneer u een nieuw XAML-bestand toevoegt, bevat de code-behind één regel in de constructor, een aanroep naar de methode InitializeComponent:

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

Met de methode InitializeComponent worden de XAML-markeringen gelezen en worden alle objecten geïnitialiseerd die zijn gedefinieerd door de markeringen. De objecten zijn verbonden in hun bovenliggende en onderliggende relaties en de gebeurtenis-handlers die in code zijn gedefinieerd, worden gekoppeld aan gebeurtenissen die zijn ingesteld in de XAML.

Nu gaat u code toevoegen aan het NotePage.xaml.cs code-behind-bestand om het laden en opslaan van notities te verwerken.

Voeg de volgende variabeledeclaraties toe aan de NotePage klasse:
```
public sealed partial class NotePage : Page
{
    private StorageFolder storageFolder = ApplicationData.Current.LocalFolder;
    private StorageFile? noteFile = null;
    private string fileName = "note.txt";
```
Wanneer een notitie wordt opgeslagen, wordt deze opgeslagen in de lokale opslag van de app als tekstbestand.

U gebruikt de StorageFolder-klasse voor toegang tot de lokale gegevensmap van de app. Deze map is specifiek voor uw app, dus notities die hier zijn opgeslagen, kunnen niet worden geopend door andere apps. U gebruikt de StorageFile-klasse voor toegang tot het tekstbestand dat in deze map is opgeslagen. De naam van het bestand wordt vertegenwoordigd door de variabele fileName. Stel voorlopig in fileName op 'note.txt'.
Maak een gebeurtenis-handler voor de geladen gebeurtenis van de notitiepagina.
```
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 deze methode roept u TryGetItemAsync aan om het tekstbestand op te halen uit de map. Als het bestand niet bestaat, wordt het geretourneerd null. Als het bestand bestaat, roept u ReadTextAsync aan om de tekst uit het bestand te lezen in de eigenschap NoteEditor van het besturingselement. (Onthoud dat dit NoteEditor het TextBox besturingselement is dat u hebt gemaakt in het XAML-bestand. U verwijst hier naar het bestand achter de code met behulp van het x:Name bestand dat u eraan hebt toegewezen.)

Belangrijk

U moet deze methode markeren met het async trefwoord omdat de aanroepen voor bestandstoegang asynchroon zijn. Kortom, als u een methode aanroept die eindigt ...Async op (zoals TryGetItemAsync), kunt u de wachtoperator toevoegen aan de aanroep. Hierdoor blijft de volgende code worden uitgevoerd totdat de wachtende aanroep is voltooid en blijft uw gebruikersinterface responsief. Wanneer u gebruikt await, moet de methode van waaruit u aanroept, worden gemarkeerd met het asynchrone trefwoord. Zie Asynchrone API's aanroepen in C# voor meer informatie.

Meer informatie in de documenten:

Gebeurtenis-handlers toevoegen

Voeg vervolgens de gebeurtenis-handlers klik toe voor de knoppen Opslaan en Verwijderen . Het toevoegen van gebeurtenis-handlers is iets wat u vaak doet tijdens het maken van uw apps, dus Visual Studio biedt verschillende functies om het eenvoudiger te maken.

Plaats de cursor in het NotePage.xaml bestand na het Content kenmerk in het besturingselement OpslaanButton . Typ Click=. Op dit moment wordt in Visual Studio een gebruikersinterface weergegeven die er als volgt uitziet:
- Druk op de pijl-omlaag om Nieuwe gebeurtenis-handler< te selecteren> en druk vervolgens op Tab. Visual Studio voltooit het kenmerk met Click="Button_Click" en voegt een gebeurtenis-handlermethode toe met de naam Button_Click in het NotePage.xaml.cs code-behind-bestand.
Nu moet u de naam van de Button_Click methode wijzigen in iets zinvoller. U doet dit in de volgende stappen.
Zoek in NotePage.xaml.csde methode die voor u is toegevoegd:
```
private void Button_Click(object sender, RoutedEventArgs e)
{

}
```
Aanbeveling

Als u code in uw app wilt zoeken, klikt u op Zoeken in de titelbalk van Visual Studio en gebruikt u de optie Code zoeken . Dubbelklik op het zoekresultaat om de code in de code-editor te openen.
Plaats de cursor voor de 'B' in Button en typ Save. Wacht even en de naam van de methode wordt groen gemarkeerd.
Wanneer u de muisaanwijzer boven de naam van de methode houdt, wordt in Visual Studio knopinfo weergegeven met een schroevendraaier of gloeilamppictogram. Klik op de pijl-omlaag naast het pictogram en klik vervolgens op Naam van Button_Click wijzigen in 'SaveButton_Click'.

Visual Studio wijzigt de naam van de methode overal in uw app, inclusief in het XAML-bestand waar u deze voor het eerst aan het Buttonbestand hebt toegevoegd.
Herhaal deze stappen voor de knop Verwijderen en wijzig de naam van de methode in DeleteButton_Click.

Nu de gebeurtenis-handlers zijn gekoppeld, kunt u de code toevoegen om het notitiebestand op te slaan en te verwijderen.

Voeg deze code toe aan de SaveButton_Click methode om het bestand op te slaan. U moet ook de methodehandtekening bijwerken met het async trefwoord.
```
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 de SaveButton_Click methode controleert u eerst of noteFile deze is gemaakt. Als dit het is null, moet u een nieuw bestand maken in de lokale opslagmap met de naam die wordt vertegenwoordigd door de fileName variabele en het bestand toewijzen aan de noteFile variabele. Vervolgens schrijft u de tekst in het TextBox besturingselement naar het bestand dat wordt vertegenwoordigd door noteFile.
Voeg deze code toe aan de DeleteButton_Click methode om het bestand te verwijderen. U moet de methodehandtekening ook bijwerken met het async trefwoord hier.
```
private async void DeleteButton_Click(object sender, RoutedEventArgs e)
{
    if (noteFile is not null)
    {
        await noteFile.DeleteAsync();
        noteFile = null;
        NoteEditor.Text = string.Empty;
    }
}
```
In de DeleteButton_Click methode controleert u eerst of noteFile deze bestaat. Als dit het geval is, verwijdert u het bestand dat wordt vertegenwoordigd door noteFile de lokale opslagmap en stelt u deze in noteFile op null. Stel vervolgens de tekst in het TextBox besturingselement opnieuw in op een lege tekenreeks.

Belangrijk

Nadat het tekstbestand uit het bestandssysteem is verwijderd, is het belangrijk om in te stellen noteFile op null. Houd er rekening mee dat dit noteFile een StorageFile is die toegang biedt tot het systeembestand in uw app. Nadat het systeembestand is verwijderd, noteFile verwijst het nog steeds naar de locatie waar het systeembestand was, maar weet niet meer dat het niet meer bestaat. Als u het systeembestand nu probeert te lezen, schrijven of verwijderen, krijgt u een foutmelding.
Sla het bestand op door op Ctrl+S te drukken, op het pictogram Opslaan te klikken in de werkbalk of door het menu Bestand>opslaan NotePage.xaml.cste selecteren.

De uiteindelijke code voor het bestand code-behind moet er als volgt uitzien:

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;
            }
        }
    }
}

De notitie testen

Met deze code kunt u de app testen om ervoor te zorgen dat de notitie correct wordt opgeslagen en geladen.

Bouw het project en voer het uit door op F5 te drukken, op de knop Foutopsporing 'Start' in de werkbalk te klikken of door het menu> uitvoeren te selecteren.
Typ in het tekstvak en druk op de knop Opslaan .
Sluit de app en start deze opnieuw. De ingevoerde notitie moet worden geladen vanuit de opslag van het apparaat.
Druk op de knop Verwijderen .
Sluit de app en start deze opnieuw. U krijgt een nieuwe lege notitie te zien.

Belangrijk

Nadat u hebt bevestigd dat het opslaan en verwijderen van een notitie correct werkt, maakt en slaat u een nieuwe notitie opnieuw op. U wilt een opgeslagen notitie hebben om de app in latere stappen te testen.

Doorgaan met stap 3: een weergave en model voor de notitie toevoegen

Feedback

Is deze pagina nuttig?

Last updated on 2025-09-03