Skapa en WinUI 3-anteckningsapp

Den här självstudieserien visar hur du skapar en WinUI-app med XAML och C#. Appen du skapar är en anteckningsapp där användaren kan skapa, spara och läsa in flera anteckningar. Du kan ladda ner eller visa koden för den här handledningen från GitHub-repo.

Börja här när du har skapat och kört ett tomt projekt. Det här är en stegvis introduktion till Grunderna för WinUI 3 med hjälp av Visual Studio. Ingen AI-kodningsassistent eller MVVM Toolkit krävs.

I den här tutorialen lär du dig följande:

  • Använd XAML-markering för att definiera appens användargränssnitt.
  • Interagera med XAML-element via C#-kod.
  • Spara och läs in filer från det lokala filsystemet.
  • Skapa vyer och binda dem till data.
  • Använd navigering för att flytta till och från sidor i appen.
  • Använd resurser som dokumentation och exempelappar för att skapa en egen app.

Du skapar en app som du kan använda för att ange en anteckning och spara den i lokal applagring. Appen har två sidor:

  • NotePage – en sida för att redigera en enskild anteckning.
  • AllNotesPage - en sida för att visa alla sparade anteckningar.

Den slutliga applikationen visas nedan:

AllNotesPage

Slutlig skärmbild av anteckningsappen med tre sparande anteckningar.

NotePage

Slutlig skärmbild av anteckningsappen som visar en ny tom anteckning.

Skapa Visual Studio-projekt

Följ Visual Studio sökväg i Snabbstart: Skapa och kör ett WinUI 3-projekt för att installera verktyg och skapa projekt. Använd ett paketerat C#-projekt med de här självstudiespecifika inställningarna:

  • Projektnamn

    Detta måste vara inställt på WinUINotes. Om projektet heter något annat kan koden du kopierar och klistrar in från den här handledningen resultera i byggfel. Det beror på att Visual Studio använder project namn som standard namespace för din appkod.

  • SDK för Windows-appar

    I den här självstudien används funktioner som är tillgängliga i Windows App SDK 1.7 och senare. Kontrollera att Windows App SDK NuGet-paketet har uppdaterats till version 1.7 eller senare.

Skapa och starta det tomma WinUINotes projektet innan du fortsätter. Du bör se ett tomt fönster som ser ut så här:

Anteckningsappfönstret med en titelrad och ett tomt innehållsfält.

Tips/Råd

Du refererar ofta till API-referensdokument och konceptuella dokument när du skapar Windows-appar. I den här självstudien visas länkar infogade i texten och i grupper märkta "Läs mer i dokumenten:". Dessa länkar är valfria. du behöver inte följa dem för att slutföra självstudien. De tillhandahålls om du vill anteckna var du hittar den information du behöver när du börjar skapa dina egna appar.

Fortsätt till steg 1 – Project installation

  • Uppdaterades senast