Freigeben über

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

  • Artikel

Mithilfe dieser Einführung in die integrierte Entwicklungsumgebung (IDE) von Visual Studio erstellen Sie die App „Hallo Welt“, die auf jedem beliebigen Windows 10-Gerät (oder höher) ausgeführt werden kann. Dazu verwenden Sie eine Windows App SDK-Projektvorlage (WinUI 3), XAML (Extensible Application Markup Language) und die Programmiersprache C#.

Hinweis

WinUI 3 ist die native Benutzeroberflächenplattform-Komponente, die im Lieferumfang des Windows-App SDK enthalten ist (vollständig entkoppelt von Windows SDKs). Weitere Informationen finden Sie unter WinUI 3.

Wenn Sie Visual Studio noch nicht installiert haben, können Sie es auf der Seite Visual Studio-Downloads kostenlos herunterladen.

Erstellen eines Projekts

Erstellen Sie zunächst ein WinUI 3-Projekt. Der Projekttyp enthält alle nötigen Vorlagendateien, schon bevor Sie mit der Bearbeitung beginnen.

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 werden verfügbar, indem Sie eine Visual Studio-Erweiterung (VSIX) installieren.

Hinweis

Wenn Sie bereits eine VSIX-Erweiterung für ein Windows App SDK installiert haben, deinstallieren Sie diese, bevor Sie eine andere Version installieren. Anweisungen finden Sie unter Verwalten von Erweiterungen für Visual Studio.

  • Sie können das neueste stabile VSIX-Release 1.1 aus 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, öffnen Sie es erneut, und folgen Sie den Anweisungen zum Installieren der Erweiterung. Installieren Sie auch die Vorlagen für Windows App SDK 1.1.
  • Alternativ dazu können Sie die Erweiterung auch direkt aus dem Visual Studio Marketplace herunterladen und installieren:

Herunterladen von Vorlagen für Windows App SDK für C# und VS2019

Nachdem die Vorlagenerweiterung installiert wurde, können Sie Ihr erstes Projekt erstellen. Weitere Informationen zur Unterstützung für Visual Studio 2019 finden Sie unter Installieren der Tools für das Windows App SDK. In diesem Tutorial wird davon ausgegangen, dass Sie Visual Studio 2022 verwenden.

  1. Öffnen Sie Visual Studio, und wählen Sie im Fenster Start die Option Neues Projekt erstellen.

  2. Geben Sie auf dem Bildschirm Neues Projekt erstellen den Text WinUI in das Suchfeld ein, wählen Sie die C#-Vorlage für Leere App, gepackt (WinUI 3 in Desktop) und dann Weiter aus.

    Screenshot of the 'Create a new project' dialog with 'WinUI' entered in the search box, and the 'Blank App, Packaged (WinUI 3 in Desktop)' project template highlighted.

    Hinweis

    Wenn die Projektvorlage Leere App, gepackt (WinUI 3 in Desktop) nicht angezeigt wird, klicken Sie auf den Link Weitere Tools und Features installieren.

    Screenshot of the Create a new project window showing the 'Install more tools and features' link.

    Der Visual Studio-Installer wird gestartet. Wählen Sie die Workload .NET-Desktopentwicklung aus, und wählen Sie dann im Bereich Installationsdetails des Installationsdialogfelds die Option Windows App SDK-C#-Vorlagen (unten in der Liste) aus. Wählen Sie dann Ändern aus.

    Screenshot of the Visual Studio Installer showing the .NET Desktop Development workload.

  3. Benennen Sie das Projekt mit HelloWorld, und klicken Sie auf Erstellen.

    Screenshot of the 'Configure your new project' dialog with 'HelloWorld' entered in the Project name field.

    Hinweis

    Wenn Sie Visual Studio erstmals zum Erstellen einer Windows App SDK-App verwenden, wird möglicherweise ein Dialogfeld mit Einstellungen angezeigt. Wählen Sie Entwicklermodus, und wählen Sie dann Ja.

    Screenshot showing the Settings dialog box with the option for enabling Developer Mode.

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

Erstellen der Anwendung

Beginnen wir jetzt mit der Entwicklung. Sie fügen zunächst ein Schaltflächensteuerelement hinzu, Dann fügen Sie der Schaltfläche eine Aktion hinzu und führen die HelloWorld-App aus, um sie sich anzusehen.

Hinzufügen einer Schaltfläche zur Entwurfs-Canvas

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

    Screenshot of the Solution Explorer window showing the properties, references, assets, and files in the HelloWorld project. The file MainWindow.xaml is selected.

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

    Screenshot showing MainWindow.xaml open in the Visual Studio IDE. The XAML Editor pane shows the XAML markup for the window.

  2. Sehen Sie sich das Button-Steuerelement an, das im StackPanel im Stammverzeichnis von Window geschachtelt ist.

    Screenshot showing 'Button' highlighted in the XAML editor.

Ändern der Beschriftung auf der Schaltfläche

  1. Ändern Sie im XAML-Editor den Wert für „Button Content“ „Klicken“ zu „Hallo Welt!“.

    Screenshot showing the XAML code for the Button in the XAML editor. The value of the Content property has been changed to 'Hello World!'.

  2. Beachten Sie, dass für die Schaltfläche auch ein Click-Ereignishandler mit dem Namen myButton_Click angegeben ist. Damit beschäftigen wir uns im nächsten Schritt.

    Screenshot showing the XAML code for the Button in the XAML editor. The click event of the button has been highlighted.

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

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

  2. Bearbeiten Sie den Ereignishandlercode im C#-Editorfenster, das geöffnet wird.

    An dieser Stelle wird es interessant. Der Standard-Ereignishandler sieht wie folgt aus:

    Screenshot showing the C# code for the default myButton_Click event handler.

    Wir ändern ihn, damit er wie folgt aussieht:

    Screenshot showing the C# code for the new async myButton_Click event handler.

    Hier finden 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 Begrüßungsmeldung 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

Jetzt können Sie die Windows App SDK-App „HelloWorld“ kompilieren, bereitstellen und starten, um sie sich anzusehen. Gehen Sie folgendermaßen vor:

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

    Screenshot showing the drop-down box open next to the Play button with 'HelloWorld (Package)' selected.

    (Alternativ können Sie in der Menüleiste Debuggen>Debugging starten wählen oder F5 drücken, um Ihre App zu starten.)

  2. Sehen Sie sich Ihre App an, die gleich nach der Anzeige eines Begrüßungsbildschirms angezeigt wird. Die App sollte der folgenden Abbildung ähneln:

    Screenshot showing the running Windows App SDK 'Hello World' application.

  3. Wählen Sie die Schaltfläche Hallo Welt aus.

    Auf Ihrem Gerät unter Windows 10 oder höher wird die Meldung „Willkommen bei Ihrer ersten Windows App SDK-App“ mit dem Titel „Hallo von HelloWorld“ angezeigt. Klicken Sie auf OK, um die Meldung zu schließen.

    Screenshot showing the running 'Hello World' application with a popup titled 'Hello from HelloWorld'.

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

Nächste Schritte

Damit haben Sie das Tutorial erfolgreich abgeschlossen. Wir hoffen, dass Sie einige Grundlagen zum Windows App SDK, zu WinUI 3 und zur Visual Studio-IDE gelernt haben. Fahren Sie für weitere Informationen mit dem folgenden Tutorial fort:

Tutorial: Erstellen einer einfachen Fotoanzeige mit WinUI 3

Siehe auch