Skapa ett "Hello, World!" UWP-app (XAML) med .NET 9

I den här självstudien lär du dig hur du använder XAML, C# och .NET 9 med intern AOT (i förväg) för att skapa en enkel "Hello, World!"-app för Universal Windows Platform (UWP) i Windows. Med ett enda projekt i Microsoft Visual Studio kan du skapa en app som körs på alla versioner av Windows 10 och Windows 11 som stöds.

Här får du lära dig hur du:

• Skapa ett nytt UWP-projekt för .NET 9 i Visual Studio.
• Skriv XAML för att ändra användargränssnittet på startsidan.
• Kör projektet på det lokala skrivbordet i Visual Studio.
• Använd en SpeechSynthesizer för att få appen att prata när du trycker på en knapp.

Förutsättningar

• Vad är en Universell Windows-app?
• Ladda ned Visual Studio (och Windows). Om du behöver en hand kan du lära dig hur du konfigureras.
• Vi antar också att du använder standardfönsterlayouten i Visual Studio. Om du ändrar standardlayouten kan du återställa den i menyn Fönster med hjälp av kommandot Återställ fönsterlayout .

Steg 1: Skapa ett nytt projekt i Visual Studio

1. Starta Visual Studio.

2. På menyn Arkiv väljer du New > Project för att öppna dialogrutan Nytt projekt.

3. Filtrera listan över tillgängliga mallar genom att välja C# i listrutan Språk och UWP från listrutan Projekttyper för att se listan över tillgängliga UWP-projektmallar för C#-utvecklare.

   

   (Om du inte ser några UWP-mallar kanske du saknar komponenterna för att skapa UWP-appar. Du kan upprepa installationsprocessen och lägga till UWP-stöd genom att öppna Visual Studio Installer från Start-menyn i Windows. Mer information finns i Konfigurera Visual Studio för UWP-utveckling .)

4. Välj mallen Tom UWP-app .

   Viktigt!

   Se till att välja mallen Tom UWP-app . Om du väljer mallen UWP Blank App (.NET Native) kommer den att rikta in sig på .NET Native runtime, inte .NET 9. Appar som är avsedda för .NET Native har inte åtkomst till de senaste .NET- och C#-funktionerna eller säkerhets- och prestandaförbättringar. Mer information om skillnaderna mellan de två projekttyperna finns i Modernisera UWP-appen med förhandsversion av UWP-stöd för .NET 9 och Native AOT.

5. Välj Nästa och ange "HelloWorld" som projektnamn. Välj Skapa.

   

   Anmärkning

   Om det här är första gången du använder Visual Studio kan du se en inställningsdialogruta där du uppmanas att aktivera utvecklarläge. Utvecklarläge är en särskild inställning som gör det möjligt för vissa funktioner, till exempel behörighet att köra appar direkt, i stället för endast från Store. För mer information, vänligen läs Aktivera enheten för utveckling. Om du vill fortsätta med den här guiden väljer du utvecklarläge, klickar på Jaoch stänger dialogrutan.

   

6. Dialogrutan Målversion/Lägsta version visas. Standardinställningarna är bra för den här handledningen, så välj OK för att skapa projektet.

   

7. När det nya projektet öppnas visas filerna i fönstret Solution Explorer till höger. Du kan behöva välja fliken Solution Explorer i stället för flikarna Egenskaper eller GitHub Copilot Chat för att se dina filer.

   

Även om den tomma UWP-appen är en minimal mall innehåller den fortfarande många filer. Dessa filer är viktiga för alla UWP-appar med C#. Alla UWP-projekt som du skapar i Visual Studio innehåller dem.

Vad finns i filerna?

Om du vill visa och redigera en fil i projektet dubbelklickar du på filen i Solution Explorer. Expandera en XAML-fil precis som en mapp för att se dess associerade kodfil. XAML-filer öppnas i en delad vy som visar både designytan och XAML-redigeraren.

App.xaml och App.xaml.cs

