Modernizing Win32 Apps with WinUI – Advanced Installer’s Approach

Why WinUI Matters for Modern Windows Applications

Software development is a dynamic and ever-changing field. Staying up-to-date with the latest frameworks and tools is essential – not just keep up, but to build modern, efficient and user-friendly applications.

That’s one reason we’ve started adopting WinUI in Advanced Installer.

We’ve integrated the WinUI framework into our development workflow, helping us improve user experience and visual appeal. Moreover, it enables us future-proof our application by aligning with Microsoft’s direction for Windows development.

What is WinRT?

Before exploring WinUI further, it is worth revisiting the foundation it relies on: WinRT.

WinRT, or Windows Runtime, is an architecture introduced by Microsoft in 2012 with Windows 8, and it provides a consistent way for applications to interact with the operating system.

Unlike older technologies, like Win16, Win32, or Win64 – which rely on C library functions, WinRT uses Microsoft's Component Object Model (COM) system under the hood.

COM enables platform-independent interaction between software components.

Think of COM objects as a set of functions which are called interfaces. These objects expose the OS functionalities (file system operations, shell integration, networking, and more) in an object-oriented way.

Because WinRT is built on COM, any language that supports COM can use WinRT APIs, which makes it highly versatile.

WinUI, a Modern UX Framework

Now, let’s get back to WinUI.

WinUI is a framework that provides modern controls and styles for Windows applications, enabling developers to create stunning interfaces. It relies on the APIs defined by WinRT to manage UI components.

Originally introduced as part of the Universal Windows Platform (UWP), WinUI provided a hierarchy of classes to define UI elements.

However, there was a catch: every time a new version of the operating system came out, UWP would get new features and controls, meaning the apps using them would only run on the latest OS versions.

That’s where WinUI 2.x came in.

WinUI 2.x uses APIs to add new functionalities to existing controls or to create new ones. Its advantage is that it can run on older operating systems. We can say that it is decoupled from the operating system in a certain manner, but it still has a minimum OS requirement.

Then came WinUI 3.x, which fully decouples the UI stack from the OS and places it into redistributable DLLs. This allows apps to use modern interfaces without relying on the latest OS version. Updates to UI components can now ship independently from OS updates, a major win for developers.

Building UIs with a Declarative Language – XAML

At the core of WinUI is XAML (Extensible Application Markup Language) – a declarative language for designing app user interfaces.

XAML was introduced with WPF (Windows Presentation Foundation) in 2006, and since then, it has become the go-to tool for building modern user interfaces on Windows.

You are probably asking how XAML works?

• A XAML file defines a hierarchy of UI elements.
• Each element corresponds to a COM object.
• An object has properties that define its characteristics.
• In XAML, these properties are represented as the attributes of the UI elements.

To set an object’s properties, you have to assign values through strings to the corresponding attributes of the UI elements in the XAML.

Another way to assign values to attributes in XAML is through the markup extensions. You can reference the properties of other objects dynamically, at runtime.

XAML also supports attached properties, which let you assign extra data to an object, even if the element doesn’t have a ‘built-in’ property for it. This is useful for layout scenarios and interaction logic between parent and child elements.

XAML makes it easy to separate UI design from application logic. Designers can focus on the look and feel, while developers focus on implementing the application logic, so both can work more independently without stepping on each other’s toes.

What It Really Took to Integrate WinUI into a Win32 Application (Advanced Installer)

Here’s where things got interesting for us at Advanced Installer.

Our application is a Win32 desktop application, so integrating modern WinUI components wasn’t straightforward.

The solution? XAML Islands – a Microsoft-supported feature that allows you to host WinRT UI controls into non-UWP desktop apps.

There’s one limitation, though: XAML Islands are only supported starting with Windows 10, version 1903.

As for WinUI 3, unfortunately it does not currently support XAML Islands, although Microsoft has plans to make WinUI3 compatible with XAML Islands in the future.

How to Create an Application That Uses WinUI 3?

XAML offers many controls for defining interfaces.

The best way to explore and understand WinUI’s potential is through hands-on experience.

Let’s create a demo application that uses WinUI 3.

Install Visual Studio components

First thing first, to create a WinUI project in Visual Studio, you need to install some components using the Visual Studio installer.

If you are a C++ developer, you need to select Desktop development C++ and check Windows App SDK C++ Templates in the installation pane.

For C# developers, select .NET desktop development and then check the Windows App SDK C# Templates. Once this step is done, you are ready to dive into WinUI development.

Now, let’s create a project:

1. In Visual Studio navigate to Files → New → Project
2. Choose Blank App, Packaged (WinUI 3 Desktop) from the list of templates.
3. Set a name from your project and click Create.

How to Add the UI Elements?

Now that we created the application, it’s time to explore the customization options that WinUI offers.

Here’s a sneak peek of how the UI we are aiming to build.

Don’t worry if we skip over some parts, we’ll share the link with the sample at the end.

Now, let’s break this down step by step.

<Pivot Title="WinUI Demo">
    <PivotItem Header="Pick your colors">
    </PivotItem>

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="0.2*"/>
        <RowDefinition Height="0.8*"/>
    </Grid.RowDefinitions>
</Grid>

<Rectangle Grid.Row="0" Grid.ColumnSpan="3" Margin="10" Height="100">
    <Rectangle.Fill>
        <LinearGradientBrush>
            <GradientStop Offset="0" Color="{Binding ElementName=colorPicker1,     
                    Path=Color}"/>
            <GradientStop Offset="0.5" Color="{Binding ElementName=colorPicker2,  
                    Path=Color}"/>
            <GradientStop Offset="1" Color="{Binding ElementName=colorPicker3,  
                    Path=Color}"/>
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

<ColorPicker
        x:Name="colorPicker1"
        Grid.Row="1"
        Grid.Column="0"
        Color="Red"/>

Step 5: Add a Slider and a TextBox with Two-Way Binding

Let’s create another tab and introduce a slider and a text box that sync their values via two-way data binding.

We want both the slider and the text box to be horizontally and vertically aligned.

This means that when moving the slider, the value in the text box changes, and when writing a value in the text box, the slider will change.

<Slider 
     x:Name="slider" 
     Grid.Row="1" 
     Grid.Column="1"
     Value="1"
     Minimum="0.25"
     Maximum="4"
     Grid.ColumnSpan="2"
     />
 <TextBox 
     x:Name="SliderValue" 
     Grid.Row="2" 
     Grid.Column="1"
     Grid.ColumnSpan="2"
     Width="250"
     Height="30"
     Text="{Binding ElementName=slider, Path=Value, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
     VerticalAlignment="Center"
     TextAlignment="Center"
     >
 </TextBox>

Copy

Final Thoughts

The shift from Win32 to WinRT and WinUI marks a major step in Windows UI development.

With WinUI, developers get access to modern controls, create highly interactive user interfaces, and leverage the latest design trends.

We’ve only scratched the surface of what’s possible.

Whether you're modernizing an existing app or starting fresh, WinUI is a powerful toolkit that can help elevate your application’s user experience.

Stay tuned – we’ll be publishing more hands-on tutorials to help you build great UIs with WinUI for your applications.

Check out our Advanced Installer Tech Talks — a series where our engineers break down the real challenges and solutions behind modern application packaging and deployment.

• PowerShell for Windows Developers: Takeaways from Advanced Installer’s Tech Session | Part 1
  
• PowerShell for Windows Developers: Takeaways from Advanced Installer’s Tech Session | Part 2