Skapa din första WinUI-app

Skapa din första WinUI-app och se den komma till liv på Windows. Den här snabbstarten tar dig från verktygskonfigurationen till en app som körs och vägleder dig sedan genom din första gränssnittsuppdatering.

Innan du börjar

Det här lär du dig

  • Välj och konfigurera dina utvecklingsverktyg.
  • Skapa och kör en WinUI-app.
  • Uppdatera gränssnittet och se din ändring i appen som körs.

Välj dina utvecklingsverktyg

Följ någon av de rekommenderade vägarna i den här snabbstartsguiden:

  • winapp CLI: Arbeta från en terminal i önskad redigerare. Det här kommandoradsarbetsflödet fungerar också bra för agentisk kodning.
  • Visual Studio: Använd en integrerad utvecklings- och felsökningsupplevelse.

Om dina verktyg redan är installerade går du till Skapa din första app.

Installera verktygen

  1. Aktivera utvecklarläge. Du kan öppna inställningarna via Utvecklarinställningar.

  2. Installera .NET 10 SDK och Windows App Development CLI. Om du använder WinGet, kör du:

    winget install --id Microsoft.DotNet.SDK.10 --exact --source winget
winget install --id Microsoft.WinAppCli --exact --source winget

    Hoppa över en installation om det nödvändiga verktyget redan är installerat.

  3. Öppna en ny terminal så att den känner av de installerade kommandona och kontrollera sedan versionerna:

    dotnet --version
winapp --version

    Använd .NET SDK 10 eller senare och winapp CLI 0.6 eller senare för det här arbetsflödet.

Note

winapp CLI är i offentlig förhandsversion. winapp new hanterar WinUI-projektmallarna, men det installerar inte .NET SDK:t. Se tillkännagivandet om CLI 0.6 för de nya projekt- och run-kommandona.

Skapa din första app

Använd arbetsflödet som du installerade ovan för att skapa och köra projektet.

I en mapp där du har dina projekt, kör:

winapp new --name MyWinUIApp --template winui --use-defaults
cd MyWinUIApp
winapp run

winapp new skapar den tomma WinUI-appen. winapp run bygger projektet och kör det; du behöver inte något separat kommando för bygg- eller paketregistrering.

Din app öppnar ett fönster på skrivbordet. Fortsätt med Gör en ändring nedan.

Gör en ändring

Behåll projektet som du just skapade. Lägg till ett meddelande till det befintliga gränssnittet:

  1. Stäng den öppna appen. Öppna MainPage.xaml i redigeringsprogrammet. Om mallen inte innehåller den filen, öppna MainWindow.xaml i stället.

  2. Leta reda på layoutpanelen som innehåller appens innehåll. I den aktuella tomma mallen för CLI innehåller MainPage.xaml en tom <Grid />. Ersätt det tomma rutnätet med:

    <Grid>
    <TextBlock
        Text="Hello, WinUI!"
        HorizontalAlignment="Center"
        VerticalAlignment="Center" />
</Grid>

    Om panelen redan innehåller kontroller lägger du bara till den TextBlock inuti panelen. Behåll befintliga kontroller, namn och händelsehanterare. Ersätt inte omgivande Page eller Window, eller ram- och rubrikfältet i MainWindow.xaml.

  3. Spara filen. Kör winapp run igen från projektmappen eller tryck på F5 i Visual Studio.

Gratulerar! Du har skapat, kört och uppdaterat din första WinUI-app. Fönstret visar nu Hello, WinUI!

Troubleshooting

Problem Vad du bör kontrollera
winapp eller dotnet känns inte igen. Öppna terminalen igen efter installationen. Använd versionskommandona på fliken CLI för att bekräfta att båda verktygen är tillgängliga.
winapp new känns inte igen. Det här arbetsflödet kräver winapp CLI 0.6 eller senare. Uppdatera CLI med den installationsmetod du valde.
WinUI-mallar visas inte i Visual Studio. Öppna Visual Studio Installer, välj Ändra och bekräfta att WinUI-programutvecklingsarbetsbelastningen är installerad. Starta om Visual Studio efteråt.
Bygget rapporterar ett SDK eller återställningsfel. Kontrollera det valda arbetsflödets förutsättningar och det första felet i byggutdata. Använd stödet för Windows App SDK för att kontrollera versionskraven innan du ändrar projektegenskaper.
Distribution rapporterar att utvecklarläget är inaktiverat. Aktivera utvecklarläge och kör sedan appen igen.
Det nya meddelandet visas inte. Spara XAML-filen och starta om projektet. I mallar med en MainPage.xamllägger du till meddelandet på den sidan i stället för att ersätta fönstrets värdram.

Nästa steg

Skapa en anteckningsapp

Självstudiekursen Anteckningar använder ett separat WinUINotes projekt för att lära ut sidor, navigering, databindning och lokal lagring. Du kan också hitta fokuserade kontrollexempel i Kodexempel och WinUI-galleriet.

  • Uppdaterades senast