Lernprogramm: Erstellen Ihrer ersten Universellen Windows-Plattform-Anwendung in Visual Studio mit XAML und C#

In diesem Lernprogramm erstellen Sie als Einführung in die integrierte Entwicklungsumgebung (Integrated Development Environment, IDE) von Visual Studio eine "Hello World"-App, die auf einem beliebigen Windows 10- oder höher-Gerät ausgeführt wird. Dazu verwenden Sie eine UWP-Projektvorlage (Universelle Windows-Plattform), extensible Application Markup Language (XAML) und die C#-Programmiersprache.

Anmerkung

Wenn Sie mit Ihrer aktuellen Funktionalität in der Universellen Windows-Plattform (UWP) zufrieden sind, müssen Sie Ihren Projekttyp nicht zum Windows App SDK migrieren. WinUI 2.x und das Windows SDK unterstützen UWP-Projekttypen. Wenn Sie mit WinUI 3 und Dem Windows App SDK beginnen möchten, können Sie die Schritte im Lernprogramm zum Windows App SDK ausführen.

In diesem Tutorial:

• Erstellen eines Projekts
• Erstellen einer Anwendung
• Ausführen der Anwendung

Voraussetzungen

Sie benötigen:

• Visual Studio. Besuchen Sie die Visual Studio-Downloadseite für eine kostenlose Version.

• Workloads und Komponenten, die für die Entwicklung einer UWP-App erforderlich sind. Um eine Workload in Visual Studio zu überprüfen oder zu installieren, wählen Sie "Tools>abrufen" und "Features abrufen" aus, oder wählen Sie im Fenster " Neues Projekt erstellen" den Link " Weitere Tools und Features installieren " aus. Weitere Informationen finden Sie unter Ändern von Workloads oder einzelnen Komponenten.

  Wählen Sie auf der Registerkarte "Workloads " des Visual Studio Installers die folgenden Workloads und Komponenten aus:

  Visual Studio 2022, Version 17.10 und höher

  • Wählen Sie für die App-Entwicklung mit UWP die WinUI-Anwendungsentwicklungsauslastung aus. Wählen Sie dann im Bereich "Installationsdetails " unter dem WinUI-Anwendungsentwicklungsknoten die benötigte UWP-Option aus (dadurch werden auch alle zusätzlichen erforderlichen Komponenten ausgewählt).

  • Wählen Sie für C# die Tools für die universelle Windows-Plattform und das Windows 11 SDK (10.0.26100.0) aus.

  • Dieses Lernprogramm erfordert die UWP-Projektvorlage Leere App.

  Visual Studio 2022, Version 17.1 – 17.9

  • Wählen Sie für die Entwicklung von C# -Apps mit UWP die Arbeitsauslastung für die Entwicklung der universellen Windows-Plattform aus.

  • In diesem Lernprogramm ist die Projektvorlage "Leere App" (Universelle Windows-App) erforderlich.

  Anmerkung

  In Visual Studio 17.10 - 17.12 wird diese Workload als Windows-Anwendungsentwicklung bezeichnet.

Erstellen eines Projekts

Erstellen Sie zunächst ein Projekt für die universelle Windows-Plattform. Der Projekttyp enthält alle benötigten Vorlagendateien, bevor Sie sogar etwas hinzufügen!

1. Öffnen Sie Visual Studio, und wählen Sie im Startfenster " Neues Projekt erstellen" aus.

2. Geben Sie im Suchfeld "Universelles Windows erstellen" auf dem Bildschirm "Neues Projekt erstellen" die Vorlage "C#" für "Leere App" (Universelle Windows-App) oder "Leere UWP-App" in Visual Studio 2022 17.10 oder höher ein, und wählen Sie dann "Weiter" aus.

   

3. Geben Sie dem Projekt einen Namen, HelloWorld, und wählen Sie "Erstellen" aus.

   

4. Übernehmen Sie die Standardeinstellungen für Zielversion und Mindestversion im Dialogfeld " Neues Projekt für die universelle Windows-Plattform ".

   

   Anmerkung

   Wenn Sie Visual Studio zum ersten Mal zum Erstellen einer UWP-App verwendet haben, wird das Dialogfeld " Entwicklermodus für Windows aktivieren " angezeigt. Wählen Sie Einstellungen für Entwickler aus, um Einstellungen zu öffnen. Aktivieren Sie den Entwicklermodus, und wählen Sie dann "Ja" aus.

   

   Visual Studio installiert ein zusätzliches Entwicklermoduspaket für Sie. Wenn die Paketinstallation abgeschlossen ist, schließen Sie das Dialogfeld "Einstellungen ".

