Erstellen Sie ein "Hello, World!" UWP-App (XAML) mit .NET 9

In diesem Lernprogramm erfahren Sie, wie Sie XAML, C# und .NET 9 mit Native AOT (Ahead-of-Time) verwenden, um eine einfache App "Hello, World!" für die Universelle Windows-Plattform (UWP) unter Windows zu erstellen. Mit einem einzelnen Projekt in Microsoft Visual Studio können Sie eine App erstellen, die auf allen unterstützten Versionen von Windows 10 und Windows 11 ausgeführt wird.

Hier erfahren Sie, wie Sie:

• Erstellen Sie ein neues UWP-Projekt für .NET 9 in Visual Studio.
• Schreiben Sie XAML, um die Benutzeroberfläche auf der Startseite zu ändern.
• Führen Sie das Projekt auf dem lokalen Desktop in Visual Studio aus.
• Verwenden Sie einen SpeechSynthesizer, um die App sprechen zu lassen, wenn Sie eine Schaltfläche drücken.

Voraussetzungen

• Was ist eine universelle Windows-App?
• Laden Sie Visual Studio (und Windows) herunter. Wenn Sie eine Hand benötigen, erfahren Sie, wie Sie einrichten können.
• Außerdem wird davon ausgegangen, dass Sie das Standardfensterlayout in Visual Studio verwenden. Wenn Sie das Standardlayout ändern, können Sie es zurücksetzen, indem Sie den Befehl Fensterlayout zurücksetzen im Menü Fenster verwenden.

Schritt 1: Erstellen eines neuen Projekts in Visual Studio

1. Starten Sie Visual Studio.

2. Wählen Sie im Menü Datei-Neues > Projekt aus, um das Dialogfeld Neues Projekt zu öffnen.

3. Filtern Sie die Liste der verfügbaren Vorlagen, indem Sie C# aus der Dropdownliste " Sprachen " und "UWP " aus der Dropdownliste " Project-Typen " auswählen, um die Liste der verfügbaren UWP-Projektvorlagen für C#-Entwickler anzuzeigen.

   

   (Wenn keine UWP-Vorlagen angezeigt werden, fehlen möglicherweise die Komponenten zum Erstellen von UWP-Apps. Sie können den Installationsprozess wiederholen und UWP-Unterstützung hinzufügen, indem Sie visual Studio Installer über das Windows-Startmenü öffnen. Weitere Informationen finden Sie unter Einrichten von Visual Studio für die UWP-Entwicklung .)

4. Wählen Sie die Vorlage "Leere UWP-App " aus.

   Von Bedeutung

   Stellen Sie sicher, dass Sie die Vorlage für leere UWP-Apps auswählen. Wenn Sie die Vorlage für leere UWP-Apps (.NET Native) auswählen, wird sie auf die .NET Native-Laufzeit und nicht auf .NET 9 ausgerichtet. Apps für .NET Native haben keinen Zugriff auf die neuesten .NET- und C#-Features oder Sicherheits- und Leistungsverbesserungen. Weitere Informationen zu den Unterschieden zwischen den beiden Projekttypen finden Sie unter Modernisieren Ihrer UWP-App mit Vorschau-UWP-Unterstützung für .NET 9 und Native AOT.

5. Wählen Sie "Weiter" aus, und geben Sie "HelloWorld" als Projektnamen ein. Wählen Sie "Erstellen" aus.

   

   Hinweis

   Wenn Sie Visual Studio zum ersten Mal verwendet haben, wird möglicherweise ein Dialogfeld "Einstellungen" angezeigt, in dem Sie aufgefordert werden, den Entwicklermodus zu aktivieren. Der Entwicklermodus ist eine spezielle Einstellung, die bestimmte Features ermöglicht, z. B. die Berechtigung zum direkten Ausführen von Apps und nicht nur aus dem Store. Weitere Informationen finden Sie unter Aktivieren Ihres Geräts für die Entwicklung. Um mit diesem Handbuch fortzufahren, wählen Sie den Entwicklermodus aus, klicken Sie auf "Ja", und schließen Sie das Dialogfeld.

   

6. Das Dialogfeld "Zielversion/Mindestversion" wird angezeigt. Die Standardeinstellungen sind für dieses Lernprogramm in Ordnung. Wählen Sie daher "OK " aus, um das Projekt zu erstellen.

   

7. Wenn Das neue Projekt geöffnet wird, werden die zugehörigen Dateien im Projektmappen-Explorer Bereich auf der rechten Seite angezeigt. Möglicherweise müssen Sie die Registerkarte "Projektmappen-Explorer " anstelle der Registerkarten "Eigenschaften" oder "GitHub Copilot Chat " auswählen, um Ihre Dateien anzuzeigen.

   

Obwohl die leere UWP-App eine minimale Vorlage ist, enthält sie immer noch viele Dateien. Diese Dateien sind für alle UWP-Apps mit C# unerlässlich. Jedes UWP-Projekt, das Sie in Visual Studio erstellen, enthält sie.

Was ist in den Dateien?

Um eine Datei in Ihrem Projekt anzuzeigen und zu bearbeiten, doppelklicken Sie im Projektmappen-Explorer auf die Datei. Öffnen Sie eine XAML-Datei wie einen Ordner, um die zugehörige Code-Datei anzuzeigen. XAML-Dateien werden in einer geteilten Ansicht geöffnet, die sowohl die Entwurfsoberfläche als auch den XAML-Editor anzeigt.

App.xaml und App.xaml.cs

• "App.xaml" ist die Datei, in der Sie Ressourcen deklarieren, die in der gesamten App verwendet werden.
• App.xaml.cs ist die Code-Behind-Datei für "App.xaml". Wie alle Code-Behind-Seiten enthält sie einen Konstruktor, der die InitializeComponent-Methode aufruft. Sie schreiben die Methode InitializeComponent nicht. Es wird von Visual Studio generiert, und der Hauptzweck besteht darin, die in der XAML-Datei deklarierten Elemente zu initialisieren.
• App.xaml.cs ist der Einstiegspunkt für Ihre App.
• App.xaml.cs enthält auch Methoden zum Behandeln der Aktivierung und der Suspendierung der App.

MainPage.xaml

• In "MainPage.xaml" definieren Sie die Benutzeroberfläche für Ihre App. Sie können Elemente direkt mithilfe von XAML-Markup hinzufügen oder die von Visual Studio bereitgestellten Entwurfstools verwenden.
• MainPage.xaml.cs ist die Code-Behind-Seite für die Datei "MainPage.xaml". Hier fügen Sie Ihre App-Logik und Ereignishandler hinzu.
• Zusammen definieren diese beiden Dateien eine neue Klasse namens MainPage, die von Page erbt, im HelloWorld Namespace.

Package.appxmanifest

• Eine Manifestdatei, die Ihre App beschreibt: Name, Beschreibung, Kachel, Startseite usw.
• Enthält eine Liste von Abhängigkeiten, Ressourcen und Dateien, die Ihre App enthält.

Eine Reihe von Logobildern

• Assets/Square150x150Logo.scale-200.png und Wide310x150Logo.scale-200.png repräsentieren Ihre App (entweder in mittlerer oder breiter Größe) im Startmenü.
• Ressourcen/Square44x44Logo.png stellt Ihre App in der App-Liste des Startmenüs, der Taskleiste und des Task-Managers dar.
• Assets/StoreLogo.png stellt Ihre App im Microsoft Store dar.
• Ressourcen/SplashScreen.scale-200.png ist der Begrüßungsbildschirm, der beim Starten der App angezeigt wird.
• Ressourcen/LockScreenLogo.scale-200.png können verwendet werden, um die App auf dem Sperrbildschirm darzustellen, wenn das System gesperrt ist.

Schritt 2: Hinzufügen einer Schaltfläche

Verwendung der Designeransicht

Fügen wir unserer Seite eine Schaltfläche hinzu. In diesem Lernprogramm arbeiten Sie mit nur wenigen der zuvor aufgeführten Dateien: "App.xaml", "MainPage.xaml" und "MainPage.xaml.cs".

1. Doppelklicken Sie auf "MainPage.xaml ", um sie im XAML-Editor zu öffnen.

   

   Hinweis

   Beim Arbeiten mit der Vorlage für leere UWP-Apps , die .NET 9 verwendet, wird keine Entwurfsansicht angezeigt. Wenn Sie mit einem UWP-Projekt mit einer XAML-Entwurfsansicht arbeiten möchten, können Sie stattdessen die Vorlage für leere UWP-Apps (.NET Native) verwenden. Wie bereits erwähnt, unterscheidet sich die UWP Blank App (.NET Native)-Vorlage etwas von der UWP Blank App-Vorlage, weist jedoch die gleiche grundlegende Struktur auf. Der Hauptunterschied besteht darin, dass die Vorlage für die leere UWP-App (.NET Native) .NET Native zum Kompilieren Ihrer App verwendet. Informationen zu den Vorteilen der Verwendung der neuen .NET 9-Vorlage finden Sie unter Modernisieren Ihrer UWP-App mit Vorschau-UWP-Unterstützung für .NET 9 und Native AOT .

2. Fügen Sie dem <Grid> Element in "MainPage.xaml" den folgenden XAML-Code hinzu. Sie können ihn hier eingeben oder kopieren und einfügen:

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

3. Zu diesem Zeitpunkt haben Sie eine sehr einfache App erstellt. Dies ist ein guter Zeitpunkt, um Ihre App zu erstellen, bereitzustellen und zu starten und zu sehen, wie sie aussieht. Sie können Ihre App auf dem lokalen Computer, in einem Simulator oder Emulator oder auf einem Remotegerät debuggen. Hier sehen Sie das Zielgerätemenü in Visual Studio:

   

   Standardmäßig wird die App auf dem lokalen Computer ausgeführt. Das Zielgerätemenü bietet mehrere Optionen zum Debuggen Ihrer App auf Geräten aus der Desktopgerätefamilie.

   • HelloWorld (dies wird auf dem lokalen Computer ausgeführt)
   • WSL
   • Neue Emulatoren herunterladen...

