How to author a C++ WinUI 3 component

[MarkIngramUK]

I'm looking to author a C++ WinUI 3 component that can be shared by multiple applications. Is there a guide on how to achieve this?
There's a sample for a C# component, consumed by a C++ app, but I want to use C++ end-to-end.

https://github.com/microsoft/WindowsAppSDK-Samples/tree/main/Samples/CustomControls
https://docs.microsoft.com/windows/apps/develop/platform/csharp-winrt/create-winrt-component-winui-cswinrt

[DarranRowe]

The basics are those already written for authoring UWP components since they use the same techniques. The Author APIs with C++/WinRT documentation is a good place to start.
You can start off with either the Windows Runtime Component (WinUI 3) or Windows Runtime Component (C++/WinRT) project templates, but you may need to do a little bit of extra configuration.

If for some reason you don't want to use C++/WinRT. Authoring components with WRL is possible, but it is rather annoying.

[MarkIngramUK]

Project reference

[DarranRowe]

I apologise for taking a while to reply. This was an interesting case where I wasn't able to get it to fail with what I was doing.
Obviously, since you were having a problem, I had to spend time actually figuring out what was going on.
Anyway, first, remember that the ms-appx scheme is rooted at the application root. So, this is basically looking in the same directory as the executable for the user control xaml files. But this isn't how the project system sets the file layout.

The way the files are laid out assumes that the controls are loaded from a sub directory of the main executable. The test control should be looking for its xaml file in there.

_contentLoaded = true;
::winrt::Windows::Foundation::Uri resourceLocator{ L"ms-appx:///ControlTest/TestControl.xaml" };
::winrt::Microsoft::UI::Xaml::Application::LoadComponent(*this, resourceLocator, ComponentResourceLocation::Nested);

That is what the control that I was messing around with generates. Notice how the URI has the extra directory in the path?

Well, you know that extra configuration I mentioned? If you don't do this, then the control is generated with the initialisation looking in the application root for its xaml file. I do this automatically, so I never run into this issue, but it is problematic.

If you notice, when you create the custom component, the project system marks it as Universal Windows

This causes the control to generate its content URI without the sub directory. What I found that you need to do is edit the component's .vcxproj file and set the AppContainerApplication property to false. If you then fully rebuild the solution, then everything should work.

[MarkIngramUK]

Thanks @DarranRowe . It feels like working around a bug when you have to manually go into the .vcxproj and edit elements.

[DarranRowe]

I totally agree.
The same is true with making an unpackaged application. You have to manually edit the .vcxproj file for that. It just feels really unpolished.

[MarkIngramUK]

Thanks @DarranRowe . I've reported the issue in WinUI's repo to see what they have to say (microsoft/microsoft-ui-xaml#7839).

[sudongg]

I've tried using the C++ WinUI 3 Runtime component in the past, but it always compiles errors after I modify some code, and I need to rebuild the project to run it.
I really don't understand why there is no example of the C++ WinUI 3 Runtime component provided so far, I believe most of the uwp Runtime components are written in C++.