Erstellen der Anwendung

Es ist an der Zeit, mit der Entwicklung zu beginnen. Fügen Sie ein Schaltflächensteuerelement hinzu, fügen Sie der Schaltfläche eine Aktion hinzu, und starten Sie dann die App "Hello World", um zu sehen, wie sie aussieht.

Hinzufügen einer Schaltfläche zum Entwurfsbereich

1. Im Projektmappen-Explorer doppelklicken Sie MainPage.xaml , um eine geteilte Ansicht zu öffnen.

   

   Es gibt zwei Bereiche: den XAML-Designer, der einen Entwurfsbereich enthält, und den XAML-Editor, in dem Sie Code hinzufügen oder ändern können.

   

2. Wählen Sie Toolbox aus, um das Flyoutfenster der Toolbox zu öffnen.

   

   Wenn die Toolboxoption nicht angezeigt wird, können Sie sie über die Menüleiste öffnen. Wählen Sie dazu Ansicht>Symbolleiste. Oder drücken Sie STRG+ALT+X.

3. Wählen Sie das Symbol "Anheften " aus, um das Toolboxfenster anzudocken.

   

4. Wählen Sie das Schaltflächen-Steuerelement aus, und ziehen Sie es dann auf den Entwurfsbereich.

   

   Wenn Sie den Code im XAML-Editor betrachten, sehen Sie auch, dass die Schaltfläche dort angezeigt wird:

   

Hinzufügen einer Beschriftung zur Schaltfläche

1. Ändern Sie im Button Content den Wert von "Button" in "Hello World".

   

2. Beachten Sie, dass sich auch die Schaltfläche im XAML-Designer ändert.

   

Hinzufügen eines Ereignishandlers

Ein Ereignishandler klingt kompliziert, aber es ist nur ein anderer Name für Code, der aufgerufen wird, wenn ein Ereignis auftritt. In diesem Fall wird der Schaltfläche "Hello World!" eine Aktion hinzugefügt.

1. Doppelklicken Sie auf der Entwurfs-Canvas auf das Steuerelement „Schaltfläche“.

2. Bearbeiten Sie den Ereignishandlercode in MainPage.xaml.cs, der Code-Behind-Seite.

   Hier finden Sie interessante Dinge. Der Standardereignishandler sieht wie folgt aus:

   

   Ändern Sie sie, sodass sie wie folgt aussieht:

   

   Hier sehen Sie den Code zum Kopieren und Einfügen:

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

Was haben wir gerade getan?

Der Code verwendet einige Windows-APIs zum Erstellen eines Sprachsyntheseobjekts und gibt ihr dann Text. Weitere Informationen zur Verwendung von SpeechSynthesisfinden Sie unter System.Speech.Synthesis.

Ausführen der Anwendung

Es ist an der Zeit, die UWP-App "Hello World" zu erstellen, bereitzustellen und zu starten, um zu sehen, wie sie aussieht und klingt. Gehen Sie dazu wie folgt vor:

1. Verwenden Sie die Schaltfläche "Wiedergeben" (die den Text "Lokaler Computer" hat), um die Anwendung auf dem lokalen Computer zu starten.

   

   Alternativ können Sie " Debuggen>starten" in der Menüleiste auswählen oder F5 drücken, um die App zu starten.

2. Sehen Sie sich Ihre App an, die gleich nach der Anzeige eines Begrüßungsbildschirms angezeigt wird. Die App sollte ähnlich wie dieses Bild aussehen:

   

3. Wählen Sie die Schaltfläche "Hello World " aus.

   Ihr Windows 10- oder höher-Gerät sagt wörtlich: "Hello, World!"

4. Um die App zu schließen, wählen Sie die Schaltfläche " Debuggen beenden " in der Symbolleiste aus. Alternativ können Sie in der Menüleiste " Debuggen>beenden" auswählen, oder drücken Sie UMSCHALT+F5.

Verwandte Inhalte

• UWP-Übersicht
• UWP-App-Beispiele abrufen

Nächster Schritt

Herzlichen Glückwunsch zum Abschluss dieses Lernprogramms! Wir hoffen, dass Sie einige Grundlagen zu UWP und der Visual Studio-IDE kennengelernt haben. Fahren Sie für weitere Informationen mit dem folgenden Tutorial fort:

Erstellen einer Benutzeroberfläche