4. Führen Sie die App aus, um die Schaltfläche in Aktion anzuzeigen. Um das Debuggen auf dem lokalen Computer zu starten, können Sie die App ausführen, indem Sie im Menü den Punkt Debuggen | Debugging starten wählen, auf die Schaltfläche "Debuggen starten" in der Symbolleiste (mit der Bezeichnung "HelloWorld") klicken oder F5 drücken.

   Die App wird in einem Fenster geöffnet, und zuerst wird ein standardmäßiger Begrüßungsbildschirm angezeigt. Der Begrüßungsbildschirm wird durch ein Bild (SplashScreen.png) und eine Hintergrundfarbe (in der Manifestdatei Ihrer App angegeben) definiert.

   Der Begrüßungsbildschirm wird ausgeblendet, und dann erscheint Ihre App. Es sieht wie folgt aus:

   

5. Drücken Sie die Windows-TASTE, um das Startmenü zu öffnen, und wählen Sie dann "Alle " aus, um alle Apps anzuzeigen. Beachten Sie, dass die Bereitstellung der App sie lokal zur Liste der Programme im Startmenü hinzufügt. Um die App später erneut auszuführen (nicht im Debugmodus), können Sie sie im Startmenü auswählen.

   Es macht noch nicht viel – aber herzlichen Glückwunsch, Sie haben Ihre erste UWP-App auf Ihrem lokalen Computer erstellt und bereitgestellt!

6. So beenden Sie das Debuggen:

   Klicken Sie in der Symbolleiste auf die Schaltfläche Debuggen beenden (Schaltfläche).

   –oder–

   Klicken Sie im Menü Debuggen auf Debugging beenden.

   –oder–

   Schließen Sie das App-Fenster.

7. Ändern Sie den Text der Schaltfläche, indem Sie den Content Wert von Button zu Hello, world! ändern.

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

   Wenn Sie die App erneut ausführen, wird die Schaltfläche aktualisiert, um den neuen Text anzuzeigen.

Schritt 3: Ereignishandler

Ein "Ereignishandler" klingt kompliziert, aber es ist einfach ein anderer Name für den Code, der aufgerufen wird, wenn ein Ereignis auftritt, wie zum Beispiel, wenn der Benutzer auf die Schaltfläche klickt.

1. Beenden Sie die App, falls Sie das noch nicht getan haben.

2. Beginnen Sie mit der Eingabe Click im XAML-Editor, und Visual Studio zeigt Eine Liste der möglichen Ereignisse an. Wählen Sie "Klicken " aus der Liste aus.

   

3. Wählen Sie <New Event Handler> als Nächstes aus der Liste aus. Dadurch wird eine neue Ereignishandlermethode in der CodeBehind-Datei (MainPage.xaml.cs) erstellt und dem Schaltflächenelement im XAML-Code das Click Ereignis hinzugefügt.

   

   Der XAML-Editor fügt das Click Ereignis automatisch dem Schaltflächenelement in Ihrem XAML-Code hinzu:

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

   Dadurch wird der Code-Behind-Datei (MainPage.xaml.cs) auch ein Ereignishandler hinzugefügt. Der Ereignishandler ist eine Methode, die aufgerufen wird, wenn auf die Schaltfläche geklickt wird. Der Name der Methode lautet button_Click, und es hat zwei Parameter: object sender und RoutedEventArgs e.

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

   Das Click Ereignis ist ein Standardereignis für Schaltflächen. Wenn der Benutzer auf die Schaltfläche klickt, wird die button_Click Methode aufgerufen.

4. Bearbeiten Sie den Ereignishandlercode in MainPage.xaml.cs, der Code-Behind-Seite. Hier werden die Dinge interessant. Lassen Sie uns es ändern, sodass es wie folgt aussieht:

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

   Stellen Sie sicher, dass die Methodensignatur jetzt das asynchrone Schlüsselwort enthält, oder wenn Sie versuchen, die App auszuführen, wird ein Fehler angezeigt.

Was haben wir gerade getan?

Dieser Code verwendet einige Windows-APIs, um ein Sprachsyntheseobjekt zu erstellen, und gibt ihm dann Text zum Sprechen. (Weitere Informationen zur Verwendung von SpeechSynthesis finden Sie im SpeechSynthesis-Namespace in der Dokumentation zur Windows-Runtime-API (WinRT).)

Wenn Sie die App ausführen und auf die Schaltfläche klicken, sagt Ihr Computer (oder Smartphone) buchstäblich "Hello, World!".

Zusammenfassung

Herzlichen Glückwunsch, Sie haben Ihre erste UWP-App für Windows mit .NET 9 erstellt!

Um zu erfahren, wie Sie XAML zur Gestaltung der Steuerelemente verwenden, die Ihre App nutzen wird, schauen Sie sich das Raster-Tutorialan oder gehen Sie direkt zu den nächsten Schrittenüber.

Verwandte Inhalte

• Veröffentlichen Ihrer UWP-App.
• Anleitungen zur Entwicklung von UWP-Apps
• Codebeispiele für UWP-Entwickler