Getting started with the Windows UI 2.x Library

WinUI 2.5 is the latest stable version of WinUI and should be used for apps in production.

The library is available as a NuGet package that can be added to any new or existing Visual Studio project.

Note

For more information on trying out early previews of WinUI 3, see Windows UI Library 3 Preview 4 (February 2021).

Download and install the Windows UI Library

  1. Download Visual Studio 2019 and ensure you choose the Universal Windows Platform development Workload in the Visual Studio installer.

  2. Open an existing project, or create a new project using the Blank App template under Visual C# -> Windows -> Universal, or the appropriate template for your language projection.

    Important

    To use WinUI 2.5, you must set TargetPlatformVersion >= 10.0.18362.0 and TargetPlatformMinVersion >= 10.0.15063.0 in the project properties.

  3. In the Solution Explorer panel, right click on your project name and select Manage NuGet Packages.

    Screenshot of the Solution Explorer panel with the project right-clicked and the Manage NuGet Packages option highlighted.
    The Solution Explorer panel with the project right-clicked and the Manage NuGet Packages option highlighted.

  4. In the NuGet Package Manager, select the Browse tab and search for Microsoft.UI.Xaml or WinUI. Select which Windows UI Library NuGet Packages you want to use (the Microsoft.UI.Xaml package contains Fluent controls and features suitable for all apps). Click Install.

    Check the "Include prerelease" checkbox to see the latest prerelease versions that include experimental new features.

    Screenshot of the NuGet Package Manager dialog box showing the Browse tab with winui in the search field and Include prerelease checked.
    The NuGet Package Manager dialog box showing the Browse tab with winui in the search field and Include prerelease checked.

  5. Add the Windows UI (WinUI) Theme Resources to your App.xaml file.

    There are two ways to do this, depending on whether you have additional application resources.

    a. If you don't need other application resources, add the WinUI resources element <XamlControlsResources as shown in the following example:

    <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. If you need more than one application resource, add the WinUI resources element <XamlControlsResources in a <ResourceDictionary.MergedDictionaries> as shown here:

    <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>
            <ResourceDictionary>
                <ResourceDictionary.MergedDictionaries>
                    <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
                    <ResourceDictionary Source="/Styles/Styles.xaml"/>
                </ResourceDictionary.MergedDictionaries>
            </ResourceDictionary>
        </Application.Resources>
    
    </Application>
    

    Important

    The order of resources added to a ResourceDictionary affects the order in which they are applied. The XamlControlsResources dictionary overrides many default resource keys and should therefore be added to Application.Resources first so that it doesn't override any other custom styles or resources in your app. For more information on resource loading, see ResourceDictionary and XAML resource references.

  6. Add a reference to the WinUI package to both XAML pages and/or code-behind pages.

    • In your XAML page, add a reference at the top of your page

      xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
      
    • In your code (if you want to use the type names without qualifying them), you can add a using directive.

      using MUXC = Microsoft.UI.Xaml.Controls;
      

Additional steps for a C++/WinRT project

When you add a NuGet package to a C++/WinRT project, the tooling generates a set of projection headers in your project's \Generated Files\winrt folder. To bring those headers files into your project, so that references to those new types resolve, you can go into your precompiled header file (typically pch.h) and include them. Below is an example that includes the generated header files for the Microsoft.UI.Xaml package.

// 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"
...

For a full, step-by-step walkthrough of adding simple support for the Windows UI Library to a C++/WinRT project, see A simple C++/WinRT Windows UI Library example.

Contributing to the Windows UI Library

WinUI is an open source project hosted on GitHub.

We welcome bug reports, feature requests and community code contributions in the Windows UI Library repo.

Other resources

If you're new to UWP, then we recommend that you visit the Getting Started with UWP Development pages on the Developer portal.