Een WinUI 3-notitie-app bouwen

In deze reeks zelfstudies ziet u hoe u een WinUI-app maakt met behulp van XAML en C#. De app die u maakt, is een notitie-app, waar de gebruiker meerdere notities kan maken, opslaan en laden. U kunt de code voor deze zelfstudie downloaden of bekijken vanuit de GitHub opslagplaats.

Begin hier nadat u een leeg project kunt bouwen en uitvoeren. Dit is een stapsgewijze inleiding tot de basisprincipes van WinUI 3 met behulp van Visual Studio; er is geen AI-coderingsassistent of MVVM Toolkit vereist.

In deze handleiding leer je hoe je:

  • Gebruik XAML-markeringen om de gebruikersinterface van de app te definiëren.
  • Interactie met XAML-elementen via C#-code.
  • Bestanden opslaan en laden vanuit het lokale bestandssysteem.
  • Maak weergaven en bind ze aan gegevens.
  • Gebruik navigatie om naar en van pagina's in de app te gaan.
  • Gebruik resources zoals documentatie en voorbeeld-apps om uw eigen app te maken.

U maakt een app die u kunt gebruiken om een notitie in te voeren en op te slaan in de lokale app-opslag. De app heeft twee pagina's:

  • NotePage - een pagina voor het bewerken van één notitie.
  • AllNotesPage - een pagina om alle opgeslagen notities weer te geven.

De laatste toepassing wordt hieronder weergegeven:

AllNotesPage

Laatste schermopname van de notitie-app, met drie notities opslaan.

Notitiepagina

Laatste schermopname van de notitie-app, met een nieuwe lege notitie.

De Visual Studio project maken

Volg het Visual Studio pad in quickstart: Een WinUI 3-project maken en uitvoeren voor het installeren en maken van projecten. Gebruik een verpakt C#-project met deze zelfstudiespecifieke instellingen:

  • Projectnaam

    Dit moet worden ingesteld op WinUINotes. Als de project een andere naam heeft, kan de code die u uit deze zelfstudie kopieert en plakt, leiden tot buildfouten. Dit komt doordat Visual Studio de project naam gebruikt als de standaardnaam naamruimte voor uw app-code.

  • Windows App SDK

    In deze zelfstudie worden functies gebruikt die beschikbaar zijn in Windows App SDK 1.7 en hoger. Zorg ervoor dat het Windows App SDK NuGet-pakket is bijgewerkt naar versie 1.7 of hoger.

Bouw en start het lege WinUINotes project voordat u doorgaat. U ziet nu een leeg venster dat er als volgt uitziet:

Het notitie-app-venster met een titelbalk en een leeg inhoudsgebied.

Aanbeveling

U verwijst regelmatig naar API-referentiedocumenten en conceptuele documenten tijdens het bouwen van Windows-apps. In deze zelfstudie ziet u koppelingen inline in de tekst en in groepen met het label 'Meer informatie in de documenten:'. Deze koppelingen zijn optioneel; u hoeft deze niet te volgen om de zelfstudie te voltooien. Ze worden verstrekt als u wilt weten waar u de informatie kunt vinden die u nodig hebt wanneer u uw eigen apps gaat maken.

Continue naar stap 1: Project instellen

  • Last updated on