Windows-UI-Bibliothek 2.6

WinUI 2.6 ist das Juni 2021-Release der Windows-UI-Bibliothek (WinUI) für UWP-Anwendungen (und Desktopanwendungen, die XAML Islands verwenden).

Hinweis

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

Die Windows-UI-Bibliothek (WinUI) wird auf GitHub gehostet, wo wir uns über Fehlerberichte, Featureanforderungen und Communitycodebeiträge freuen.

Alle stabilen Releases (und Vorabversionen) stehen auf unserer GitHub-Releaseseite oder auf unserer NuGet-Seite zum Download zur Verfügung.

WinUI-Pakete können mithilfe des NuGet-Paket-Managers zu Visual Studio-Projekten hinzugefügt werden. Weitere Informationen finden Sie unter Erste Schritte mit der Windows-UI 2-Bibliothek.

Zu den neuen oder aktualisierten Features für WinUI 2.6 gehören:

Mica

Mica ist ein neues Material für Designs und Desktophintergrundbilder, mit dem Sie den Hintergrund langlebiger Fenster wie Apps und Einstellungen gestalten können. Sie können Mica auf Ihren Anwendungshintergrund anwenden, um Benutzer zu erfreuen und eine visuelle Hierarchie zu erstellen und damit zur Steigerung der Produktivität beizutragen, indem Sie die Übersichtlichkeit des Fensters erhöhen, das im Fokus steht. Mica wurde speziell im Hinblick auf die Leistung von Apps entwickelt, da es den Desktophintergrund nur einmal zur Visualisierung erfasst.

Mica in light theme

Nutzungsrichtlinien

API-Referenz

Expander

Das Expander-Steuerelement besteht aus einem Header mit primärem Inhalt, der immer sichtbar ist, gekoppelt mit einer Umschaltfläche, mit der ein erweiterbarer Inhaltsbereich mit sekundärem Inhalt im Zusammenhang mit dem Header angezeigt oder ausgeblendet wird.

Wenn der Benutzer den Inhaltsbereich erweitert oder reduziert, werden angrenzende Benutzeroberflächenelemente verschoben und an den Inhaltsbereich angepasst. Der Inhaltsbereich der Erweiterung überlagert diese Elemente nicht.

Dieses animierte Beispiel zeigt ein Expander-Steuerelement im Standardzustand mit einfachem Text im Inhaltsbereich.

Expander in the default state with basic text in the content area.

Sie können eine komplexe interaktive Benutzeroberfläche im Inhaltsbereich der Erweiterung verwenden, einschließlich geschachtelter Expander-Steuerelemente, wie hier gezeigt.

Expander with complex, interactive UI in the content area.

Nutzungsrichtlinien

API-Referenz

Ein BreadcrumbBar-Steuerelement ist ein hierarchisches Navigationselement, das einen direkten Pfad von Links zu Seiten oder Ordnern bereitstellt, die zur aktuellen Position des Benutzers führen. Es wird oft in der Nähe des oberen Seitenrandes verwendet, wenn der Navigationspfad des Benutzers (in einem Datei- oder Menüsystem) dauerhaft sichtbar sein und dem Benutzer die Möglichkeit bieten soll, schnell zu einer vorherigen Position zurückzukehren.

Dieses animierte Beispiel zeigt ein BreadcrumbBar-Steuerelement im Standardzustand mit acht Ebenen der Navigationstiefe.

BreadcrumbBar in default state with eight levels of navigation depth.

Wenn die Größe der App so geändert wird, dass nicht genügend Platz vorhanden ist, um alle Ebenen im BreadcrumbBar-Steuerelement anzuzeigen, wird das Steuerelement automatisch reduziert, und die Knoten links außen werden durch Auslassungspunkte ersetzt. Wenn Sie auf die Auslassungspunkte klicken, wird ein Flyoutmenü geöffnet, das die reduzierten Knoten in hierarchischer Reihenfolge anzeigt, wie hier gezeigt.

BreadcrumbBar condensed with flyout menu.

Nutzungsrichtlinien

API-Referenz

ImageIcon

Ein ImageIcon-Steuerelement fügt Unterstützung für die Verwendung eines Image-Steuerelements als Symbol in der Benutzeroberfläche Ihrer Anwendung hinzu.

Die folgende Bildformate werden unterstützt:

  • Bitmap (BMP)
  • GIF (Graphics Interchange Format)
  • JPEG (Joint Photographic Experts Group)
  • PNG (Portable Network Graphics)
  • JPEG XR (WDP)
  • TIFF (Tagged Image File Format)

