Dela via

Självstudie: Skapa ditt första Windows App SDK-program i Visual Studio med XAML och C#

I den här introduktionen till Den integrerade utvecklingsmiljön i Visual Studio (IDE) skapar du en "Hello World"-app som körs på alla Windows 10-enheter eller senare enheter. För att göra det använder du en Windows App SDK-projektmall (WinUI 3), XAML (Extensible Application Markup Language) och programmeringsspråket C#.

Obs

WinUI 3 är den inbyggda UI-plattformskomponenten som levereras med Windows App SDK (helt frikopplad från Windows SDK:er). Mer information finns i WinUI 3.

Om du inte redan har installerat Visual Studio går du till Visual Studio-nedladdningar sidan för att installera den kostnadsfritt.

Förutsättningar

  • Du behöver Visual Studio för att slutföra den här självstudien. Besök Visual Studio nedladdningssidan för en kostnadsfri version.

  • Arbetsbelastningar och komponenter som krävs för utveckling med WinUI och Windows App SDK. Om du vill verifiera eller installera en arbetsbelastning i Visual Studio väljer du Verktyg>Hämta verktyg och funktioner. Mer information finns i Ändra arbetsbelastningar eller enskilda komponenter.

    På fliken Arbetsbelastningar i Visual Studio Installer väljer du följande:

    • För C#- apputveckling med hjälp av Windows App SDK väljer du WinUI-programutveckling.

    Obs

    I Visual Studio 17.10 – 17.12 kallas den här arbetsbelastningen för Windows-programutveckling.

Mer information finns i Installera verktyg för Windows App SDK.

Skapa ett projekt

Skapa först ett WinUI 3-projekt. Projekttypen levereras med alla mallfiler du behöver, innan du ens har lagt till något!

Viktig

Visual Studio 2019 stöder endast Windows App SDK 1.1 och tidigare. Visual Studio 2022 rekommenderas för att utveckla appar med alla versioner av Windows App SDK.

Windows App SDK 1.1.x-mallarna är tillgängliga genom att installera ett Visual Studio-tillägg (VSIX).

Obs

Om du redan har installerat ett Windows App SDK Visual Studio-tillägg (VSIX) avinstallerar du det innan du installerar en annan version. Anvisningar finns i Hantera tillägg för Visual Studio.

  • Du kan installera den senaste stabila VSIX-versionen av 1.1.x från Visual Studio. Välj Tillägg>Hantera tillägg, sök efter Windows App SDKoch ladda ned Windows App SDK-tillägget. Stäng och öppna Visual Studio igen och följ anvisningarna för att installera tillägget. Se till att installera mallarna för Windows App SDK 1.1.
  • Du kan också ladda ned tillägget direkt från Visual Studio Marketplaceoch installera det:

Ladda ned Windows App SDK C# SDK VS2019-mallar

När malltillägget har installerats kan du skapa ditt första projekt. Mer information om stöd för Visual Studio 2019 finns i Installera verktyg för Windows App SDK. Resten av den här självstudien förutsätter att du använder Visual Studio 2022.

  1. Öppna Visual Studio och välj Skapa ett nytt projekti startfönstret.

  2. På skärmen Skapa ett nytt projekt anger du WinUI- i sökrutan, väljer C#-mallen för Tom app, Paketerad (WinUI 3 i Desktop)och väljer sedan Nästa.

    Skärmbild av dialogrutan

  3. Ge projektet ett namn, HelloWorldoch välj Skapa.

    Skärmbild av dialogrutan

    Obs

    Om det här är första gången du använder Visual Studio för att skapa en Windows App SDK-app kan en Inställningar dialogruta visas. Välj utvecklarlägeoch välj sedan Ja.

    Skärmbild som visar dialogrutan Inställningar med alternativet för att aktivera utvecklarläge.

    Visual Studio installerar ytterligare ett developer mode-paket åt dig. När paketinstallationen är klar stänger du dialogrutan Inställningar.

Skapa programmet

Det är dags att börja utveckla. Du lägger till en knappkontroll, lägger till en åtgärd i knappen och kör sedan appen "Hello World" för att se hur den ser ut.

