Skapa en WinUI-app

Den här självstudieserien visar hur du skapar en WinUI 3-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 ned eller visa koden för den här självstudien från GitHub-lagringsplatsen.

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 använder Visual Studio 2022 för att skapa en app som du kan använda för att ange en anteckning och spara den i lokal applagring. Du hittar källkoden för den här appen här. Appen har två sidor:

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

Det slutliga programmet 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-projektet

Om du vill påbörja den här självstudien måste du skapa ett WinUI 3-appprojekt i Visual Studio med hjälp av Blank App, Packaged (WinUI 3 in Desktop) C#-projektmallen. När du skapar projektet använder du följande inställningar:

  • 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 självstudien resultera i byggfel. Det beror på att Visual Studio använder projektnamnet som standardnamnområde för din appkod.

  • SDK för Windows-appar

    I den här självstudien används funktioner som är nya i Windows App SDK 1.7. Du måste se till att Windows App SDK NuGet-paketet har uppdaterats till version 1.7 eller senare.

Viktigt!

Om du inte har skapat ett WinUI 3-projekt tidigare följer du stegen i Börja utveckla Windows-appar för att se till att utvecklingsmiljön och Visual Studio-projektet är korrekt konfigurerade.

När du kör ditt tomma appprojekt (enligt beskrivningen i Börja utveckla Windows-appar) bör du se ett tomt fönster som ser ut så här:

Anteckningsappfönstret med ett namnlist och tomt innehållsområde.

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.