Step-by-step Guide: WinUI 3 in C++ Without XAML

[sotanakamura]

Hello everyone!

I would like to share a step by step guide to create a WinUI3 app from an empty win32 project. Some people want to create simple applications in C++ without using XAML. This step-by-step guide will be helpful for them.

Step-by-step Guide: WinUI 3 in C++ Without XAML
https://github.com/sotanakamura/winui3-without-xaml

#include <Windows.h>
#undef GetCurrentTime
#include <winrt/Windows.Foundation.Collections.h>
#include <winrt/Windows.UI.Xaml.Interop.h>
#include <winrt/Microsoft.UI.Xaml.Controls.h>
#include <winrt/Microsoft.UI.Xaml.Controls.Primitives.h>
#include <winrt/Microsoft.UI.Xaml.XamlTypeInfo.h>
#include <winrt/Microsoft.UI.Xaml.Markup.h>

using namespace winrt;
using namespace Microsoft::UI::Xaml;
using namespace Microsoft::UI::Xaml::Controls;
using namespace Microsoft::UI::Xaml::XamlTypeInfo;
using namespace Microsoft::UI::Xaml::Markup;
using namespace Windows::UI::Xaml::Interop;

class App : public ApplicationT<App, IXamlMetadataProvider>
{
public:
	void OnLaunched(LaunchActivatedEventArgs const&)
	{
		Resources().MergedDictionaries().Append(XamlControlsResources());

		window = Window();

		StackPanel stackPanel;
		stackPanel.HorizontalAlignment(HorizontalAlignment::Center);
		stackPanel.VerticalAlignment(VerticalAlignment::Center);

		Button button;
		button.Content(box_value(L"WinUI 3 Without XAML!"));

		window.Content(stackPanel);
		stackPanel.Children().Append(button);

		window.Activate();
	}
	IXamlType GetXamlType(TypeName const& type)
	{
		return provider.GetXamlType(type);
	}
	IXamlType GetXamlType(hstring const& fullname)
	{
		return provider.GetXamlType(fullname);
	}
	com_array<XmlnsDefinition> GetXmlnsDefinitions()
	{
		return provider.GetXmlnsDefinitions();
	}
private:
	Window window{ nullptr };
	XamlControlsXamlMetaDataProvider provider;
};

int WINAPI wWinMain(HINSTANCE, HINSTANCE, LPWSTR, int)
{
	init_apartment(apartment_type::single_threaded);
	Application::Start([](auto&&) {make<App>(); });
	return 0;
}

[driver1998]

Thanks for pointing out the OnLaunched event! I tried adding resources in the constructor of App class and that throws an exception.

[sotanakamura]

Did you pass the IXamlMetadataProvideras template parameter?

class App : public ApplicationT<App, IXamlMetadataProvider>

If you still have the problem, please share you code.

[driver1998]

I tested in C# that time, when I add

Resources.MergedDictionaries.Add(new XamlControlsResources());

in the constructor or InitializeComponent, it throws an COMException with 0x8000FFFF.

It does work when I move this line to OnLaunched.

[sotanakamura]

I don't know C#, so I can not answer exactly. In general, when you add XamlControlsResources, you need to implement Xaml info support in App class derived from application class. InitializeComponent is for XAML file. When you create WinUI 3 without XAML, you don't need it.

[DarranRowe]

@driver1998
This is actually known. The even with the full WinUI 3 environment, if you try to add resources to the directory in the constructor then it will fail.
The application has to be fully constructed with the metadata provider to be able to load resources.

[pjmlp]

Adding here my comment from Reddit for visibililty,

Thanks for sharing, I guess this is the best we can get for doing UI development with C++/WinRT, given the current state of Visual Studio tooling for C++/WinRT, since C++/CX was deprecated back in 2016, nothing really happened besides a couple of 3rd party plugins WIP for MIDL syntax highlighting.

[sotanakamura]

Thank you for your comment from Reddit! I think this is the easiest way to create WinUI 3 in C++. But using this way, it has no complete XAML support and some WinUI 3 features are limited. When you need complete XAML support, you can step up to WinUI 3 with XAML anytime. Beginners need a more steps and documents to get used to modern technologies; precompiled header, packaging, idl, and then XAML.

[harshith187]

Thank you for this example, I had one query, here we are creating the window and initializing it to nullptr Window window{ nullptr };
What if we don't initialize it to nullptr? I tried not to initialize it, but it crashed. Why do we get this behavior?

[sotanakamura]

Hmm... I tried removing { nullptr }. I had an error while appending WinUI 3 resources. You have an error by doing it after adding XamlControlsXamlMetaDataProvider provider. It is because window object is initialized to null and provider is initialized to null too. I don't know why this happens.

[harshith187]

What is the order of execution of these functions (App(), OnLaunched(), GetXamlType())? I added a breakpoint in all 3 functions and noticed that OnLaunched is called first and then GetXamlType and then App(), as App() constructed is called last, provider and Window will not be initialized right? I think this might be causing the issue.

And this was the order of execution when I did not use { nullptr } for initializing the window, when I used { nullptr } for initializing the window, the order was App() -> OnLaunched()-> GetXamlType().

[DarranRowe]

App() is being called last?
Considering OnLaunched is a non static member function of App, then that is VERY BAD. In C++ terms, this is calling a member function on an uninitialised object.

The WinUI 3 generated code does the calls in the order of App() then GetXamlType() then OnLaunched(). The App constructor call must come first since this is constructed in the call to Application.Start. From this, I infer that the Application construction itself places a reference to itself in a location that Application.Current can obtain. Application.Start then grabs this and then calls OnLaunched on this. The first call to GetXamlType() has the type Windows.Foundation.IReference.

[harshith187]

Yes, missed mentioning one part, just to restate, App() is completely executed at last, consider this App class

Here the breakpoint at line 47 in App() is hit first when we start the application, then the breakpoint at line number 56 is hit before the execution goes to line 49, then the breakpoint at line number 63 is hit before the execution goes to line 58.

when I used { nullptr } for initializing the window, line 49 is executed before line 56

All of these happen on the main thread itself

[DarranRowe]

Yes, this would be completely expected due to how C++ initialises classes. It does initialise data members before calling the constructor for the class, and for class types, this does involve calling constructors. What's more, since the class hasn't fully initialised the data members by that point, it is unable to properly service any initialisation requests. Finally, C++/WinRT does use the default constructor to create instances of the backing WinRT object.
The thing you should stick to is, when in doubt, try to work like the WinUI 3 generated projects. The WinUI 3 project defines App as:

struct App : AppT<App>
{
	App();

	void OnLaunched(Microsoft::UI::Xaml::LaunchActivatedEventArgs const&);

private:
	winrt::Microsoft::UI::Xaml::Window window{ nullptr };
};

by default and creates an instance of window in OnLaunched. This works.

[driver1998]

Here is a C# version, loosely based on your C++ version.

https://github.com/driver1998/WinUI-Without-Xaml-CSharp

[sotanakamura]

Nice!