API-Referenz

AnimatedIcon

Ein AnimatedIcon-Steuerelement gibt animierte Bilder als Antwort auf eine Benutzerinteraktion und Änderungen des visuellen Zustands wieder, z. B. wenn ein Benutzer die Maus über eine Schaltfläche bewegt oder darauf klickt.

Dieses animierte Beispiel zeigt ein AnimatedIcon-Steuerelement, das einem NavigationViewItem-Steuerelement hinzugefügt wurde.

AnimatedIcon added to a NavigationViewItem control.

Zum Definieren einer Animation müssen Sie eine Lottie-Datei für das hinzuzufügende Symbol erstellen oder abrufen (benutzerdefinierte Animationen können mit Adobe AfterEffects erstellt und mit der Lottie-Windows-Bibliothek gerendert werden) und diese Datei über LottieGen ausführen. LottieGen generiert Code für eine C++/WinRT-Klasse, den Sie dann instanziieren und mit einem AnimatedIcon-Steuerelement verwenden können.

Nutzungsrichtlinien

API-Referenz

PipsPager

Das PipsPager-Steuerelement unterstützt Benutzer beim Navigieren in linear paginierten Inhalten mithilfe einer konfigurierbaren Sammlung von Glyphen, von denen jedes eine einzelne „Seite“ innerhalb eines potenziell unbegrenzten Bereichs darstellt. Die Glyphen heben die aktuelle Seite hervor und geben die Verfügbarkeit von vorangehenden und nachfolgenden Seiten an. Das Steuerelement basiert auf dem aktuellen Kontext und unterstützt keine explizite Seitennummerierung oder eine nicht lineare Organisation.

Dieses Beispiel zeigt ein PipsPager-Steuerelement im Standardzustand mit fünf sichtbaren Punkten, die horizontal ausgerichtet sind, von denen der erste ausgewählt ist.

A default PipsPager with five horizontal dots, and the first selected.

Wenn der Inhalt aus einer großen Anzahl von Seiten besteht, können Sie die Anzahl der sichtbaren interaktiven Punkte festlegen. Wenn die Anzahl der Seiten die Anzahl der sichtbaren Punkte überschreitet, scrollen die Punkte automatisch, um die ausgewählte Seite im Steuerelement zu zentrieren.

Dieses animierte Beispiel zeigt ein PipsPager-Steuerelement mit horizontal scrollenden Punkten für eine große Elementsammlung.

PipsPager with horizontally scrolling pips for a large item collection.

Nutzungsrichtlinien

API-Referenz

Updates des visuellen Stils

Die meisten WinUI-Steuerelemente unterstützen jetzt die neuesten Windows 11-Stile.

Außerdem wurde ein neues Versionsverwaltungssystem eingeführt, mit dem Sie zu den vorherigen Steuerelementstilen zurückwechseln können. Es wird jedoch dringend empfohlen, nach Möglichkeit die neuen Stile zu verwenden, da sie an die aktuelle Entwurfsausrichtung von Windows angepasst sind.

XAML-Stile

SplitButton-Stile für CommandBar-Steuerelement

Ein neues SplitButtonCommandBarStyle-Element bietet die Möglichkeit, das Aussehen und Verhalten eines SplitButtonCommandBarStyle-Steuerelements auf ein SplitButton-Steuerelement anzuwenden.

Beispiele

Tipp

Weitere Informationen, Entwurfsanleitungen und Codebeispiele finden Sie unter Entwerfen und Programmieren von Windows-Apps.

Die WinUI 3-Katalog- und WinUI 2-Katalog-Apps umfassen interaktive Beispiele für die meisten WinUI 3- und WinUI 2-Steuerelemente, -Features und -Funktionen.

Wenn sie bereits installiert sind, öffnen Sie sie, indem Sie auf die folgenden Links klicken: WinUI 3-Katalog oder WinUI 2-Katalog.

Wenn sie nicht installiert sind, können Sie den WinUI 3-Katalog und den WinUI 2-Katalog aus dem Microsoft Store herunterladen.

Sie können auch den Quellcode für beide von GitHub abrufen (verwenden Sie denmain-Branch für WinUI 3 und den Branchwinui2 für WinUI 2).

Andere Updates

  • In unserer Liste Relevante Änderungen finden Sie viele der in diesem Release behobenen GitHub-Probleme.
  • Sehen Sie sich das Figma-Designtoolkit für die WinUI 2.6-Steuerelement- und -Layoutvorlagen an.