Home > Universal Windows Platform > Introducing the Windows UI Library

Introducing the Windows UI Library

As we can read at https://docs.microsoft.com/en-us/uwp/toolkits/winui:

The Windows UI Library is a set of NuGet packages that provide controls and other user interface elements for UWP apps. It also enables down-level compatibility with earlier versions of Windows 10, so your app works even if users don’t have the latest OS.

Thanks to it, we can use UWP XAML controls, that usually are shipped and updated as part of the Windows SDK, even on older versions of Windows 10 down to the Anniversary Update (1607). In addition, the library contains also updated versions of existing controls, so we won’t have to include version checks or conditional XAML markup to use these controls or features on earlier versions of Windows.

At this moment, the library is available as a Prerelease package. Let’s see how to start using it in our apps.

Let’s create a new UWP app using the Blank app template and be sure to select Build 1803 (17134) as Target version and at least Anniversary Update (14393) as Min version. Right click on the project, select Manage NuGet Packages and search for Microsoft.UI.Xaml (the Include Prerelease checkbox must be active):

Adding Windows UI Library from NuGet

Adding Windows UI Library from NuGet

After the installation, a TXT files will be automatically opened in Visual Studio telling us to add WinUI Theme Resources to our app. We simply need to add the following code in the App.xaml:

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

Let’s say that we want to use the new MenuBar control, that isn’t part of Windows SDK v17134 and we can’t install the Insider Preview SDK. First of all, we need to add the XAML namespace in the page declaration:

<Page
    x:Class="WinUILibraryDemo.MainPage"
    ...
    xmlns:controls="using:Microsoft.UI.Xaml.Controls"
    ...>

Then, simply define the menu in XAML:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <controls:MenuBar Grid.Row="0">
        <controls:MenuBarItem Title="File" AccessKey="F">
            <MenuFlyoutItem Click="FileNew_Click" Text="New" />
            <MenuFlyoutItem Text="Open..." />
            <MenuFlyoutItem Icon="Save" Text="Save" />
            <MenuFlyoutSeparator />
            <MenuFlyoutItem Text="Exit" />
        </controls:MenuBarItem>

        <controls:MenuBarItem Title="Edit" AccessKey="E">
            <MenuFlyoutItem Text="Undo" />
            <MenuFlyoutSeparator />
            <MenuFlyoutItem Icon="Cut" Text="Cut" />
            <MenuFlyoutItem Icon="Copy" Text="Copy" />
            <MenuFlyoutItem Icon="Paste" Text="Paste" />
        </controls:MenuBarItem>

        <controls:MenuBarItem Title="Help" AccessKey="H">
            <MenuFlyoutItem Icon="Help" Text="About..." />
        </controls:MenuBarItem>
    </controls:MenuBar>
</Grid>

At lines 7-27 we are creating a MenuBar with tree MenuBarItem. Note that menu commands are standard MenuFlyoutItem objects:

Windows UI Library Menu control

Windows UI Library Menu control

Another new interesting control is the DropDownButton, that is available starting from the Windows 10 SDK Preview Build 17686. Thanks to the Windows UI Library, we can use it right now in Windows 10 Anniversary Update and later:

<controls:DropDownButton Grid.Row="1" HorizontalAlignment="Center">
    <controls:DropDownButton.Content>
        <SymbolIcon Symbol="Mail" />
    </controls:DropDownButton.Content>
    <controls:DropDownButton.Flyout>
        <MenuFlyout Placement="Bottom">
            <MenuFlyoutItem Icon="Send" Text="Send" />
            <MenuFlyoutItem Icon="MailReply" Text="Reply" />
            <MenuFlyoutItem Icon="MailReplyAll" Text="Reply All" />
        </MenuFlyout>
    </controls:DropDownButton.Flyout>
</controls:DropDownButton>

With this XAML, we obtain the following UI, with the Flyout appearing when we tap on the button (as we expect):

Windows UI Library DropDownButton control

Windows UI Library DropDownButton control

These are only two examples of what the Windows UI Library allows to do. Keep in mind that is an early prerelease, so we can expect new controls, new properties on existing controls and new features as the project evolves.

Advertisements
  1. No comments yet.
  1. 26/07/2018 at 12:20

Leave a comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: