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 Windows App SDK beginnen möchten, können Sie die Schritte im Windows App SDK-Lernprogrammausführen.

In diesem Tutorial:

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

Voraussetzungen

Sie benötigen Visual Studio, um dieses Lernprogramm abzuschließen. Besuchen Sie die Visual Studio-Downloadseite für eine kostenlose Version.

Anmerkung

Dieses Tutorial erfordert die Projektvorlage Leere App (Universal Windows). Wählen Sie während der Installation die Workload Entwicklung der Universellen Windows-Plattform aus:

Wenn Sie Visual Studio bereits installiert haben und sie hinzufügen müssen, wählen Sie im Menü Tools>Tools und Features abrufenaus, oder wählen Sie im Fenster Erstellen eines neuen Projekts den Link Weitere Tools und Features installieren Link aus.

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 Erstellen eines neuen Projektsaus.

2. Geben Sie auf dem Bildschirm Erstellen eines neuen Projekts im Suchfeld Universal Windows ein, wählen Sie die C#-Vorlage für Leere App (Universal Windows)aus, und wählen Sie dann Weiteraus.

   

3. Geben Sie dem Projekt einen Namen, HelloWorld, und wählen Sie Erstellenaus.

   

4. Übernehmen Sie im Dialogfeld Neues UWP-Projekt die Standardeinstellungen für Zielversion und Mindestversion.

   

   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 die Einstellungen zu öffnen. Aktivieren Sie Entwicklermodus, und wählen Sie dann Jaaus.

   

   Visual Studio installiert ein zusätzliches Entwicklermoduspaket für Sie. Schließen Sie nach Abschluss der Paketinstallation 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. Doppelklicken Sie im Projektmappen-Explorerauf MainPage.xaml, um eine geteilte Ansicht zu öffnen.

   

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

   

2. Klicken Sie auf Toolbox, um das Toolbox-Flyoutfenster zu öffnen.

   

   Wenn die Option Toolbox nicht angezeigt wird, können Sie sie über die Menüleiste öffnen. Hierzu wählen Sie Ansicht>Symbolleiste aus. Oder drücken Sie STRG+ALT-+X-.

3. Wählen Sie das Stecknadelsymbol aus, um das Fenster „Toolbox“ anzudocken.

   

4. Wählen Sie das Steuerelement Schaltfläche aus, und ziehen Sie es in die Entwurfs-Canvas.

   

   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 XAML-Editorden Button Content Wert von Button zu Hello World!.

   

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

   

Hinzufügen eines Ereignishandlers

Ein Ereignishandler klingt kompliziert, ist aber nur ein anderer Name für Code, der aufgerufen wird, wenn ein Ereignis eintritt. 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 CodeBehind-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 "Start" (sie hat den Text Lokaler Computer), um die Anwendung auf dem lokalen Computer zu starten.

   

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

2. Sehen Sie Ihre App, die kurz nachdem der Begrüßungsbildschirm verschwindet, erscheint. 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 in der Symbolleiste die Schaltfläche Debuggen beenden aus. Alternativ können Sie in der Menüleiste auf Debuggen>Debuggen beenden auswählen oder UMSCHALTTASTE+F5 drücken.

Verwandte Inhalte

• UWP-Übersicht
• UWP-App-Beispiele erhalten

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