Een .NET MAUI-app maken

Artikel
Developer (Beginner)
48 minuten om te voltooien

Deze reeks zelfstudies is ontworpen om te laten zien hoe u een .NET MULTI-Platform App UI-app (.NET ADVISOR) maakt die alleen platformoverschrijdende code gebruikt. Dit betekent dat de code die u schrijft, niet specifiek is voor Windows, Android, iOS of macOS. De app die u maakt, is een app voor het maken van notities, waar de gebruiker meerdere notities kan maken, opslaan en laden.

In deze zelfstudie leert u het volgende:

Maak een .NETSHELL Shell-app.
Voer uw app uit op het gekozen platform.
Definieer de gebruikersinterface met eXtensible Application Markup Language (XAML) en communiceer met XAML-elementen via code.
Maak weergaven en bind ze aan gegevens.
Gebruik navigatie om naar en van pagina's te gaan.

U gebruikt Visual Studio 2022 om een toepassing te maken waarmee u een notitie kunt invoeren en opslaan in de apparaatopslag. De laatste toepassing wordt hieronder weergegeven:

De app-shell aanpassen

42 minuten resterend

Wanneer Visual Studio een .NET MAUI-project maakt, worden er vier belangrijke codebestanden gegenereerd. Deze zijn te zien in het deelvenster Solution Explorer van Visual Studio:

Solution Explorer met de bestanden voor een .NET MAUI-project in Visual Studio.

Met deze bestanden kunt u de .NET MAUI-app configureren en uitvoeren. Elk bestand heeft een ander doel, zoals hieronder wordt beschreven:

MauiProgram.cs

Dit is een codebestand waarmee uw app wordt opgestart. De code in dit bestand fungeert als het platformoverschrijdende toegangspunt van de app, waarmee de app wordt geconfigureerd en gestart. De opstartcode van de sjabloon verwijst naar de App-klasse die is gedefinieerd door het bestand App.xaml.
App.xaml- en App.xaml.cs

Om het eenvoudig te houden, worden beide bestanden aangeduid als één bestand. Er zijn over het algemeen twee bestanden met elk XAML-bestand, het .xaml-bestand zelf en een bijbehorend codebestand dat een onderliggend item is in de Solution Explorer-. Het bestand .xaml bevat XAML-opmaak en het codebestand bevat code die door de gebruiker is gemaakt om te communiceren met de XAML-opmaak.

Het bestand App.xaml bevat XAML-resources voor de hele app, zoals kleuren, stijlen of sjablonen. Het bestand App.xaml.cs bevat doorgaans code waarmee de Shell-toepassing wordt geïnstitueert. In dit project verwijst het naar de klasse AppShell.
AppShell.xaml en AppShell.xaml.cs

Dit bestand definieert de AppShell-klasse, die wordt gebruikt om de visuele hiërarchie van de app te definiëren.
MainPage.xaml en MainPage.xaml.cs

Dit is de opstartpagina die door de app wordt weergegeven. Het MainPage.xaml-bestand definieert de gebruikersinterface (gebruikersinterface) van de pagina. MainPage.xaml.cs bevat de code-behind voor de XAML, zoals code voor een knopklikgebeurtenis.

Een infopagina toevoegen

De eerste aanpassing die u gaat uitvoeren, is het toevoegen van een andere pagina aan het project. Deze pagina is een 'about'-pagina, die informatie over deze app vertegenwoordigt, zoals de auteur, versie en misschien een koppeling voor meer informatie.

Klik in het deelvenster Solution Explorer van Visual Studio met de rechtermuisknop op het Notes project >Add>New Item....
Selecteer in het dialoogvenster Add New Item.NET MAUI in de lijst met sjablonen aan de linkerkant van het venster. Selecteer vervolgens de sjabloon .NETBYTES ContentPage (XAML). Noem het bestand AboutPage.xamlen selecteer Toevoegen.

Het bestand AboutPage.xaml opent een nieuw documenttabblad met alle XAML-markeringen die de gebruikersinterface van de pagina vertegenwoordigen. Vervang de XAML-markering door de volgende markeringen:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Notes.AboutPage">
    <VerticalStackLayout Spacing="10" Margin="10">
        <HorizontalStackLayout Spacing="10">
            <Image Source="dotnet_bot.png"
                   SemanticProperties.Description="The dot net bot waving hello!"
                   HeightRequest="64" />
            <Label FontSize="22" FontAttributes="Bold" Text="Notes" VerticalOptions="End" />
            <Label FontSize="22" Text="v1.0" VerticalOptions="End" />
        </HorizontalStackLayout>

        <Label Text="This app is written in XAML and C# with .NET MAUI." />
        <Button Text="Learn more..." Clicked="LearnMore_Clicked" />
    </VerticalStackLayout>
</ContentPage>

Sla het bestand op door op Ctrl+S- te drukken of door het menu te selecteren Bestand>AboutPage.xaml opslaan.

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

<ContentPage> is het hoofdobject voor de klasse AboutPage.
<VerticalStackLayout> is het enige onderliggende object van de ContentPage. ContentPage mag slechts één onderliggend object hebben. Het VerticalStackLayout type kan meerdere onderliggende items hebben. Met dit besturingselement voor indeling worden de onderliggende items verticaal gerangschikt, één na de andere.
<HorizontalStackLayout> werkt hetzelfde als een <VerticalStackLayout>, met uitzondering van de kinderen horizontaal gerangschikt.
<Image> een afbeelding weergeeft, wordt in dit geval de dotnet_bot.png afbeelding gebruikt die bij elk .NET MAUI-project wordt geleverd.

Belangrijk

Het bestand dat aan het project is toegevoegd, is eigenlijk dotnet_bot.svg. .NET MAUI converteert SVG-bestanden (Scalable Vector Graphics) naar PNG-bestanden (Portable Network Graphic) op basis van het doelapparaat. Daarom moet bij het toevoegen van een SVG-bestand aan uw .NET MAUI-app-project worden verwezen vanuit XAML of C# met een .png-extensie. De enige verwijzing naar het SVG-bestand moet in het projectbestand staan.
<Label> besturingselementen geven tekst weer.
<Button> besturingselementen kunnen worden ingedrukt door de gebruiker, waardoor de gebeurtenis Clicked wordt gegenereerd. U kunt code uitvoeren als reactie op de Clicked gebeurtenis.
Clicked="LearnMore_Clicked"

De Clicked gebeurtenis van de knop wordt toegewezen aan de LearnMore_Clicked gebeurtenis-handler, die wordt gedefinieerd in het code-behind-bestand. In de volgende stap maakt u deze code.

De klikgebeurtenis afhandelen

De volgende stap bestaat uit het toevoegen van de code voor de Clicked gebeurtenis van de knop.

Vouw in het deelvenster Solution Explorer van Visual Studio het bestand AboutPage.xaml uit om het bestand met code-behind weer te geven AboutPage.xaml.cs. Dubbelklik vervolgens op het AboutPage.xaml.cs-bestand om het te openen in de code-editor.
Voeg de volgende LearnMore_Clicked gebeurtenishandlercode toe, waarmee de systeembrowser wordt geopend naar een specifieke URL:
```
private async void LearnMore_Clicked(object sender, EventArgs e)
{
    // Navigate to the specified URL in the system browser.
    await Launcher.Default.OpenAsync("https://aka.ms/maui");
}
```
U ziet dat het trefwoord async is toegevoegd aan de methodedeclaratie, waardoor het gebruik van het await trefwoord bij het openen van de systeembrowser mogelijk is.
Sla het bestand op door op Ctrl+S- te drukken of door het menu Bestand>Opslaan AboutPage.xaml.cste selecteren.

Nu de XAML en code-behind van de AboutPage is voltooid, moet u deze in de app weergeven.

Afbeeldingsbronnen toevoegen

Sommige besturingselementen kunnen afbeeldingen gebruiken, wat de interactie van gebruikers met uw app verbetert. In deze sectie downloadt u twee afbeeldingen die u in uw app gaat gebruiken, samen met twee alternatieve afbeeldingen voor gebruik met iOS.

Download de volgende afbeeldingen:

-pictogram: Info over
Deze afbeelding wordt gebruikt als pictogram voor de pagina over de pagina die u eerder hebt gemaakt.
-pictogram: notities
Deze afbeelding wordt gebruikt als pictogram voor de notitiepagina die u in het volgende deel van deze zelfstudie gaat maken.
-pictogram: Over (iOS)
-pictogram: notities (iOS)

Nadat u de afbeeldingen hebt gedownload, kunt u deze verplaatsen met Verkenner naar de map Resources\Images van het project. Elk bestand in deze map wordt automatisch in het project opgenomen als een -resource Voor. U kunt Visual Studio ook gebruiken om de afbeeldingen aan uw project toe te voegen. Als u de afbeeldingen handmatig verplaatst, slaat u de volgende procedure over.

Belangrijk

Sla het downloaden van de iOS-specifieke installatiekopieën niet over. Ze moeten deze zelfstudie voltooien.

De afbeeldingen verplaatsen met Visual Studio

Vouw in het deelvenster Solution Explorer van Visual Studio de map Resources uit, waarin de map Afbeeldingen wordt weergegeven.

Fooi

U kunt Verkenner gebruiken om de afbeeldingen rechtstreeks naar het deelvenster Solution Explorer te slepen en neer te zetten, boven op de map Afbeeldingen. Hiermee worden de bestanden automatisch naar de map verplaatst en opgenomen in het project. Als u ervoor kiest om de bestanden te slepen en neer te zetten, negeert u de rest van deze procedure.
Klik met de rechtermuisknop op Afbeeldingen en selecteer Bestaand item toevoegen>....
Navigeer naar de map met de gedownloade afbeeldingen.
Wijzig het filter in het bestandstypefilter in Afbeeldingsbestanden.
Houd Ctrl- ingedrukt en klik op elk van de afbeeldingen die u hebt gedownload en druk vervolgens op toevoegen

Voeg vier pictogramafbeeldingen toe aan het .NET MAUI-project.

De app Shell wijzigen

Zoals vermeld aan het begin van dit artikel, definieert de AppShell klasse de visuele hiërarchie van een app, de XAML-markering die wordt gebruikt bij het maken van de gebruikersinterface van de app. Werk de XAML bij om een TabBar besturingselement toe te voegen:

Dubbelklik op het bestand AppShell.xaml in het deelvenster Solution Explorer om de XAML-editor te openen. Vervang de XAML-markering door de volgende code:

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="Notes.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:Notes"
    Shell.FlyoutBehavior="Disabled">

    <TabBar>
        <ShellContent
            Title="Notes"
            ContentTemplate="{DataTemplate local:MainPage}"
            Icon="{OnPlatform 'icon_notes.png', iOS='icon_notes_ios.png', MacCatalyst='icon_notes_ios.png'}" />

        <ShellContent
            Title="About"
            ContentTemplate="{DataTemplate local:AboutPage}"
            Icon="{OnPlatform 'icon_about.png', iOS='icon_about_ios.png', MacCatalyst='icon_about_ios.png'}" />
    </TabBar>

</Shell>

Sla het bestand op door op Ctrl+S- te drukken of door het menu te selecteren Bestand>AppShell.xaml opslaan.

Laten we de belangrijkste onderdelen van de XAML opsplitsen:

<Shell> is het hoofdobject van de XAML-opmaak.
<TabBar> is de inhoud van de Shell.
Twee <ShellContent> objecten in de <TabBar>. Voordat u de sjablooncode hebt vervangen, was er één <ShellContent> object dat naar de MainPage pagina wijst.

De TabBar en de onderliggende elementen vertegenwoordigen geen elementen van de gebruikersinterface, maar in plaats daarvan de organisatie van de visuele hiërarchie van de app. Shell gebruikt deze objecten en produceert de gebruikersinterface voor de inhoud, met een balk bovenaan die elke pagina vertegenwoordigt. De eigenschap ShellContent.Icon voor elke pagina maakt gebruik van de OnPlatform markeringsextensie. Deze XAML-markeringsextensie wordt gebruikt om verschillende waarden voor verschillende platforms op te geven. In dit voorbeeld gebruikt elk platform standaard het icon_about.png-pictogram, maar iOS en MacCatalyst gebruiken icon_about_ios.png.

Elk <ShellContent> object verwijst naar een pagina die moet worden weergegeven. Dit wordt ingesteld door de eigenschap ContentTemplate.

De app uitvoeren

Voer de app uit door op F5 te drukken of door boven aan Visual Studio op de afspeelknop te drukken:

