Windows UI Library 2.6

WinUI 2.6 is the June 2021 release of the Windows UI Library (WinUI) for UWP applications (and desktop applications using XAML Islands).

Note

For more information on building Windows desktop and UWP apps with the latest version of WinUI 3, see Windows UI Library 3.

WinUI is hosted on GitHub in our Windows UI Library repo. As an open source project, you can file your WinUI 2 bug reports, feature requests, and community code contributions there.

All stable releases (and prereleases) are available for download from our GitHub release page or from our NuGet page.

WinUI packages can be added to Visual Studio projects through the NuGet package manager. For more information, see Getting started with the Windows UI 2 Library.

New or updated features for WinUI 2.6 include:

Mica

Mica is a new material that incorporates theme and desktop wallpaper to paint the background of long-lived windows such as apps and settings. You can apply Mica to your application backdrop to delight users and create visual hierarchy, aiding productivity, by increasing clarity about which window is in focus. Mica is specifically designed for app performance as it only samples the desktop wallpaper once to create its visualization.

Mica in light theme

Usage guidelines

API reference

Expander

The Expander control is composed of a header of primary content that is always visible, paired with a toggle button used to show or hide an expandable content area containing secondary content related to the header.

As the user expands or collapses the content area, adjacent UI elements are shifted and adjusted to accommodate the content area. The content area of the expander does not overlay those elements.

This animated example shows an Expander in the default state with just basic text in the content area.

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

You can use complex, interactive UI in the content area of the Expander, including nested Expander controls as shown here.

Expander with complex, interactive UI in the content area.

Usage guidelines

API reference

A BreadcrumbBar is a hierarchical navigation element that provides a direct path of links to pages or folders leading to the user's current location. It is often used near the top of a page in situations where the user's navigation trail (in a file system or menu system) needs to be persistently visible and provide the user with the ability to quickly go back to a previous location.

This animated example shows a BreadcrumbBar in the default state with eight levels of navigation depth.

BreadcrumbBar in default state with eight levels of navigation depth.

If the app is resized so that there is not enough space to show all levels in the BreadcrumbBar, the control automatically collapses, substituting an ellipsis for the leftmost nodes. Clicking the ellipsis opens a flyout menu that displays the collapsed nodes in hierarchical order, as shown here.

BreadcrumbBar condensed with flyout menu.

Usage guidelines

API reference

ImageIcon

ImageIcon adds support for using an Image control as an icon in your application UI.

The following image file formats are supported:

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

API reference

AnimatedIcon

An AnimatedIcon control plays animated images in response to user interaction and visual state changes, such as when a user hovers over a button or clicks it.

This animated example shows an AnimatedIcon added to a NavigationViewItem control.

AnimatedIcon added to a NavigationViewItem control.

Defining an animation requires that you create, or obtain, a Lottie file for the icon you want to add (custom animations can be created with Adobe AfterEffects and rendered with the Lottie-Windows library) and run that file through LottieGen. LottieGen generates code for a C++/WinRT class that you can then instantiate and use with an AnimatedIcon.

Usage guidelines

API reference

PipsPager

The PipsPager control helps users navigate within linearly paginated content using a configurable collection of glyphs, each of which represents a single "page" within a potentially limitless range. The glyphs highlight the current page, and indicate the availability of both preceding and succeeding pages. The control relies on current context and does not support explicit page numbering or a non-linear organization.

This example shows a PipsPager in the default state with five visible pips, oriented horizontally, with the first pip selected.

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

If the content consists of a large number of pages, you can set the number of visible, interactive pips. If the number of pages exceeds the number of visible pips, the pips automatically scroll in order to center the selected page in the control.

This animated example shows a PipsPager with horizontally scrolling pips for a large item collection.

PipsPager with horizontally scrolling pips for a large item collection.

Usage guidelines

API reference

Visual style updates

Most WinUI controls now support the latest Windows 11 styles.

A new versioning system has also been introduced that lets you revert to the previous control styles. However, we strongly encourage using the new styles, if possible, as they align with the current design direction of Windows.

XAML styles

SplitButton styles for CommandBar

A new SplitButtonCommandBarStyle provides the ability to apply the look and feel of an AppBarButton to a SplitButton control. This style is automatically applied to a SplitButton when it's placed inside of an AppBarElementContainer class (allows an element that doesn't implement ICommandBarElement to be displayed in a command bar), and then placed inside of a CommandBar control.

Samples

The XAML Controls Gallery sample app includes examples of each of these WinUI features and controls.

If you have the XAML Controls Gallery app installed and updated to the latest version, see the controls in action.

If you don't have the XAML Controls Gallery app installed, get it from the Microsoft Store.

You can also view, clone, and build the XAML Controls Gallery source code from GitHub.

Other updates