Developed a Slack-off App with WinUI 3

1. Developed a Loafing App

I made a simple app: Loaf.

As shown above, this app has only one button. Click it, and it pretends to start Windows Update, allowing users to blatantly slack off.

Don't underestimate loafing. All genius ideas aren't sparked while typing at a keyboard. When you hit a roadblock at work, the more you focus, the less you find a solution. At that moment, look away from the screen—maybe while showering playing with a rubber duck, staring blankly out the window, or scratching your belly during sleep—and suddenly the inspiration for a solution drops into your mind.

So, shamelessly, I published this app under the Productive Work category, and Microsoft approved it. Now you can download it here:

https://www.microsoft.com/en-us/p/loaf-a-winui3-app/9ndj3q12nrrm

Of course, as the title says, this is a WinUI 3 app.

2. What is WinUI 3

WinUI 3 is a native user experience (UX) framework that comes with the Windows App SDK for Windows desktop and UWP applications. Simply put, WinUI 3 separates the UI layer of UWP for use in Win32 Windows apps. To better understand WinUI 3, refer to the links below:

After a long wait, WinUI 3 seems to have quietly released a stable version. There was no big promotion, no integration with the newly released Visual Studio 2022, and I didn't even see a proper email, news, or blog post. Checking the documentation, it seems to have been released alongside the Windows App SDK. In short, WinUI 3 version 1.0 is now usable. After playing with it for a while, I decided I can't migrate my own apps to WinUI 3 yet, even though I've been looking forward to it for a long time. Since I couldn't touch my existing apps, and to explore WinUI 3 more deeply, I built this small "Loaf" app.

3. Development Process

Let's talk about the development process. Overall, it was fun but also challenging.

First, to develop a WinUI 3 C# app using Visual Studio 2022, you need to download the Visual Studio 2022 extension: WindowsAppSDK.Cs.Extension.Dev17.Standalone.vsix. After installing the extension, you can create a WinUI 3 project.

For C++ or Visual Studio 2019 extensions, you can find the respective download links in the following document:

Stable channel release notes for the Windows App SDK - Windows apps

After creating the project, you'll notice that WinUI 3 has no design view (and probably never will). So it's best to also create a UWP project, design the XAML there, and then copy it to the WinUI 3 project.

During migration, you need to replace most Windows.* namespaces with Microsoft.*. However, Win2D still uses Windows.* namespaces, which makes things a bit confusing.

Then you need to reference various packages. The most commonly used UWP packages from Microsoft generally have corresponding WinUI versions, for example:

Microsoft.Toolkit.Uwp.UI replaced by CommunityToolkit.WinUI.UI
Win2D.uwp replaced by Microsoft.Graphics.Win2D

Most UWP development experience applies to WinUI 3. The biggest issue I encountered with the small "Loaf" app was window management. It seems the WinUI 3 Window API hasn't been fully figured out yet; even changing the title is cumbersome and requires several lines of code:

namespace SampleApp
{
    /// <summary>
    /// An empty window that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainWindow : Window
    {
        private AppWindow m_appWindow;

        public MainWindow()
        {
            this.InitializeComponent();
            // Get the AppWindow for our XAML Window
            m_appWindow = GetAppWindowForCurrentWindow();
            if (m_appWindow != null)
            {
                // You now have an AppWindow object and can call its methods to manipulate the window.
                // Just to do something here, let's change the title of the window...
                m_appWindow.Title = "WinUI ❤️ AppWindow";
            }
        }

        private AppWindow GetAppWindowForCurrentWindow()
        {
            IntPtr hWnd = WinRT.Interop.WindowNative.GetWindowHandle(window);
            WindowId myWndId = Microsoft.UI.Win32Interop.GetWindowIdFromWindow(hWnd);
            return AppWindow.GetFromWindowId(myWndId);
        }
   }
}

The code for entering fullscreen also differs from UWP:

/// Enter fullscreen
m_appWindow.SetPresenter(AppWindowPresenterKind.FullScreen);
/// Exit fullscreen
m_appWindow.SetPresenter(AppWindowPresenterKind.Default);

Moreover, fullscreen behavior is different from UWP: you can't press Esc to exit fullscreen, and there's no hidden title bar at the top of the screen. So you need to handle a global Esc key event and call the exit code yourself (I don't know how to exit fullscreen on a tablet).

Another point: WinUI 3 and UWP have some style differences. For example, the ProgressRing style is not the same as the rotating dots style from Windows 8. Fortunately, you can copy the UWP Style and make a few adjustments.

Although there were many issues during development, it was fairly smooth for this small app. Interestingly, when WinUI 3 didn't provide the desired API, you could directly call Win32 APIs to achieve the functionality. Even more "interesting": some of these Win32 APIs worked, and some didn't.

After completing all the code, the final step was publishing to the Store. Fortunately, the publishing process was basically the same as for UWP, and now the app is available on the Store.

4. Issues Encountered

No design view is a serious problem. I can accept it, at least there's hot reload, but it's not beginner-friendly.

Confusing documentation: almost all UWP and Windows App SDK documentation has been merged, which is a real pain—literally a pain. For example, WinUI 3 documentation has navigation pointing to Mica, even though WinUI 3 doesn't support Mica. On the https://docs.microsoft.com/en-us/windows/apps/ page, you can't even find an entry point for UWP anymore. In short, both UWP and Windows App SDK documentation are a mess.

Useless demos: giving me UWP demos is one thing, but throwing Windows 8 demos at me is going too far.

The name "Windows App SDK" itself is problematic. Any search engine returns a ton of Windows-related results that aren't about the Windows App SDK.

Missing Background acrylic and RevealBorderBrush, and Win2D lacks CanvasAnimatedControl. These missing pieces increase the difficulty of migrating from UWP to WinUI 3.

From development to publishing, I encountered various indescribable bugs and minor issues.

5. Final Thoughts

I remember that getting started with WinForms, WPF, and Silverlight was quite easy. Since then, Microsoft's UI frameworks have become increasingly difficult, and WinUI 3 is the hardest yet. Compared to UWP, WinUI 3 should have huge advantages, but for now, I recommend waiting for newer versions. It's fine for playing with small apps, but be cautious for production environments.

On the other hand, WinUI 2 seems to be getting more interesting. Maybe we can play with WinUI 2 while waiting for a new version of WinUI 3.

6. Source Code

https://github.com/DinoChan/Loaf

Author: Dino.C

Source: https://www.cnblogs.com/dino623/p/developing_an_app_with_winui3.html

License: This article is licensed under the "CC BY 4.0" Creative Commons license.

Developed a Slack-off App with WinUI 3

1. Developed a Loafing App

2. What is WinUI 3

3. Development Process

4. Issues Encountered

5. Final Thoughts

6. Source Code

Related Reading

.NET Support Status Across OS Versions (Updated 250707)

.NET Cross-Platform Native Library Integration in Practice

AI Reconstruct Razor Pages Website Completed

Summary of AOT Usage Experience