U ziet dat er twee tabbladen zijn: Notities en Over. Druk op het tabblad Over en de app gaat naar de AboutPage die u hebt gemaakt. Druk op de knop Meer informatie... om de webbrowser te openen.

Over pagina van de .NET MAUI-app-zelfstudie.

Sluit de app en ga terug naar Visual Studio. Als u de Android-emulator gebruikt, beëindigt u de app op het virtuele apparaat of drukt u op de stopknop boven aan Visual Studio:

Een pagina voor een notitie maken

32 minuten resterend

Nu de app de MainPage en AboutPagebevat, kunt u beginnen met het maken van de rest van de app. Eerst maakt u een pagina waarmee een gebruiker notitie kan maken en weergeven. Vervolgens schrijft u de code om de notitie te laden en op te slaan.

Op de notitiepagina wordt de notitie weergegeven en kunt u deze opslaan of verwijderen. Voeg eerst de nieuwe pagina toe aan het project:

Klik in het deelvenster Solution Explorer van Visual Studio met de rechtermuisknop op het Notes project >Add>New Item....
Selecteer in het dialoogvenster Add New Item.NET MAUI in de lijst met sjablonen aan de linkerkant van het venster. Selecteer vervolgens de sjabloon .NETBYTES ContentPage (XAML). Noem het bestand NotePage.xamlen selecteer Toevoegen.

Het bestand NotePage.xaml wordt geopend op een nieuw tabblad, waarin alle XAML-markeringen worden weergegeven die de gebruikersinterface van de pagina vertegenwoordigen. Vervang de XAML-codemarkeringen door de volgende markeringen:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Notes.NotePage"
             Title="Note">
    <VerticalStackLayout Spacing="10" Margin="5">
        <Editor x:Name="TextEditor"
                Placeholder="Enter your note"
                HeightRequest="100" />

        <Grid ColumnDefinitions="*,*" ColumnSpacing="4">
            <Button Text="Save"
                    Clicked="SaveButton_Clicked" />

            <Button Grid.Column="1"
                    Text="Delete"
                    Clicked="DeleteButton_Clicked" />
        </Grid>
    </VerticalStackLayout>
</ContentPage>

Sla het bestand op door op Ctrl+S- te drukken of door het menu te selecteren Bestand>NotePage.xaml opslaan.

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

<VerticalStackLayout> de onderliggende besturingselementen verticaal rangschikt, een onder de andere.
<Editor> is een besturingselement voor teksteditor met meerdere regels en is het eerste besturingselement binnen VerticalStackLayout.
<Grid> is een indelingsregelaar en is het tweede besturingselement in VerticalStackLayout.

Met dit besturingselement worden kolommen en rijen gedefinieerd om cellen te maken. Onderliggende besturingselementen worden in deze cellen geplaatst.

Standaard bevat het besturingselement Grid één rij en kolom, waardoor één cel wordt gemaakt. Kolommen worden gedefinieerd met een breedte en de * waarde voor breedte geeft aan dat de kolom zoveel mogelijk ruimte moet vullen. In het vorige fragment zijn twee kolommen gedefinieerd, waarbij beide zoveel mogelijk ruimte worden gebruikt, waardoor de kolommen gelijkmatig worden verdeeld in de toegewezen ruimte: ColumnDefinitions="*,*". De kolomgrootten worden gescheiden door een , teken.

Kolommen en rijen die zijn gedefinieerd door een Grid worden geïndexeerd vanaf 0. De eerste kolom zou dus index 0 zijn, de tweede kolom is index 1, enzovoort.
Twee <Button> besturingselementen bevinden zich in de <Grid> en hebben een kolom toegewezen. Als een onderliggend besturingselement geen kolomtoewijzing definieert, wordt dit automatisch toegewezen aan de eerste kolom. In deze markering is de eerste knop de knop Opslaan en automatisch toegewezen aan de eerste kolom, kolom 0. De tweede knop is de knop Verwijderen en toegewezen aan de tweede kolom, kolom 1.

U ziet dat de twee knoppen de Clicked gebeurtenis hebben verwerkt. In de volgende sectie voegt u de code voor deze handlers toe.

Een notitie laden en opslaan

Open het bestand NotePage.xaml.cs code-behind. U kunt de code-behind openen voor het bestand NotePage.xaml op drie manieren:

Als de NotePage.xaml- is geopend en het actieve document wordt bewerkt, drukt u op F7-.
Als de NotePage.xaml- is geopend en het actieve document wordt bewerkt, klikt u met de rechtermuisknop in de teksteditor en selecteert u Code weergeven.
Gebruik de Solution Explorer- om de vermelding NotePage.xaml uit te vouwen, zodat het bestand NotePage.xaml.cs wordt weergegeven. Dubbelklik op het bestand om het te openen.

Wanneer u een nieuw XAML-bestand toevoegt, bevat de code-behind één regel in de constructor, een aanroep naar de methode InitializeComponent:

namespace Notes;