• App.xaml är den fil där du deklarerar resurser som används i hela appen.
• App.xaml.cs är kod bakom-filen för App.xaml. Precis som alla bakomliggande sidor innehåller den en konstruktor som anropar metoden InitializeComponent. Du skriver inte InitializeComponent metoden. Det genereras av Visual Studio och dess huvudsakliga syfte är att initiera de element som deklareras i XAML-filen.
• App.xaml.cs är startpunkten för din app.
• App.xaml.cs innehåller också metoder för att hantera aktivering och avstängning av appen.

MainPage.xaml

• MainPage.xaml är där du definierar användargränssnittet för din app. Du kan lägga till element direkt med XAML-markering, eller så kan du använda designverktygen som tillhandahålls av Visual Studio.
• MainPage.xaml.cs är sidan bakom koden för MainPage.xaml. Det är där du lägger till din applogik och händelsehanterare.
• Tillsammans definierar dessa två filer en ny klass med namnet MainPage, som ärver från Sidan, i HelloWorld namnområdet.

Package.appxmanifest

• En manifestfil som beskriver din app: dess namn, beskrivning, panel, startsida osv.
• Innehåller en lista över beroenden, resurser och filer som appen innehåller.

En uppsättning logotypbilder

• Tillgångar/Square150x150Logo.scale-200.png och Wide310x150Logo.scale-200.png representerar din app (antingen medelstor eller bred storlek) på Start-menyn.
• Tillgångar/Square44x44Logo.png representerar din app i applistan på startmenyn, aktivitetsfältet och aktivitetshanteraren.
• Tillgångar/StoreLogo.png representerar din app i Microsoft Store.
• Tillgångar/SplashScreen.scale-200.png är välkomstskärmen som visas när appen startar.
• Tillgångar/LockScreenLogo.scale-200.png kan användas för att representera appen på låsskärmen när systemet är låst.

Steg 2: Lägg till en knapp

Använda designervyn

Nu ska vi lägga till en knapp på vår sida. I den här handledningen arbetar du med bara några av de filer som angavs tidigare: App.xaml, MainPage.xaml och MainPage.xaml.cs.

1. Dubbelklicka på MainPage.xaml för att öppna det i XAML-redigeraren.

   

   Anmärkning

   Du ser ingen designvy när du arbetar med den tomma UWP-appmallen som använder .NET 9. Om du vill arbeta med ett UWP-projekt med en XAML-designvy kan du använda mallen UWP Blank App (.NET Native) i stället. Som tidigare nämnts skiljer sig mallen för den tomma UWP-appen (.NET Native) lite från mallen För tom UWP-app , men den har samma grundläggande struktur. Den största skillnaden är att mallen UWP Blank App (.NET Native) använder .NET Native för att kompilera din app. Mer information om fördelarna med att använda den nya . NET 9-mallen finns i Modernisera UWP-appen med förhandsversion av UWP-stöd för .NET 9 och native AOT .

2. Lägg till följande XAML-kod i elementet <Grid> i MainPage.xaml. Du kan skriva in den eller kopiera och klistra in den härifrån:

   <Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin = "152,293,0,0" VerticalAlignment="Top"/>
   

3. Nu har du skapat en mycket enkel app. Det här är ett bra tillfälle att skapa, distribuera och starta din app och se hur den ser ut. Du kan felsöka din app på den lokala datorn, i en simulator eller emulator eller på en fjärrenhet. Här är menyn för målenheten i Visual Studio:

   

   Som standard körs appen på den lokala datorn. Målenhetsmenyn innehåller flera alternativ för att felsöka din app på enheter från skrivbordsenhetsfamiljen.

   • HelloWorld (detta kör det på den lokala datorn)
   • WSL
   • Ladda ned nya emulatorer...

4. Kör appen för att se knappen i praktiken. Om du vill börja felsöka på den lokala datorn kan du köra appen genom att välja Felsökning | Starta felsökningsobjektet på menyn genom att klicka på knappen Starta felsökning i verktygsfältet (med HelloWorld-etiketten ) eller genom att trycka på F5.

   Appen öppnas i ett fönster och en standard välkomstskärm visas först. Välkomstskärmen definieras av en bild (SplashScreen.png) och en bakgrundsfärg (anges i appens manifestfil).

   Välkomstskärmen försvinner och sedan visas appen. Det ser ut så här:

   

