Freigeben über

Erste Schritte mit WinUI 2 für UWP

WinUI 2.8 ist die neueste stabile Version von WinUI, die zum Erstellen von UWP-Produktionsanwendungen (und Desktopanwendungen mit XAML-Inseln) verwendet werden kann.

Die Bibliothek ist als NuGet-Paket verfügbar, das jedem neuen oder vorhandenen Visual Studio-Projekt hinzugefügt werden kann.

Hinweis

Weitere Informationen zum Erstellen von Windows-Desktop-Apps mit der neuesten Version von WinUI 3 finden Sie unter WinUI 3.

Einrichten von Visual Studio für die UWP-Entwicklung

Laden Sie Visual Studio 2022 herunter, und installieren Sie die Tools für die UWP-Entwicklung. Ausführlichere Anweisungen finden Sie unter Erstellen einer UWP-App in den Visual Studio-Dokumenten.

Wählen Sie auf der Registerkarte "Workloads " der Visual Studio Installer-App die folgenden Workloads und Komponenten aus:

  • Wählen Sie die WinUI-Anwendungsentwicklungsauslastung aus. Wählen Sie dann im Bereich "Installationsdetails " unter dem WinUI-Anwendungsentwicklungsknoten die gewünschte UWP-Option aus (dadurch werden auch weitere erforderliche Komponenten ausgewählt.):

    • Wählen Sie für C# die Tools für die universelle Windows-Plattform aus.
    • Wählen Sie für C ++ die Tools für die universelle Windows-Plattform (v14x) aus (wählen Sie die neueste Version aus, es sei denn, Sie haben einen bestimmten Grund, eine frühere Version zu verwenden).

Hinweis

In Visual Studio 17.10 - 17.12 wird diese Workload als Windows-Anwendungsentwicklung bezeichnet.

Herunterladen und Installieren von WinUI

  1. Öffnen Sie ein vorhandenes Projekt, oder erstellen Sie ein neues Projekt mit der Vorlage "Leere App" unter Visual C# > Windows > Universal oder der entsprechenden Vorlage für Ihre Sprachprojektion.

    Von Bedeutung

    Um WinUI 2.8 zu verwenden, müssen Sie TargetPlatformVersion >= 10.0.18362.0 und TargetPlatformMinVersion >= 10.0.17763.0 in den Projekteigenschaften festlegen.

  2. Klicken Sie im Bereich Projektmappen-Explorer mit der rechten Maustaste auf den Projektnamen, und wählen Sie "NuGet-Pakete verwalten" aus.

    Screenshot: Projektmappen-Explorer-Bereich mit dem Projekt, auf das mit der rechten Maustaste geklickt wurde, und der hervorgehobenen Option „NuGet-Pakete verwalten“
    Projektmappen-Explorer-Bereich mit dem Projekt, auf das mit der rechten Maustaste geklickt wurde, und der hervorgehobenen Option „NuGet-Pakete verwalten“.

  3. Wählen Sie im NuGet-Paket-Manager die Registerkarte " Durchsuchen " aus, und suchen Sie nach "Microsoft.UI.Xaml " oder "WinUI". Wählen Sie aus, welche WinUI NuGet-Pakete Sie verwenden möchten (das Microsoft.UI.Xaml-Paket enthält Fluent-Steuerelemente und -Features, die für alle Apps geeignet sind). Klicken Sie auf "Installieren".

    Aktivieren Sie das Kontrollkästchen "Vorabversion einschließen", um die neuesten Vorabversionen anzuzeigen, die experimentelle neue Features enthalten.

    Screenshot: Dialogfeld „NuGet-Paket-Manager“ mit der Registerkarte „Durchsuchen“, „winui“ im Suchfeld und aktivierter Option „Vorabversion einschließen“
    Dialogfeld „NuGet-Paket-Manager“ mit der Registerkarte „Durchsuchen“, „winui“ im Suchfeld und aktivierter Option „Vorabversion einschließen“.

  4. Fügen Sie der Datei "App.xaml" die WinUI-Designressourcen hinzu.

    Hierfür gibt es zwei Möglichkeiten, je nachdem, ob Sie über zusätzliche Anwendungsressourcen verfügen.

    a) Wenn Sie keine anderen Anwendungsressourcen benötigen, fügen Sie das WinUI-Ressourcenelement XamlControlsResources hinzu, wie im folgenden Beispiel gezeigt:

    <Application
    x:Class="ExampleApp.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    RequestedTheme="Light">

    <Application.Resources>
        <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
    </Application.Resources>

</Application>

    b. Wenn Sie über andere Ressourcen verfügen, empfehlen wir Ihnen, diese hinzuzufügen XamlControlsResources.MergedDictionaries. Dies funktioniert mit dem Ressourcensystem der Plattform, um Außerkraftsetzungen der XamlControlsResources-Ressourcen zu ermöglichen.

    <Application
    x:Class="ExampleApp.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:Microsoft.UI.Xaml.Controls"
    RequestedTheme="Light">

    <Application.Resources>
        <controls:XamlControlsResources>
            <controls:XamlControlsResources.MergedDictionaries>
                <ResourceDictionary Source="/Styles/Styles.xaml"/>
                <!-- Other app resources here -->
            </controls:XamlControlsResources.MergedDictionaries>
        </controls:XamlControlsResources>
    </Application.Resources>

</Application>

  5. Fügen Sie sowohl den XAML-Seiten als auch den Code-Behind-Seiten einen Verweis auf das WinUI-Paket hinzu.

    • Fügen Sie auf Ihrer XAML-Seite oben auf der Seite einen Verweis hinzu.

      xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

    • In Ihrem Code (wenn Sie die Typnamen verwenden möchten, ohne sie zu qualifizieren), können Sie eine using-Anweisung hinzufügen.

      using MUXC = Microsoft.UI.Xaml.Controls;

Weitere Schritte für ein C++/WinRT-Projekt

Wenn Sie einem C++/WinRT-Projekt ein NuGet-Paket hinzufügen, generiert das Tool eine Reihe von Projektionsheadern im Ordner Ihres Projekts \Generated Files\winrt . Um diese Headerdateien in Ihr Projekt zu integrieren, damit Verweise auf diese neuen Typen aufgelöst werden, können Sie in die vorkompilierte Headerdatei (in der Regel pch.h) wechseln und diese einschließen. Nachfolgend finden Sie ein Beispiel, das die generierten Headerdateien für das Microsoft.UI.Xaml-Paket enthält.

// pch.h
...
#include <winrt/Microsoft.UI.Xaml.Automation.Peers.h>
#include <winrt/Microsoft.UI.Xaml.Controls.Primitives.h>
#include <winrt/Microsoft.UI.Xaml.Media.h>
#include <winrt/Microsoft.UI.Xaml.XamlTypeInfo.h>
...

Eine vollständige schrittweise Vorgehensweise zum Hinzufügen einer einfachen Unterstützung für WinUI zu einem C++/WinRT-Projekt finden Sie unter einem einfachen C++/WinRT-WinUI-Beispiel.

WinUI auf GitHub

Wir freuen uns über Fehlerberichte im Repository "microsoft-ui-xaml " auf GitHub.