public partial class NotePage : ContentPage
{
    public NotePage()
    {
        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 u meer begrijpt over code-behind-bestanden, gaat u code toevoegen aan het NotePage.xaml.cs bestand met code-achter om het laden en opslaan van notities te verwerken.

Wanneer een notitie wordt gemaakt, wordt deze als tekstbestand op het apparaat opgeslagen. De naam van het bestand wordt vertegenwoordigd door de variabele _fileName. Voeg de volgende string variabeledeclaratie toe aan de klasse NotePage:
```
public partial class NotePage : ContentPage
{
    string _fileName = Path.Combine(FileSystem.AppDataDirectory, "notes.txt");
```
De bovenstaande code bouwt een pad naar het bestand op, waarbij het wordt opgeslagen in de lokale gegevensmap van de app. De bestandsnaam is notes.txt.
Lees in de constructor van de klasse, nadat de methode InitializeComponent is aangeroepen, het bestand van het apparaat en sla de inhoud ervan op in de eigenschap Text van het besturingselement TextEditor:
```
public NotePage()
{
    InitializeComponent();

    if (File.Exists(_fileName))
        TextEditor.Text = File.ReadAllText(_fileName);
}
```
Voeg vervolgens de code toe voor het afhandelen van de Clicked gebeurtenissen die zijn gedefinieerd in de XAML:
```
private void SaveButton_Clicked(object sender, EventArgs e)
{
    // Save the file.
    File.WriteAllText(_fileName, TextEditor.Text);
}

private void DeleteButton_Clicked(object sender, EventArgs e)
{
    // Delete the file.
    if (File.Exists(_fileName))
        File.Delete(_fileName);

    TextEditor.Text = string.Empty;
}
```
De methode SaveButton_Clicked schrijft de tekst in het besturingselement Editor naar het bestand dat wordt vertegenwoordigd door de _fileName variabele.

De methode DeleteButton_Clicked controleert eerst of het bestand dat wordt vertegenwoordigd door de _fileName variabele en als deze bestaat, het bestand verwijdert. Vervolgens wordt de tekst van het Editor besturingselement gewist.
Sla het bestand op door op Ctrl+S- te drukken of door het menu Bestand>Opslaan NotePage.xaml.cste selecteren.

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

namespace Notes;

public partial class NotePage : ContentPage
{
    string _fileName = Path.Combine(FileSystem.AppDataDirectory, "notes.txt");

    public NotePage()
    {
        InitializeComponent();

        if (File.Exists(_fileName))
            TextEditor.Text = File.ReadAllText(_fileName);
    }

    private void SaveButton_Clicked(object sender, EventArgs e)
    {
        // Save the file.
        File.WriteAllText(_fileName, TextEditor.Text);
    }

    private void DeleteButton_Clicked(object sender, EventArgs e)
    {
        // Delete the file.
        if (File.Exists(_fileName))
            File.Delete(_fileName);

        TextEditor.Text = string.Empty;
    }
}

De notitie testen

Nu notitiepagina is voltooid, hebt u een manier nodig om deze aan de gebruiker te presenteren. Open het bestand AppShell.xaml en wijzig de eerste ShellContent invoer zodat deze verwijst naar de NotePage in plaats van MainPage:

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="Notes.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:Notes"
    Shell.FlyoutBehavior="Disabled">

    <TabBar>
        <ShellContent
            Title="Notes"
            ContentTemplate="{DataTemplate local:NotePage}"
            Icon="{OnPlatform 'icon_notes.png', iOS='icon_notes_ios.png', MacCatalyst='icon_notes_ios.png'}" />

        <ShellContent
            Title="About"
            ContentTemplate="{DataTemplate local:AboutPage}"
            Icon="{OnPlatform 'icon_about.png', iOS='icon_about_ios.png', MacCatalyst='icon_about_ios.png'}" />
    </TabBar>

</Shell>

Sla het bestand op en voer de app uit. Typ in het invoervak en druk op de knop Opslaan. Sluit de app en open deze opnieuw. De ingevoerde notitie moet worden geladen vanuit de opslag van het apparaat.

Notitievermeldingspagina in de .NET MAUI-app.

Gegevens binden aan de gebruikersinterface en door pagina's navigeren

22 minuten resterend

In dit gedeelte van de zelfstudie worden de concepten van weergaven, modellen en navigatie in apps geïntroduceerd.

In de vorige stappen van de zelfstudie hebt u twee pagina's aan het project toegevoegd: NotePage en AboutPage. De pagina's vertegenwoordigen een weergave van gegevens. Het NotePage is een 'weergave' die 'notitiegegevens' weergeeft en de AboutPage een 'weergave' is waarin 'app-gegevens' worden weergegeven. Beide weergaven hebben een model van die gegevens die in code zijn vastgelegd of erin zijn ingesloten. U moet het gegevensmodel scheiden van de weergave.

Wat is het voordeel van het scheiden van het model uit de weergave? Hiermee kunt u de weergave ontwerpen om elk deel van het model weer te geven en te gebruiken zonder dat u zich zorgen hoeft te maken over de daadwerkelijke code waarmee het model wordt geïmplementeerd. Dit wordt bereikt met behulp van gegevensbinding, iets dat verderop in deze zelfstudie wordt gepresenteerd. Voorlopig kunt u het project echter opnieuw structureren.

De weergave en het model scheiden

Herstructureer de bestaande code om het model van de weergave te scheiden. In de volgende stappen wordt de code ingedeeld, zodat weergaven en modellen afzonderlijk van elkaar worden gedefinieerd.

Verwijder MainPage.xaml en MainPage.xaml.cs uit uw project. Ze zijn niet meer nodig. Zoek in het deelvenster Solution Explorer de vermelding voor MainPage.xaml-, klik er met de rechtermuisknop op en selecteer Verwijderen.

Fooi

Als u het MainPage.xaml item verwijdert, moet u ook het MainPage.xaml.cs item verwijderen. Als MainPage.xaml.cs niet is verwijderd, klikt u er met de rechtermuisknop op en selecteert u Verwijderen.
Klik met de rechtermuisknop op het Notes project en selecteer >Nieuwe map toevoegen. Geef de map een naam Models.
Klik met de rechtermuisknop op het Notes project en selecteer >Nieuwe map toevoegen. Geef de map een naam Views.
Zoek het item NotePage.xaml en sleep het naar de map Views. De NotePage.xaml.cs moet meegaan.

Belangrijk

Wanneer u een bestand verplaatst, wordt u meestal gevraagd om een waarschuwing over hoe de verplaatsingsbewerking lang kan duren. Dit zou hier geen probleem moeten zijn. Druk op OK als u deze waarschuwing ziet.

Visual Studio kan u ook vragen of u de naamruimte van het verplaatste bestand wilt aanpassen. Selecteer Geen omdat de volgende stappen de naamruimte wijzigen.
Zoek het AboutPage.xaml item en sleep het naar de map Views. De AboutPage.xaml.cs moet meegaan.

De weergavenaamruimte bijwerken

Nu de weergaven zijn verplaatst naar de map Views, moet u de naamruimten bijwerken zodat deze overeenkomen. De naamruimte voor de XAML- en code-behind-bestanden van de pagina's is ingesteld op Notes. Dit moet worden bijgewerkt naar Notes.Views.

Vouw in het deelvenster Solution Explorer zowel NotePage.xaml- als AboutPage.xaml- uit om de bestanden achter de code weer te geven:
Dubbelklik op het NotePage.xaml.cs item om de code-editor te openen. Wijzig de naamruimte in Notes.Views:
```
namespace Notes.Views;
```
Herhaal de vorige stappen voor het AboutPage.xaml.cs item.
Dubbelklik op het item NotePage.xaml om de XAML-editor te openen. Er wordt naar de oude naamruimte verwezen via het kenmerk x:Class, waarmee wordt gedefinieerd welk klassetype de code achter de XAML is. Dit item is niet alleen de naamruimte, maar de naamruimte met het type. Wijzig de x:Class waarde in Notes.Views.NotePage:
```
x:Class="Notes.Views.NotePage"
```
Herhaal de vorige stap voor het item AboutPage.xaml, maar stel de x:Class waarde in op Notes.Views.AboutPage.

De verwijzing naar de naamruimte in Shell herstellen

De AppShell.xaml- definieert twee tabbladen, een voor de NotesPage en een andere voor AboutPage. Nu deze twee pagina's zijn verplaatst naar een nieuwe naamruimte, is de typetoewijzing in de XAML nu ongeldig. Dubbelklik in het deelvenster Solution Explorer op de vermelding AppShell.xaml om het te openen in de XAML-editor. Het moet eruitzien als het volgende fragment:

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="Notes.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:Notes"
    Shell.FlyoutBehavior="Disabled">

    <TabBar>
        <ShellContent
            Title="Notes"
            ContentTemplate="{DataTemplate local:NotePage}"
            Icon="{OnPlatform 'icon_notes.png', iOS='icon_notes_ios.png', MacCatalyst='icon_notes_ios.png'}" />

        <ShellContent
            Title="About"
            ContentTemplate="{DataTemplate local:AboutPage}"
            Icon="{OnPlatform 'icon_about.png', iOS='icon_about_ios.png', MacCatalyst='icon_about_ios.png'}" />
    </TabBar>

</Shell>

Een .NET-naamruimte wordt geïmporteerd in XAML via een XML-naamruimtedeclaratie. In de vorige XAML-markering is dit het xmlns:local="clr-namespace:Notes" kenmerk in het hoofdelement: <Shell>. De indeling van het declareren van een XML-naamruimte voor het importeren van een .NET-naamruimte in dezelfde assembly is:

xmlns:{XML namespace name}="clr-namespace:{.NET namespace}"

De vorige declaratie wijst de XML-naamruimte van local dus toe aan de .NET-naamruimte van Notes. Het is gebruikelijk om de naam local toe te wijzen aan de hoofdnaamruimte van uw project.

Verwijder de local XML-naamruimte en voeg een nieuwe toe. Deze nieuwe XML-naamruimte wordt toegewezen aan de .NET-naamruimte van Notes.Views, dus geef deze views. De declaratie moet er als volgt uitzien: xmlns:views="clr-namespace:Notes.Views".

De local XML-naamruimte is gebruikt door de eigenschappen van de ShellContent.ContentTemplate en wijzigt deze in views. Uw XAML moet er nu uitzien als het volgende codefragment:

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="Notes.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:views="clr-namespace:Notes.Views"
    Shell.FlyoutBehavior="Disabled">

    <TabBar>
        <ShellContent
            Title="Notes"
            ContentTemplate="{DataTemplate views:NotePage}"
            Icon="{OnPlatform 'icon_notes.png', iOS='icon_notes_ios.png', MacCatalyst='icon_notes_ios.png'}" />

        <ShellContent
            Title="About"
            ContentTemplate="{DataTemplate views:AboutPage}"
            Icon="{OnPlatform 'icon_about.png', iOS='icon_about_ios.png', MacCatalyst='icon_about_ios.png'}" />
    </TabBar>

</Shell>

U moet nu de app zonder compilerfouten kunnen uitvoeren en alles moet nog steeds werken zoals voorheen.

Het model definiëren

Het model is momenteel de gegevens die zijn ingesloten in de notitie en over weergaven. We maken nieuwe klassen om die gegevens weer te geven. Ten eerste het model dat de gegevens van een notitiepagina vertegenwoordigt:

Klik in het deelvenster Solution Explorer met de rechtermuisknop op de map Models en selecteer >Klasse toevoegen....
Geef de klasse een naam Note.cs en druk op toevoegen.

Open Note.cs en vervang de code door het volgende codefragment:

namespace Notes.Models;

internal class Note
{
    public string Filename { get; set; }
    public string Text { get; set; }
    public DateTime Date { get; set; }
}

Sla het bestand op.

Maak vervolgens het model over de pagina:

Klik in het deelvenster Solution Explorer met de rechtermuisknop op de map Models en selecteer >Klasse toevoegen....
Geef de klasse een naam About.cs en druk op toevoegen.

Open About.cs en vervang de code door het volgende codefragment:

namespace Notes.Models;

internal class About
{
    public string Title => AppInfo.Name;
    public string Version => AppInfo.VersionString;
    public string MoreInfoUrl => "https://aka.ms/maui";
    public string Message => "This app is written in XAML and C# with .NET MAUI.";
}

Sla het bestand op.

Pagina Info bijwerken

De infopagina is de snelste pagina die moet worden bijgewerkt en u kunt de app uitvoeren en zien hoe de gegevens uit het model worden geladen.

Open in het deelvenster Solution Explorer het bestand Views\AboutPage.xaml.

Vervang de inhoud door het volgende codefragment:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:models="clr-namespace:Notes.Models"
             x:Class="Notes.Views.AboutPage">
    <ContentPage.BindingContext>
        <models:About />
    </ContentPage.BindingContext>
    <VerticalStackLayout Spacing="10" Margin="10">
        <HorizontalStackLayout Spacing="10">
            <Image Source="dotnet_bot.png"
                   SemanticProperties.Description="The dot net bot waving hello!"
                   HeightRequest="64" />
            <Label FontSize="22" FontAttributes="Bold" Text="{Binding Title}" VerticalOptions="End" />
            <Label FontSize="22" Text="{Binding Version}" VerticalOptions="End" />
        </HorizontalStackLayout>

        <Label Text="{Binding Message}" />
        <Button Text="Learn more..." Clicked="LearnMore_Clicked" />
    </VerticalStackLayout>

</ContentPage>

Laten we eens kijken naar de gewijzigde regels, die zijn gemarkeerd in het vorige fragment:

xmlns:models="clr-namespace:Notes.Models"

Met deze regel wordt de Notes.Models .NET-naamruimte toegewezen aan de models XML-naamruimte.
De eigenschap BindingContext van de ContentPage is ingesteld op een exemplaar van de Note.Models.About-klasse, met behulp van de XML-naamruimte en het object van models:About. Deze is ingesteld met behulp van syntaxis van het eigenschapselement in plaats van een XML-kenmerk.
Belangrijk

Tot nu toe zijn eigenschappen ingesteld met behulp van een XML-kenmerk. Dit werkt uitstekend voor eenvoudige waarden, zoals een eigenschap Label.FontSize. Maar als de eigenschapswaarde complexer is, moet u syntaxis van het eigenschapselement gebruiken om het object te maken. Bekijk het volgende voorbeeld van het maken van een label met de bijbehorende FontSize eigenschapsset:
```
<Label FontSize="22" />
```
Dezelfde FontSize eigenschap kan worden ingesteld met de syntaxis van eigenschapselement:
```
<Label>
    <Label.FontSize>
        22
    </Label.FontSize>
</Label>
```
In drie <Label> besturingselementen is de eigenschapswaarde Text gewijzigd van een vastgelegde tekenreeks in bindingsyntaxis: {Binding PATH}.

{Binding} syntaxis tijdens runtime wordt verwerkt, zodat de waarde die wordt geretourneerd vanuit de binding dynamisch kan zijn. Het PATH gedeelte van {Binding PATH} is het eigenschapspad waaraan moet worden gekoppeld. De eigenschap is afkomstig van de BindingContextvan het huidige besturingselement. Met het <Label> besturingselement wordt BindingContext uitgeschakeld. De context wordt overgenomen van het bovenliggende item wanneer deze niet is ingesteld door het besturingselement. In dit geval is de context van de bovenliggende objectinstelling het hoofdobject: ContentPage.

Het object in de BindingContext is een exemplaar van het About model. Het bindingspad van een van de labels verbindt de eigenschap Label.Text met de eigenschap About.Title.

De laatste wijziging in de infopagina is het bijwerken van de knop waarop een webpagina wordt geopend. De URL is vastgelegd in de codeachter, maar de URL moet afkomstig zijn van het model dat zich in de eigenschap BindingContext bevindt.

Open in het deelvenster Solution Explorer het bestand Views\AboutPage.xaml.cs.

Vervang de LearnMore_Clicked methode door de volgende code:

private async void LearnMore_Clicked(object sender, EventArgs e)
{
    if (BindingContext is Models.About about)
    {
        // Navigate to the specified URL in the system browser.
        await Launcher.Default.OpenAsync(about.MoreInfoUrl);
    }
}

Als u naar de gemarkeerde regel kijkt, controleert de code of de BindingContext een Models.About type is en of dit het is, deze toewijst aan de about variabele. De volgende regel in de instructie if opent de browser naar de URL die is opgegeven door de eigenschap about.MoreInfoUrl.

Voer de app uit en u ziet dat deze precies hetzelfde wordt uitgevoerd als voorheen. Probeer de waarden van het model te wijzigen en kijk hoe de gebruikersinterface en URL die door de browser worden geopend, ook veranderen.

Notitiepagina bijwerken

In de vorige sectie is de about paginaweergave gebonden aan het about model. U gaat nu hetzelfde doen door de note weergave aan het note-model te koppelen. In dit geval wordt het model echter niet gemaakt in XAML, maar wordt het in de volgende stappen weergegeven in de code-achter.

Open in het deelvenster Solution Explorer het bestand Views\NotePage.xaml.

Wijzig het besturingselement <Editor> dat de eigenschap Text toevoegt. Koppel de eigenschap aan de eigenschap Text: <Editor ... Text="{Binding Text}":

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Notes.Views.NotePage"
             Title="Note">
    <VerticalStackLayout Spacing="10" Margin="5">
        <Editor x:Name="TextEditor"
                Placeholder="Enter your note"
                Text="{Binding Text}"
                HeightRequest="100" />

        <Grid ColumnDefinitions="*,*" ColumnSpacing="4">
            <Button Text="Save"
                    Clicked="SaveButton_Clicked" />

            <Button Grid.Column="1"
                    Text="Delete"
                    Clicked="DeleteButton_Clicked" />
        </Grid>
    </VerticalStackLayout>
</ContentPage>

De wijzigingen voor de code-behind zijn ingewikkelder dan de XAML. De huidige code laadt de bestandsinhoud in de constructor en stelt deze vervolgens rechtstreeks in op de eigenschap TextEditor.Text. De huidige code ziet er als volgt uit:

public NotePage()
{
    InitializeComponent();

    if (File.Exists(_fileName))
        TextEditor.Text = File.ReadAllText(_fileName);
}

Maak een nieuwe LoadNote methode in plaats van de notitie in de constructor te laden. Met deze methode gaat u als volgt te werk:

Accepteer een bestandsnaamparameter.
Maak een nieuw notitiemodel en stel de bestandsnaam in.
Als het bestand bestaat, laadt u de inhoud ervan in het model.
Als het bestand bestaat, werkt u het model bij met de datum waarop het bestand is gemaakt.
Stel de BindingContext van de pagina in op het model.

Open in het deelvenster Solution Explorer het bestand Views\NotePage.xaml.cs.

Voeg de volgende methode toe aan de klasse:

private void LoadNote(string fileName)
{
    Models.Note noteModel = new Models.Note();
    noteModel.Filename = fileName;

    if (File.Exists(fileName))
    {
        noteModel.Date = File.GetCreationTime(fileName);
        noteModel.Text = File.ReadAllText(fileName);
    }

    BindingContext = noteModel;
}

Werk de klasseconstructor bij om LoadNoteaan te roepen. De bestandsnaam voor de notitie moet een willekeurig gegenereerde naam zijn die moet worden gemaakt in de lokale gegevensmap van de app.

public NotePage()
{
    InitializeComponent();

    string appDataPath = FileSystem.AppDataDirectory;
    string randomFileName = $"{Path.GetRandomFileName()}.notes.txt";

    LoadNote(Path.Combine(appDataPath, randomFileName));
}

Een weergave en model toevoegen waarin alle notities worden weergegeven

7 minuten resterend

In dit gedeelte van de zelfstudie wordt het laatste deel van de app toegevoegd, een weergave waarin alle notities worden weergegeven die eerder zijn gemaakt.

Op dit moment wordt in de weergave één notitie weergegeven. Als u meerdere notities wilt weergeven, maakt u een nieuwe weergave en een nieuw model: AllNotes.

Klik in het deelvenster Solution Explorer met de rechtermuisknop op de map Views en selecteer Add>New Item...
Selecteer in het dialoogvenster Add New Item.NET MAUI in de lijst met sjablonen aan de linkerkant van het venster. Selecteer vervolgens de sjabloon .NETBYTES ContentPage (XAML). Geef het bestand de naam AllNotesPage.xamlen selecteer toevoegen.
Klik in het deelvenster Solution Explorer met de rechtermuisknop op de map Models en selecteer >Klasse toevoegen...
Geef de klasse een naam AllNotes.cs en druk op toevoegen.

Het AllNotes-model codeeren

Het nieuwe model vertegenwoordigt de gegevens die nodig zijn om meerdere notities weer te geven. Deze gegevens zijn een eigenschap die een verzameling notities vertegenwoordigt. De verzameling is een ObservableCollection die een gespecialiseerde verzameling is. Wanneer een besturingselement met meerdere items, zoals een ListView, is gebonden aan een ObservableCollection, werken de twee samen om de lijst met items automatisch gesynchroniseerd te houden met de verzameling. Als de lijst een item toevoegt, wordt de verzameling bijgewerkt. Als de verzameling een item toevoegt, wordt het besturingselement automatisch bijgewerkt met een nieuw item.

Open in het deelvenster Solution Explorer het bestand Models\AllNotes.cs.

Vervang de code door het volgende codefragment:

using System.Collections.ObjectModel;

namespace Notes.Models;

internal class AllNotes
{
    public ObservableCollection<Note> Notes { get; set; } = new ObservableCollection<Note>();

    public AllNotes() =>
        LoadNotes();

    public void LoadNotes()
    {
        Notes.Clear();

        // Get the folder where the notes are stored.
        string appDataPath = FileSystem.AppDataDirectory;

        // Use Linq extensions to load the *.notes.txt files.
        IEnumerable<Note> notes = Directory

                                    // Select the file names from the directory
                                    .EnumerateFiles(appDataPath, "*.notes.txt")

                                    // Each file name is used to create a new Note
                                    .Select(filename => new Note()
                                    {
                                        Filename = filename,
                                        Text = File.ReadAllText(filename),
                                        Date = File.GetLastWriteTime(filename)
                                    })

                                    // With the final collection of notes, order them by date
                                    .OrderBy(note => note.Date);

        // Add each note into the ObservableCollection
        foreach (Note note in notes)
            Notes.Add(note);
    }
}

De vorige code declareert een verzameling met de naam Notesen gebruikt de LoadNotes methode om notities van het apparaat te laden. Deze methode maakt gebruik van LINQ-extensies voor het laden, transformeren en sorteren van de gegevens in de Notes verzameling.

De pagina AllNotes ontwerpen

Vervolgens moet de weergave zijn ontworpen ter ondersteuning van het AllNotes-model.

Open in het deelvenster Solution Explorer het bestand Views\AllNotesPage.xaml.

Vervang de code door de volgende markeringen:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Notes.Views.AllNotesPage"
             Title="Your Notes">
    <!-- Add an item to the toolbar -->
    <ContentPage.ToolbarItems>
        <ToolbarItem Text="Add" Clicked="Add_Clicked" IconImageSource="{FontImage Glyph='+', Color=Black, Size=22}" />
    </ContentPage.ToolbarItems>

    <!-- Display notes in a list -->
    <CollectionView x:Name="notesCollection"
                        ItemsSource="{Binding Notes}"
                        Margin="20"
                        SelectionMode="Single"
                        SelectionChanged="notesCollection_SelectionChanged">

        <!-- Designate how the collection of items are laid out -->
        <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="22"/>
                    <Label Text="{Binding Date}" FontSize="14" TextColor="Silver"/>
                </StackLayout>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>

In de vorige XAML worden enkele nieuwe concepten geïntroduceerd:

De eigenschap ContentPage.ToolbarItems bevat een ToolbarItem. De hier gedefinieerde knoppen worden meestal boven aan de app weergegeven, langs de paginatitel. Afhankelijk van het platform kan het echter een andere positie hebben. Wanneer een van deze knoppen wordt ingedrukt, wordt de Clicked gebeurtenis gegenereerd, net als een normale knop.

Met de eigenschap ToolbarItem.IconImageSource wordt het pictogram ingesteld om op de knop weer te geven. Het pictogram kan elke afbeeldingsresource zijn die door het project is gedefinieerd, maar in dit voorbeeld wordt een FontImage gebruikt. Een FontImage kan één glyph uit een lettertype als afbeelding gebruiken.
In het besturingselement CollectionView wordt een verzameling items weergegeven. In dit geval is dit afhankelijk van de eigenschap Notes van het model. De manier waarop elk item wordt gepresenteerd door de verzamelingsweergave, wordt ingesteld via de eigenschappen CollectionView.ItemsLayout en CollectionView.ItemTemplate.

Voor elk item in de verzameling genereert de CollectionView.ItemTemplate de gedeclareerde XAML. De BindingContext van die XAML wordt het verzamelingsitem zelf, in dit geval, elke afzonderlijke notitie. De sjabloon voor de notitie maakt gebruik van twee labels, die zijn gebonden aan de Text en Date eigenschappen van de notitie.
De CollectionView verwerkt de SelectionChanged gebeurtenis, die wordt gegenereerd wanneer een item in de verzamelingsweergave is geselecteerd.

De code-behind voor de weergave moet worden geschreven om de notities te laden en de gebeurtenissen af te handelen.

Open in het deelvenster Solution Explorer het bestand Views/AllNotesPage.xaml.cs.

Vervang de code door het volgende codefragment:

namespace Notes.Views;

public partial class AllNotesPage : ContentPage
{
    public AllNotesPage()
    {
        InitializeComponent();

        BindingContext = new Models.AllNotes();
    }

    protected override void OnAppearing()
    {
        ((Models.AllNotes)BindingContext).LoadNotes();
    }

    private async void Add_Clicked(object sender, EventArgs e)
    {
        await Shell.Current.GoToAsync(nameof(NotePage));
    }

    private async void notesCollection_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        if (e.CurrentSelection.Count != 0)
        {
            // Get the note model
            var note = (Models.Note)e.CurrentSelection[0];

            // Should navigate to "NotePage?ItemId=path\on\device\XYZ.notes.txt"
            await Shell.Current.GoToAsync($"{nameof(NotePage)}?{nameof(NotePage.ItemId)}={note.Filename}");

            // Unselect the UI
            notesCollection.SelectedItem = null;
        }
    }
}

Deze code maakt gebruik van de constructor om de BindingContext van de pagina in te stellen op het model.

De methode OnAppearing wordt overschreven vanuit de basisklasse. Deze methode wordt automatisch aangeroepen wanneer de pagina wordt weergegeven, bijvoorbeeld wanneer de pagina naartoe wordt genavigeerd. De code hier vertelt het model om de notities te laden. Omdat de in de AllNote-weergave is gebonden aan de eigenschap van het AllNotes-model van het AllNotes-model, wat een is, wordt de automatisch bijgewerkt.

De Add_Clicked handler introduceert nog een nieuw concept, navigatie. Omdat de app .NET MAUI Shell gebruikt, kunt u naar pagina's navigeren door de methode Shell.Current.GoToAsync aan te roepen. U ziet dat de handler wordt gedeclareerd met het trefwoord async, waardoor het gebruik van het await trefwoord wordt toegestaan bij het navigeren. Deze handler gaat naar de NotePage.

Het laatste codefragment in het vorige codefragment is de notesCollection_SelectionChanged handler. Deze methode gebruikt het momenteel geselecteerde item, een Note model en gebruikt de gegevens om naar het NotePagete navigeren. GoToAsync gebruikt een URI-tekenreeks voor navigatie. In dit geval wordt een tekenreeks samengesteld die gebruikmaakt van een querytekenreeksparameter om een eigenschap in te stellen op de doelpagina. De geïnterpoleerde tekenreeks die de URI vertegenwoordigt, lijkt op de volgende tekenreeks:

NotePage?ItemId=path\on\device\XYZ.notes.txt

De parameter ItemId= is ingesteld op de bestandsnaam op het apparaat waarop de notitie is opgeslagen.

Visual Studio geeft mogelijk aan dat de eigenschap NotePage.ItemId niet bestaat, maar niet. De volgende stap is het wijzigen van de Note weergave om het model te laden op basis van de ItemId parameter die u gaat maken.

Queryreeksparameters

De Note weergave moet de querytekenreeksparameter ondersteunen, ItemId. Maak deze nu:

Open in het deelvenster Solution Explorer het bestand Weergaven/NotePage.xaml.cs.
Voeg het kenmerk QueryProperty toe aan het trefwoord class, geef de naam van de eigenschap van de querytekenreeks op en de klasse-eigenschap waaraan deze wordt toegewezen, respectievelijk ItemId en ItemId:
```
[QueryProperty(nameof(ItemId), nameof(ItemId))]
public partial class NotePage : ContentPage
```
Voeg een nieuwe eigenschap string toe met de naam ItemId. Met deze eigenschap wordt de methode LoadNote aangeroepen, waarbij de waarde van de eigenschap wordt doorgegeven, die op zijn beurt de bestandsnaam van de notitie moet zijn:
```
public string ItemId
{
    set { LoadNote(value); }
}
```

Vervang de SaveButton_Clicked en DeleteButton_Clicked handlers door de volgende code:

private async void SaveButton_Clicked(object sender, EventArgs e)
{
    if (BindingContext is Models.Note note)
        File.WriteAllText(note.Filename, TextEditor.Text);

    await Shell.Current.GoToAsync("..");
}

private async void DeleteButton_Clicked(object sender, EventArgs e)
{
    if (BindingContext is Models.Note note)
    {
        // Delete the file.
        if (File.Exists(note.Filename))
            File.Delete(note.Filename);
    }

    await Shell.Current.GoToAsync("..");
}

De knoppen zijn nu async. Nadat ze zijn ingedrukt, gaat de pagina terug naar de vorige pagina met behulp van een URI van ...

Verwijder de _fileName variabele boven aan de code, omdat deze niet meer door de klasse wordt gebruikt.

De visuele structuur van de app wijzigen

De AppShell laadt nog steeds de pagina met één notitie, maar moet de weergave AllPagesladen. Open het bestand AppShell.xaml en wijzig de eerste ShellContent vermelding zodat deze verwijst naar de AllNotesPage in plaats van NotePage:

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="Notes.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:views="clr-namespace:Notes.Views"
    Shell.FlyoutBehavior="Disabled">