5. Tryck på Windows-tangenten för att öppna Start-menyn och välj sedan Alla för att visa alla appar. Observera att distributionen av appen lokalt lägger till den i listan över program på Start-menyn . Om du vill köra appen igen senare (inte i felsökningsläge) kan du välja den på Start-menyn .

   Det gör inte mycket – ännu – men grattis, du har skapat och distribuerat din första UWP-app till din lokala dator!

6. Så här slutar du felsöka:

   Klicka på knappen Sluta felsöka () i verktygsfältet.

   –eller–

   I felsökningsmenyn klickar du på Stoppa felsökning.

   –eller–

   Stäng appfönstret.

7. Ändra knappens text genom att ändra värdet Content från Button till Hello, world!.

   <Button x:Name="button" Content="Hello, world!" HorizontalAlignment="Left" Margin = "152,293,0,0" VerticalAlignment="Top"/>
   

   Om du kör appen igen uppdateras knappen så att den nya texten visas.

Steg 3: Händelsehanterare

En "händelsehanterare" låter komplicerad, men det är bara ett annat namn för koden som anropas när en händelse inträffar (till exempel när användaren klickar på knappen).

1. Stoppa appen från att köras, om du inte redan har gjort det.

2. Börja skriva Click i XAML-redigeraren, så visar Visual Studio en lista över möjliga händelser. Välj Klicka i listan.

   

3. Välj <New Event Handler> sedan från listan. Detta skapar en ny händelsehanterarmetod i filen code-behind (MainPage.xaml.cs) och lägger Click till händelsen i knappelementet i XAML-koden.

   

   XAML-redigeraren lägger Click automatiskt till händelsen i knappelementet i XAML-koden:

   <Button x:Name="button" Content="Hello, world!" HorizontalAlignment="Left" Margin = "152,293,0,0" VerticalAlignment="Top" Click="button_Click"/>
   

   Detta lägger också till en händelsehanterare i filen bakom koden (MainPage.xaml.cs). Händelsehanteraren är en metod som anropas när knappen klickas. Namnet på metoden är button_Clickoch har två parametrar: object sender och RoutedEventArgs e.

   private void button_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
   {
   
   }
   

   Händelsen Click är en standardhändelse för knappar. När användaren klickar på knappen button_Click anropas metoden.

4. Redigera händelsehanterarkoden i MainPage.xaml.cs, sidan bakom koden. Det är här saker blir intressanta. Låt oss ändra det, så det ser ut så här:

   private async void button_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
   {
       var mediaElement = new MediaElement();
       var synth = new Windows.Media.SpeechSynthesis.SpeechSynthesizer();
       Windows.Media.SpeechSynthesis.SpeechSynthesisStream stream = await synth.SynthesizeTextToStreamAsync("Hello, World!");
       mediaElement.SetSource(stream, stream.ContentType);
       mediaElement.Play();
   }
   

   Kontrollera att metodsignaturen nu innehåller nyckelordet async , eller så får du ett fel när du försöker köra appen.

Vad gjorde vi just?

Den här koden använder vissa Windows-API:er för att skapa ett talsyntesobjekt och ger det sedan lite text att säga. (Mer information om hur du använder SpeechSynthesis finns i namnområdet SpeechSynthesis i dokumentationen för Windows Runtime-API:et (WinRT).)

När du kör appen och klickar på knappen kommer datorn (eller telefonen) bokstavligen att säga "Hello, World!".

Sammanfattning

Grattis, du har skapat din första UWP-app för Windows med .NET 9!

Om du vill lära dig hur du använder XAML för att lägga ut de kontroller som appen ska använda, prova rutnätsutbildningeller hoppa direkt till nästa steg?

Relaterat innehåll

• Publicera din UWP-app.
• Anvisningar om hur du utvecklar UWP-appar
• Kodexempel för UWP-utvecklare