Lägg till en knapp på arbetsytan "Design"

  1. I Solution Explorerdubbelklickar du på MainWindow.xaml för att öppna XAML-markeringsredigeraren.

    Skärmbild av Solution Explorer-fönstret som visar egenskaper, referenser, tillgångar och filer i HelloWorld-projektet. Filen MainWindow.xaml är markerad.

    I XAML-redigeraren kan du lägga till eller ändra markering. Till skillnad från UWP-projekt har WinUI 3 ingen Design-vy.

    Skärmbild som visar MainWindow.xaml öppen i Visual Studio IDE. I fönstret XAML-redigerare visas XAML-markering för fönstret.

  2. Granska kontrolelementet Button som är kapslat i StackPanel vid roten av Window.

    Skärmbild som visar knappen markerad i XAML-redigeraren.

Ändra etiketten på knappen

  1. I XAML-redigerarenändrar du värdet för knappinnehåll från "Klicka på mig" till "Hello World!".

    Skärmbild som visar XAML-koden för knappen i XAML-redigeraren. Värdet för egenskapen Content har ändrats till

  2. Observera att knappen också har en Click-händelsehanterare med namnet myButton_Click angiven. Vi kommer till det i nästa steg.

    Skärmbild som visar XAML-koden för knappen i XAML-redigeraren. Klickhändelsen för knappen har markerats.

Ändra händelsehanteraren

En "händelsehanterare" låter komplicerad, men det är bara ett annat namn för kod som anropas när en händelse inträffar. I det här fallet lägger den till en åtgärd som utlöses av knappen "Hello World!".

  1. I Solution Explorerdubbelklickar du på MainWindow.xaml.cs, sidan bakom koden.

  2. Redigera händelsehanterarkoden i C#-redigeringsfönstret som öppnas.

    Här blir saker intressanta. Standardhändelsehanteraren ser ut så här:

    Skärmbild som visar C#-koden för standardhändelsehanteraren för myButton_Click.

    Låt oss ändra det, så det ser ut så här:

    Skärmbild som visar C#-koden för den nya asynkrona myButton_Click händelsehanteraren.

    Här är koden för att kopiera och klistra in:

    private async void myButton_Click(object sender, RoutedEventArgs e)
{
    var welcomeDialog = new ContentDialog()
    {
        Title = "Hello from HelloWorld",
        Content = "Welcome to your first Windows App SDK app.",
        CloseButtonText = "Ok",
        XamlRoot = myButton.XamlRoot
    };
    await welcomeDialog.ShowAsync();
}

Vad gjorde vi just?

Koden använder kontrollen ContentDialog för att visa ett välkomstmeddelande i en modal popup-kontroll i det aktuella fönstret. (Mer information om hur du använder Microsoft.UI.Xaml.Controls.ContentDialogfinns i ContentDialog Class.)

Kör programmet

Det är dags att skapa, distribuera och starta Windows App SDK-appen "Hello World" för att se hur den ser ut. Så här gör du.

  1. Använd knappen Spela upp (den har texten HelloWorld (paket)) för att starta programmet på den lokala datorn.

    Skärmbild som visar den nedrullningsbara rutan öppen bredvid knappen Spela upp med

    (Du kan också välja Felsöka>Starta felsökning från menyraden eller trycka på F5 för att starta appen.)

  2. Visa din app, som visas strax efter att en välkomstskärm försvinner. Appen bör se ut ungefär så här:

    Skärmbild som visar Windows App SDK 'Hello World'-applikationen som körs.

  3. Välj knappen Hello World.

    Din Windows 10- eller senare-enhet visar ett meddelande med texten "Välkommen till din första Windows App SDK-app" med rubriken "Hello from HelloWorld". Klicka på Ok för att stänga meddelandet.

    Skärmbild som visar programmet

  4. Stäng appen genom att välja knappen Sluta felsöka i verktygsfältet. (Du kan också välja Felsöka>Sluta felsöka från menyraden eller tryck på Skift+F5.)

Nästa steg

Grattis till att du har slutfört den här självstudien! Vi hoppas att du har lärt dig några grunderna om Windows App SDK, WinUI 3 och Visual Studio IDE. Om du vill veta mer fortsätter du med följande självstudie:

Självstudie: Skapa en enkel bildvisning med WinUI 3

Se även

  • Last updated on