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

Förutsättningar

Du behöver:

• Visual Studio. Besök Visual Studio-nedladdningssidan för en kostnadsfri version.

• Arbetsbelastningar och komponenter som krävs för att utveckla en UWP-app. Om du vill verifiera eller installera en arbetsbelastning i Visual Studio 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 . Mer information finns i Ändra arbetsbelastningar eller enskilda komponenter.

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

  • Visual Studio 2022 version 17.10 och senare
  • Visual Studio 2022 version 17.1 – 17.9

  • För apputveckling med UWP väljer du arbetsbelastningen WinUI-programutveckling . Välj sedan det UWP-alternativ du behöver i fönstret Installationsinformation under noden WinUI-programutveckling (detta kommer också att välja eventuella ytterligare nödvändiga komponenter)

  • För C#väljer du Universella Windows-plattformsverktyg och Windows 11 SDK (10.0.26100.0).

  • Den här självstudien kräver projektmallen UWP Blank App.

  Not

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

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.

1. Öppna Visual Studio och välj Skapa ett nytt projekt i 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 (Universell Windows) och väljer sedan Nästa.

   

3. Ge projektet ett namn, HelloWorld, och välj Skapa.

   

4. Acceptera standardinställningarna för Målversion och Lägsta version i dialogrutan Nytt universellt Windows-plattformsprojekt .

   

   Not

   Om det är första gången du använder Visual Studio för att skapa en UWP-app kan dialogrutan Inställningar visas. Välj Utvecklarläge och 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 .

1. Öppna Visual Studio och välj Skapa ett nytt projekt i 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 (Universell Windows) eller UWP Tom app i Visual Studio 2022 17.10 eller senare och väljer sedan Nästa.

   Skärmbild av dialogrutan "Skapa ett nytt projekt" med "Universal Windows" angivet i sökrutan och projektmallen "Tom app (Windows universell)" markerad.

3. Ge projektet ett namn, HelloWorld, och välj Skapa.

   

4. Acceptera standardinställningarna för Målversion och Lägsta version i dialogrutan Nytt universellt Windows-plattformsprojekt .

   

   Not

   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äge och 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 .

1. Dubbelklicka i MainPage.xaml för att öppna en delad vy.

   

   Det finns två fönsterrutor: 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 verktygslådans utfällningsfönster.

   

   Om du inte ser alternativet Verktygslåda 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 fästa fönstret Verktygslåda.

   

4. Välj knappkontrollen och dra den sedan till designarbetsytan.

   

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

   

1. Dubbelklicka i MainPage.xaml för att öppna en delad vy.

   

   Det finns två fönsterrutor: 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 verktygslådans utfällningsfönster.

   

   Om du inte ser alternativet Verktygslåda 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 fästa fönstret Verktygslåda.

   

4. Välj knappkontrollen och dra den sedan till designarbetsytan.

   

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

   

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

   

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

   

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

   

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

   

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();
   }
   

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();
   }
   

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 för att starta programmet på den lokala datorn. Den har texten Lokal dator.

   

   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 liknande denna figur:

   

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 Stoppa felsökning i verktygsfältet. Du kan också välja Felsöka>Sluta felsöka från menyraden eller trycka på Skift+F5.

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 Stoppa felsökning i verktygsfältet. Du kan också välja Felsöka>Sluta felsöka från menyraden eller trycka på Skift+F5.