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

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

Anmerkung

WinUI 3 ist die systemeigene UI-Plattformkomponente, die mit dem Windows App SDK ausgeliefert wird (vollständig von Windows SDKsentkoppelt). Weitere Informationen finden Sie unter WinUI 3.

Wenn Sie Visual Studio noch nicht installiert haben, wechseln Sie zur Visual Studio-Downloads Seite, um es kostenlos zu installieren.

Voraussetzungen

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

• Workloads und Komponenten, die für die Entwicklung mit WinUI und dem Windows App SDK erforderlich sind. Um eine Workload in Visual Studio zu überprüfen oder zu installieren, wählen Sie Extras>Extras und Features abrufen aus. Weitere Informationen finden Sie unter Ändern von Workloads oder einzelnen Komponenten.

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

  Visual Studio 2022, Version 17.10 und höher

  • Wählen Sie für C#- App-Entwicklung mit dem Windows App SDK Windows-Anwendungsentwicklungaus.

  Visual Studio 2022, Version 17.1 – 17.9

  • Wählen Sie für C#--App-Entwicklung mit dem Windows App SDK .NET Desktop Developmentaus.
  • Wählen Sie dann im Installationsdetails Bereich des Installationsdialogfelds Windows App SDK C#-Vorlagen (am unteren Rand der Liste) aus.

Erstellen eines Projekts

Erstellen Sie zunächst ein WinUI 3-Projekt. Der Projekttyp enthält alle benötigten Vorlagendateien, bevor Sie sogar etwas hinzugefügt haben!

1. Öffnen Sie Visual Studio, und wählen Sie im Startfenster Erstellen eines neuen Projektsaus.

2. Auf dem Bildschirm Erstellen eines neuen Projekts geben Sie WinUI in das Suchfeld ein, wählen Sie die C#-Vorlage für Leere App, verpackt (WinUI 3 in Desktop)aus, und wählen Sie dann Weiteraus.

   

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

   

   Anmerkung

   Wenn Sie Visual Studio zum ersten Mal zum Erstellen einer Windows App SDK-App verwendet haben, wird möglicherweise ein dialogfeld Einstellungen angezeigt. Wählen Sie Entwicklermodusaus, 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. Sie fügen ein Schaltflächensteuerelement hinzu, fügen der Schaltfläche eine Aktion hinzu, und führen Sie dann die App "Hello World" aus, um zu sehen, wie es aussieht.

Hinzufügen einer Schaltfläche zum Entwurfsbereich

1. Doppelklicken Sie im Solution Explorerauf MainWindow.xaml, um den XAML-Markup-Editor zu öffnen.

   

   Mit dem XAML-Editor- können Sie Markup hinzufügen oder ändern. Im Gegensatz zu UWP-Projekten bietet WinUI 3 keine Designansicht.

   

2. Sehen Sie sich das Schaltflächen-Steuerelement an, das in StackPanel im Stammverzeichnis von Window geschachtelt ist.

   

Ändern der Beschriftung auf der Schaltfläche

1. Ändern Sie im XAML-Editorden Button-Text von „Click me“ in „Hello World!“.

   

2. Beachten Sie, dass für die Schaltfläche auch ein Click-Ereignishandler mit dem Namen myButton_Click angegeben ist. Dies wird im nächsten Schritt erläutert.

   

Ändern des 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 eine Aktion hinzugefügt, die durch die Schaltfläche "Hello World!" ausgelöst wird.

1. Doppelklicken Sie im Projektmappen-Explorer auf MainWindow.xaml.cs, die CodeBehind-Seite.

2. Bearbeiten Sie den Ereignishandlercode im daraufhin geöffneten C#-Editorfenster.

   Hier kommt es zu interessanten Dingen. Der Standardereignishandler sieht wie folgt aus:

   

   Lassen Sie uns es ändern, sodass es wie folgt aussieht:

   

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

   private async void myButton_Click(object sender, RoutedEventArgs e)
   {
       var welcomeDialog = new ContentDialog()
       {
           Title = "Hello from HelloWorld",
           Content = "Welcome to your first Windows App SDK app.",
           CloseButtonText = "Ok",
           XamlRoot = myButton.XamlRoot
       };
       await welcomeDialog.ShowAsync();
   }
   

Was haben wir gerade getan?

Der Code verwendet das ContentDialog Steuerelement, um eine Willkommensnachricht in einem modalen Popupsteuerelement im aktuellen Fenster anzuzeigen. (Weitere Informationen zur Verwendung von Microsoft.UI.Xaml.Controls.ContentDialogfinden Sie unter ContentDialog Class.)

Ausführen der Anwendung

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

1. Verwenden Sie die Schaltfläche "Wiedergeben" (mit dem Text HelloWorld (Paket)), um die Anwendung auf dem lokalen Computer zu starten.

   

   (Alternativ können Sie in der Menüleiste Debuggen>Debuggen starten 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 zeigt eine Meldung mit der Meldung "Willkommen bei Ihrer ersten Windows App SDK-App" mit dem Titel "Hello from HelloWorld" an. Klicken Sie auf OK, um die Nachricht zu schließen.

   

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

Nächste Schritte

Herzlichen Glückwunsch zum Abschluss dieses Lernprogramms! Wir hoffen, dass Sie einige Grundlagen zum Windows App SDK, WinUI 3 und zur Visual Studio-IDE gelernt haben. Um mehr zu erfahren, fahren Sie mit dem folgenden Tutorial fort:

Lernprogramm: Erstellen einer einfachen Fotoanzeige mit WinUI 3

Siehe auch

• Schreiben von Apps für Windows: Auswählen einer Entwicklungstechnologie
• Übersicht über Windows App SDK
• Windows App SDK /WinUI 3 Beispiele