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

I den här självstudien, som en introduktion till Visual Studio Integrated Development Environment (IDE), skapar du en "Hello World"-app som körs på valfri Windows 10-enhet eller senare enhet. För att göra det använder du en UWP-projektmall (Universal Windows Platform), XAML (Extensible Application Markup Language) och programmeringsspråket C#.

Not

Om du är nöjd med dina aktuella funktioner i UWP (Universal Windows Platform) behöver du inte migrera projekttypen till Windows App SDK. WinUI 2.x och Windows SDK stöder UWP-projekttyper. Om du vill komma igång med WinUI 3 och Windows App SDK kan du följa stegen i självstudien Windows App SDK.

I den här handledningen:

• Skapa ett projekt
• Skapa ett program
• Kör programmet

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.

Obs

Den här självstudien kräver Tom App (universell Windows) projektmall. Under installationen väljer du arbetsbelastningen Universell Windows-plattformsutveckling:

Om du redan har Installerat Visual Studio och behöver lägga till det väljer du Verktyg>Hämta verktyg och funktioner, eller i fönstret Skapa ett nytt projekt väljer du länken Installera fler verktyg och funktioner.

Skapa ett projekt

Skapa först ett Universal Windows Platform-projekt. Projekttypen levereras med alla mallfiler du behöver, innan du ens lägger till något!

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

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

   

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

   

4. Acceptera standardinställningarna för Målversion och Lägsta version i dialogrutan New Universal Windows Platform Project.

   

   Obs

   Om det är första gången du använder Visual Studio för att skapa en UWP-app visas dialogrutan Aktivera utvecklarläge för Windows. Välj inställningar för utvecklare för att öppna inställningar. Aktivera utvecklarlägeoch välj sedan Ja.

   

   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. Lägg till en knappkontroll, lägg till en åtgärd på knappen och starta sedan appen "Hello World" för att se hur den ser ut.

Lägg till en knapp på Design-duken

1. I Solution Explorerdubbelklickar du på MainPage.xaml för att öppna en delad vy.

   

   Det finns två fönster: XAML Designer, som innehåller en designarbetsyta och XAML-redigeraren, där du kan lägga till eller ändra kod.

   

2. Välj Verktygslåda för att öppna det utfällbara fönstret för verktygslådan.

   

   Om du inte ser alternativet Toolbox kan du öppna det från menyraden. Om du vill göra det väljer du Visa>verktygsfält. Eller tryck på Ctrl+Alt+X.

3. Välj ikonen 'Fäst' för att docka verktygslådefönstret.

   

4. Välj -knappen-kontrollen och dra den sedan på designarbetsytan.

   

   Om du tittar på koden i XAML-redigerarenser du också att knappen visas där:

   

Lägg till en etikett på knappen

1. I XAML-redigerarenändrar du Button Content från Button till Hello World!

   

2. Observera att knappen i XAML Designer också ändras.

   

Lägga till en händelsehanterare

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 i Hello World! knapp.

1. Dubbelklicka på knappkontrollen på designarbetsytan.

2. Redigera händelsehanterarkoden i MainPage.xaml.cs, sidan bakom koden.

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

   

   Ändra den så att den ser ut så här:

   

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

   private async void Button_Click(object sender, RoutedEventArgs e)
   {
      MediaElement 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();
   }
   

Vad gjorde vi just?

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 SpeechSynthesisfinns i System.Speech.Synthesis.

Kör programmet

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

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

   

   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:

   

3. Välj knappen Hello World.

   Din Windows 10- eller senare-enhet säger bokstavligen "Hello, World!"

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.

Relaterat innehåll

• UWP-översikt
• Hämta UWP-appexempel

Nästa steg

Grattis för att du har slutfört den här genomgången! Vi hoppas att du har lärt dig några grunderna om UWP och Visual Studio IDE. Om du vill veta mer fortsätter du med följande självstudie:

Skapa ett användargränssnitt