Delen via

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 commit: notitie pagina - eerste.

Voeg eerst de nieuwe pagina toe aan het project:

  1. Klik in het deelvenster Solution Explorer van Visual Studio met de rechtermuisknop op het WinUINotes-project>Nieuw item>....

  2. Selecteer In het dialoogvenster Nieuw item toevoegenWinUI in de sjabloonlijst aan de linkerkant van het venster. Selecteer vervolgens de Lege pagina (WinUI) sjabloon. Geef het bestand NotePage.xamleen naam en selecteer vervolgens Toevoegen.

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

  4. 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 de Frame controle in MainWindow.

  5. Open MainWindow.xaml en stel NotePage in als het SourcePageType op Frame, zoals dit:

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

    Nu, wanneer u de app uitvoert, zal de Frame een instantie van NotePage laden en deze aan de gebruiker tonen.

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 zo ingesteld dat het verwijst naar dezelfde naamruimte die is gecreëerd om het x:Class kenmerk en de code voor alle XAML-bestanden, inclusief App.xaml, te bevatten. 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> bedieningselementen bevinden zich in de <StackPanel> en zijn horizontaal geordend. 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.

  1. 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 fileName in op "note.txt".

  2. 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 Text-eigenschap van het NoteEditor-besturingselement. (Onthoud dat NoteEditor de TextBox controle is die u heeft gemaakt in het XAML-bestand. U verwijst hiernaar in uw code-achterbestand met behulp van de x:Name die u eraan heeft 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 wordt de volgende code niet uitgevoerd totdat de wachtende aanroep is voltooid, waardoor uw gebruikersinterface responsief blijft. 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 klik-gebeurtenishandlers 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.

  1. Plaats uw cursor in het NotePage.xaml bestand na het Content kenmerk in het OpslaanButton besturingselement. Typ Click=. Op dit punt zou in Visual Studio een autocompletescherm moeten verschijnen dat er als volgt uitziet:

    Een schermopname van de autocomplete-interface voor gebeurtenis-handlers van Visual Studio in de XAML-editor

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

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

    Zoekfunctie in Visual Studio

  3. Plaats de cursor voor de 'B' in Button en typ Save. Wacht even en de naam van de methode wordt groen gemarkeerd.

  4. Wanneer u de muisaanwijzer boven de naam van de methode houdt, verschijnt er in Visual Studio een werkbalk met een schroevendraaier- of gloeilamppictogram. Klik op de pijl-omlaag naast het pictogram en klik vervolgens op Wijzig 'Button_Click' in 'SaveButton_Click'.

    De Visual Studio-methode om de naam te hernoemen van de pop-upinterface.

    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.

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

  1. 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 is aangemaakt. 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 de TextBox controle naar het bestand zoals vertegenwoordigd door noteFile.

  2. Voeg deze code toe aan de DeleteButton_Click methode om het bestand te verwijderen. U moet hier de methodesignature ook bijwerken met het async trefwoord.

    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 bestaat. Als dit het geval is, verwijdert u het bestand dat door noteFile wordt vertegenwoordigd uit de lokale opslagmap en stelt u noteFile in 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.

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

  1. Bouw het project en voer het uit door op F5 te drukken, op de 'Start'-knop voor debuggen in de werkbalk te klikken, of door het menu Run>Start Debugging te selecteren.
  2. Typ in het tekstvak en druk op de knop Opslaan .
  3. Sluit de app en start deze opnieuw. De ingevoerde notitie moet worden geladen vanuit de opslag van het apparaat.
  4. Druk op de knop Verwijderen .
  5. 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

  • Last updated on