Freigeben über

Erste Schritte mit WinUI 2

  • Artikel

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

Die Bibliothek ist als NuGet-Paket verfügbar, die zu 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.

Herunterladen und Installieren von WinUI

  1. Lade Visual Studio 2022 herunter, und achte darauf, im Visual Studio-Installationsprogramm die Workload Entwicklung für die Universelle Windows-Plattform auszuwählen.

  2. Öffne ein vorhandenes-Projekt, oder erstelle unter „Visual C#“ -> „Windows“ -> „Universell“ ein neues Projekt mit der Vorlage „Leere App“ oder der entsprechenden Vorlage für deine Sprachprojektion.

    Wichtig

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

  3. Klicke im Bereich des Projektmappen-Explorers mit der rechten Maustaste auf den Namen deines Projekts, und wähle NuGet-Pakete verwalten aus.

    Screenshot des Projektmappen-Explorer-Bereichs 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“.

  4. 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 einbeziehen“, um die neuesten Vorabversionen anzuzeigen, die experimentelle neue Features enthalten.

    Screenshot des Dialogfelds „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“.

  5. Fügen Sie die WinUI-Designressourcen zu Ihrer Datei „App.xaml“ hinzu.

    Dafür gibt es zwei Möglichkeiten, abhängig davon, ob du zusätzliche Anwendungsressourcen verwendest.

    ein. 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, empfiehlt es sich, diese zu XamlControlsResources.MergedDictionarieshinzuzufügen. Dies funktioniert mit dem Ressourcensystem der Plattform, um Außerkraftsetzungen der XamlControlsResources-Ressourcen zuzulassen.

    <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>

  6. Fügen Sie einen Verweis auf das WinUI-Paket zu XAML-Seiten und/oder Code-Behind-Seiten hinzu.

    • Füge oben auf deiner XAML-Seite einen Verweis hinzu

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

    • In deinem Code kannst du eine using-Direktive hinzufügen (falls du die Typnamen verwenden möchtest, ohne sie zu qualifizieren).

      using MUXC = Microsoft.UI.Xaml.Controls;

Zusätzliche Schritte für C++/WinRT-Projekte

Wenn du einem C++/WinRT-Projekt ein NuGet-Paket hinzufügen möchtest, generieren die Tools einen Satz von Projektionsheadern im Ordner \Generated Files\winrt des Projekts. Wenn du diese Headerdateien in das Projekt einbinden möchtest, damit Verweise auf diese neuen Typen aufgelöst werden, kannst du zu deiner vorkompilierten Headerdatei wechseln (normalerweise pch.h) und sie einschließen. Unten findest du ein Beispiel, in dem die generierten Headerdateien für das Microsoft.UI.Xaml-Paket einbezogen werden.

// 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 exemplarische Vorgehensweise zum Hinzufügen einer einfachen Unterstützung für WinUI zu einem C++/WinRT-Projekt finden Sie unter Ein einfaches C++/WinRT-WinUI-Beispiel.

Beitragen zu WinUI

Wir freuen uns über Fehlerberichte, Featureanforderungen und Communitycodebeiträge im microsoft-ui-xaml-Repository auf GitHub.

Weitere Ressourcen

Wenn du noch nicht mit UWP vertraut bist, empfehlen wir dir, die Seiten Erste Schritte bei der UWP-Entwicklung im Seiten im Entwicklerportal zu besuchen.