    <TabBar>
        <ShellContent
            Title="Notes"
            ContentTemplate="{DataTemplate views:AllNotesPage}"
            Icon="{OnPlatform 'icon_notes.png', iOS='icon_notes_ios.png', MacCatalyst='icon_notes_ios.png'}" />

        <ShellContent
            Title="About"
            ContentTemplate="{DataTemplate views:AboutPage}"
            Icon="{OnPlatform 'icon_about.png', iOS='icon_about_ios.png', MacCatalyst='icon_about_ios.png'}" />
    </TabBar>

</Shell>

Als u de app nu uitvoert, ziet u dat de app vastloopt als u op de knop Toevoegen drukt en klaagt dat deze niet naar NotesPagekan navigeren. Elke pagina waarnaar kan worden genavigeerd vanaf een andere pagina, moet worden geregistreerd bij het navigatiesysteem. De AllNotesPage- en AboutPage-pagina's worden automatisch geregistreerd bij het navigatiesysteem door te worden gedeclareerd in de TabBar.

Registreer de NotesPage bij het navigatiesysteem:

Open in het deelvenster Solution Explorer het bestand AppShell.xaml.cs.

Voeg een lijn toe aan de constructor waarmee de navigatieroute wordt geregistreerd:

namespace Notes;

public partial class AppShell : Shell
{
    public AppShell()
    {
        InitializeComponent();

        Routing.RegisterRoute(nameof(Views.NotePage), typeof(Views.NotePage));
    }
}

De methode Routing.RegisterRoute heeft twee parameters:

De eerste parameter is de tekenreeksnaam van de URI die u wilt registreren, in dit geval is de opgeloste naam "NotePage".
De tweede parameter is het type pagina dat moet worden geladen wanneer "NotePage" wordt genavigeerd.

U kunt nu uw app uitvoeren. Probeer nieuwe notities toe te voegen, heen en weer te navigeren tussen notities en notities te verwijderen.

De code verkennen. De code voor deze zelfstudie verkennen.. Als u een kopie van het voltooide project wilt downloaden om uw code te vergelijken, downloadt u dit project.

Delen via