Dela via

Skapa din första WinUI 3-app

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.

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 skriva in en anteckning och spara den i lokal app-lagring. 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.

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

Om du vill påbörja den här självstudien måste du skapa ett WinUI-app-projekt i Visual Studio med hjälp av mallen Blank App, Packaged (WinUI in Desktop) C#-projekt. När du skapar project 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 handledningen resultera i byggfel. Det beror på att Visual Studio använder project namn som standard namespace för din appkod.

  • Windows App SDK

    I den här handledningen 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-project tidigare följer du stegen i Starta utvecklingen av Windows-appar för att kontrollera att utvecklingsmiljön och Visual Studio project har konfigurerats korrekt.

När du kör din tomma app project (enligt beskrivningen i Starta utveckla Windows-appar) bör du 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

  • Last updated on