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:
- Wählen Sie für C#- App-Entwicklung mit dem Windows App SDK Windows-Anwendungsentwicklungaus.
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!
Wichtig
Visual Studio 2019 unterstützt nur Windows App SDK 1.1 und früher. Visual Studio 2022 wird für die Entwicklung von Apps mit allen Versionen des Windows App SDK empfohlen.
Die Windows App SDK 1.1.x-Vorlagen sind verfügbar, indem sie eine Visual Studio-Erweiterung (VSIX)installieren.
Anmerkung
Wenn Sie eine Windows App SDK Visual Studio-Erweiterung (VSIX) bereits installiert haben, deinstallieren Sie sie, bevor Sie eine andere Version installieren. Anweisungen finden Sie unter Verwalten von Erweiterungen für Visual Studio.
- Sie können die neueste stabile 1.1.x-Version der VSIX über Visual Studio installieren. Wählen Sie Erweiterungen>Erweiterungen verwalten aus, suchen Sie nach Windows App SDK, und laden Sie die Windows App SDK-Erweiterung herunter. Schließen Sie Visual Studio, und öffnen Sie es erneut, und folgen Sie den Anweisungen, um die Erweiterung zu installieren. Installieren Sie die Vorlagen für Windows App SDK 1.1.
- Alternativ können Sie die Erweiterung direkt von Visual Studio Marketplaceherunterladen und installieren:
Nachdem die Vorlagenerweiterung installiert wurde, können Sie Ihr erstes Projekt erstellen. Weitere Informationen zur Visual Studio 2019-Unterstützung finden Sie unter Install tools for the Windows App SDK. Im restlichen Lernprogramm wird davon ausgegangen, dass Sie Visual Studio 2022 verwenden.
Öffnen Sie Visual Studio, und wählen Sie im Startfenster Erstellen eines neuen Projektsaus.
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.
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
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.
Sehen Sie sich das Schaltflächen-Steuerelement an, das in StackPanel im Stammverzeichnis von Window geschachtelt ist.
Ändern der Beschriftung auf der Schaltfläche
Ändern Sie im XAML-Editorden Button-Text von „Click me“ in „Hello World!“.
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.
Doppelklicken Sie im Projektmappen-Explorer auf MainWindow.xaml.cs, die CodeBehind-Seite.
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.ContentDialog
finden 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:
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.)
Sehen Sie sich Ihre App an, die gleich nach der Anzeige eines Begrüßungsbildschirms angezeigt wird. Die App sollte ähnlich wie dieses Bild aussehen:
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.
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: