{"id":15059997,"url":"https://github.com/sotanakamura/winui3-without-xaml","last_synced_at":"2025-04-10T04:05:03.805Z","repository":{"id":155603418,"uuid":"596960014","full_name":"sotanakamura/winui3-without-xaml","owner":"sotanakamura","description":"WinUI 3 in C++ Without XAML","archived":false,"fork":false,"pushed_at":"2024-06-09T12:10:09.000Z","size":68,"stargazers_count":134,"open_issues_count":0,"forks_count":8,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-10T04:04:57.607Z","etag":null,"topics":["cpp","windows","winui3","without-xaml"],"latest_commit_sha":null,"homepage":"","language":"C++","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sotanakamura.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-02-03T10:06:29.000Z","updated_at":"2025-04-06T06:48:33.000Z","dependencies_parsed_at":"2024-06-09T13:29:15.075Z","dependency_job_id":"12e1ca1c-1b6a-47c6-a8e6-1592c3854e1a","html_url":"https://github.com/sotanakamura/winui3-without-xaml","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sotanakamura%2Fwinui3-without-xaml","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sotanakamura%2Fwinui3-without-xaml/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sotanakamura%2Fwinui3-without-xaml/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sotanakamura%2Fwinui3-without-xaml/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sotanakamura","download_url":"https://codeload.github.com/sotanakamura/winui3-without-xaml/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248154981,"owners_count":21056543,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cpp","windows","winui3","without-xaml"],"created_at":"2024-09-24T22:51:00.466Z","updated_at":"2025-04-10T04:05:03.785Z","avatar_url":"https://github.com/sotanakamura.png","language":"C++","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WinUI 3 in C++ Without XAML\n\n![controls](controls.png)\n\nWinUI 3 is a modern UI framework for Windows apps. WinUI 3 can be used with C++/WinRT, a C++17 language projection that provides access to the Windows Runtime (WinRT) APIs. Usually, XAML is used to define the UI. Therefore, XAML and C++ are combined to create applications. However, there are those who want to create simple applications in C++ without XAML. This repository provides a step-by-step guide to creating WinUI3 apps in C++ without XAML.\n\n## Caution\nCreating WinUI 3 apps without XAML is an unsupported scenario and some features are limited; it is strongly recommended to use XAML when creating Winui 3 apps. If you still want to create a winui 3 app without XAML, proceed to the next section.\n\n## Sample\nYou can download a sample zip file from [winui3-without-xaml repository](https://github.com/sotanakamura/winui3-without-xaml/).\n\n[master.zip](https://github.com/sotanakamura/winui3-without-xaml/archive/refs/heads/master.zip).\n\n## Issues\n~~Issues is closed. When you have a problem, please comment in [windows-ui-xaml Discussions](https://github.com/microsoft/microsoft-ui-xaml/discussions/8151) to show needs of WinUI 3 without XAML to WinUI 3 team.~~\n\n## Step 1: Creating a Project\nNormally, when creating a WinUI 3 application, start with a WinUI 3 project template. Here, we start with an empty project.\n\n1. Create an empty project.\n2. Set project properties for unpackage WinUI 3 app\n    1. Open `.vcxproj` file in any text editor. Or, right-click the project on Solution Explorer of Visual Studio and click \"Unload Project\".\n    2. Add the following properties inside the PropertyGroup element.\n\n        ```xml\n          \u003cPropertyGroup Label=\"Globals\"\u003e\n            \u003cWindowsAppSDKSelfContained\u003etrue\u003c/WindowsAppSDKSelfContained\u003e\n            \u003cWindowsPackageType\u003eNone\u003c/WindowsPackageType\u003e\n            \u003cAppxPackage\u003efalse\u003c/AppxPackage\u003e\n            ...\n          \u003c/PropertyGroup\u003e\n        ```\n    \n    If you have unloaded the project, right-click on the project and click \"Reload Project\". Usually, WinUI 3 projects are packaged with MSIX. If you do not want to package it, set the `WindowsPackageType` option and the `AppxPackage` option. In addition, if you want to run the app without installing the Windows App SDK, set the `WindowsAppSDKSelfContained` option to make the app self-contained, including dependencies.\n3. Install the Microsoft.Windows.CppWinRT NuGet package to enable support for C++/WinRT and Microsoft.WindowsAppSDK for WinUI 3.\n    1. Right-click your project in Solution Explorer and choose Manage NuGet Packages.\n    2. Select the Browse tab, search for the Microsoft.Windows.CppWinRT and Microsoft.WindowsAppSDK package, and install the latest version of these packages.\n4. Set `/SUBSYSTEM` liker option for the GUI application. \n    1. Right-click on the project and click \"Properties\".\n    2. Set `Windows` in \"Linker-\u003eSystem-\u003eSubSystem\".\n\n## Step 2: Implementing an Entry Point\nWhen the Windows operating system (OS) runs an app, the OS begins execution in the app's entry point. That entry point takes the form of `wWinMain` function instead of `main`. `wWinMain` function is declared in `Windows.h`. Include `Windows.h` and define `wWinMain` function in your code.\n\n```cpp\n#include \u003cWindows.h\u003e\n\nint WINAPI wWinMain(HINSTANCE, HINSTANCE, LPWSTR, int)\n{\n\treturn 0;\n}\n```\n\n## Step 3: Including C++/WinRT Header Files\nC++/WinRT header files for access to Windows SDK APIs and Windows App SDK APIs are generated in your project folder. Include some required header files.\n\n```cpp\n#include \u003cWindows.h\u003e\n#undef GetCurrentTime\n#include \u003cwinrt/Microsoft.UI.Xaml.h\u003e\n\nusing namespace winrt;\nusing namespace Microsoft::UI::Xaml;\n```\n\n`#undef GetCurrentTime` is needed to avoid compile error on duplicated macros. `Microsoft.UI.Xaml.h` header file provides general XAML APIs including `Application` class and `Window` class. APIs provided by `Microsoft.UI.Xaml.h` has `winrt::Microsoft::UI::Xaml` namespace. In general, Windows Runtime APIs have `winrt` namespace, Windows SDK APIs have `Windows` namespace, and Windows App SDk APIs have `Microsoft` namespace. `using namespace` is useful for simplifying code.\n\n## Step 4: Creating an Application and a Window\n`Application` class provides an entry point for the WinUI 3 application. `OnLaunched` method is invoked when the application is launched. Inherit `Application` class and override this method to perform application initialization and to create a new window.\n\n```cpp\nclass App : public ApplicationT\u003cApp\u003e\n{\npublic:\n\tvoid OnLaunched(LaunchActivatedEventArgs const\u0026)\n\t{\n\t\twindow = Window();\n\t\twindow.Activate();\n\t}\nprivate:\n\tWindow window{ nullptr };\n};\n```\n\nThis inheritance pattern is called F-bound Polymorphism pattern or Curiously Recurring Template Pattern. In `OnLaunched` method, create a new windows and activate it.\n\n## Step 5: Initializing and Start an application\nIn `wWinMain` function, start application by instantiating `App` derived from `application`.\n\n```cpp\nint WINAPI wWinMain(HINSTANCE, HINSTANCE, LPWSTR, int)\n{\n\tinit_apartment();\n\tApplication::Start([](auto\u0026\u0026) {make\u003cApp\u003e(); });\n\treturn 0;\n}\n```\n\n`init_apartment` initializes the thread in the Windows Runtime. `Application::Start` provides the entry point and requests initialization of the application. \nThe lambda expression is passed that make `App` to be invoked in the initialization sequence.\n\n## Step 6: Building and Running a WinUI 3 app\nHere is the complete code for the program:\n\n```cpp\n#include \u003cWindows.h\u003e\n#undef GetCurrentTime\n#include \u003cwinrt/Microsoft.UI.Xaml.h\u003e\n\nusing namespace winrt;\nusing namespace Microsoft::UI::Xaml;\n\nclass App : public ApplicationT\u003cApp\u003e\n{\npublic:\n\tvoid OnLaunched(LaunchActivatedEventArgs const\u0026)\n\t{\n\t\twindow = Window();\n\t\twindow.Activate();\n\t}\nprivate:\n\tWindow window{ nullptr };\n};\n\nint WINAPI wWinMain(HINSTANCE, HINSTANCE, LPWSTR, int)\n{\n\tinit_apartment();\n\tApplication::Start([](auto\u0026\u0026) {make\u003cApp\u003e(); });\n\treturn 0;\n}\n```\n\nBuild and run the app. You can see a blank window.\n\n## Step 7: Adding WinUI 3 Controls\nAdd stack panel and button.\n\n```cpp\n...\n#include \u003cwinrt/Windows.Foundation.Collections.h\u003e\n#include \u003cwinrt/Microsoft.UI.Xaml.Controls.h\u003e\n#include \u003cwinrt/Microsoft.UI.Xaml.Controls.Primitives.h\u003e\n...\nusing namespace Microsoft::UI::Xaml::Controls;\n...\n\n\tvoid OnLaunched(LaunchActivatedEventArgs const\u0026)\n\t{\n\t\twindow = Window();\n\n\t\tStackPanel stackPanel;\n\t\tstackPanel.HorizontalAlignment(HorizontalAlignment::Center);\n\t\tstackPanel.VerticalAlignment(VerticalAlignment::Center);\n\n\t\tButton button;\n\t\tbutton.Content(box_value(L\"WinUI 3 Without XAML!\"));\n\n\t\twindow.Content(stackPanel);\n\t\tstackPanel.Children().Append(button);\n\n\t\twindow.Activate();\n\t}\n\n...\n```\n\n`StackPanel` arranges child elements into a single line that can be oriented horizontally or vertically. Horizontal alignment and vertical alignment are set by properties (Accessors and Mutators in C++). `Button` represents a templated button control that interprets a Click user interaction. `Content` can be passed an instance of any runtime class. But you can't directly pass to such a function a scalar value (such as a numeric or text value), nor an array. Instead, a scalar or array value needs to be wrapped inside a reference class object. That wrapping process is known as boxing the value. C++/WinRT provides the `winrt::box_value` function, which takes a scalar or array value, and returns the value boxed into a reference class object. After creating conrtols, connect child elements to the parent controls.\n\n## Step 8: Adding WinUI 3 Themes\nYou can add WinUI 3 controls, but it looks UWP controls. You need to add WinUI 3 themes. WinUI 3 themes are written in XAML, so the `App` requires XAML integration. What you need to do is implementing a `IXamlMetadataProvider` interface. This interface implements XAML type resolution and provides the mapping between types used in XAML markup and the corresponding classes implemented in an application or component. The interface is passed as a template parameter.\n\n```cpp\n...\n#include \u003cwinrt/Windows.UI.Xaml.Interop.h\u003e\n...\n#include \u003cwinrt/Microsoft.UI.Xaml.XamlTypeInfo.h\u003e\n#include \u003cwinrt/Microsoft.UI.Xaml.Markup.h\u003e\n\n...\nusing namespace Microsoft::UI::Xaml::XamlTypeInfo;\nusing namespace Microsoft::UI::Xaml::Markup;\nusing namespace Windows::UI::Xaml::Interop;\n\nclass App : public ApplicationT\u003cApp, IXamlMetadataProvider\u003e\n{\npublic:\n\tvoid OnLaunched(LaunchActivatedEventArgs const\u0026)\n\t{\n\t\tResources().MergedDictionaries().Append(XamlControlsResources());\n\t\t...\n\t}\n\tIXamlType GetXamlType(TypeName const\u0026 type)\n\t{\n\t\treturn provider.GetXamlType(type);\n\t}\n\tIXamlType GetXamlType(hstring const\u0026 fullname)\n\t{\n\t\treturn provider.GetXamlType(fullname);\n\t}\n\tcom_array\u003cXmlnsDefinition\u003e GetXmlnsDefinitions()\n\t{\n\t\treturn provider.GetXmlnsDefinitions();\n\t}\nprivate:\n\t...\n\tXamlControlsXamlMetaDataProvider provider;\n};\n```\n\n`IXamlMetadataProvider` interface provides XAML type information with following three methods;\n\n* `GetXamlType(TypeName)`\n* `GetXamlType(String)`\n* `GetXmlnsDefinitions()`\n\nImplement these methods by passing arguments to `XamlControlsXamlMetaDataProvider` class. `XamlControlsXamlMetaDataProvider` class provides XAML type information for WinUI 3. Finally, add WinUI 3 theme to the applicarion by appending WinUI 3 XAML resource to `Resources` property. `XamlControlsResources()` returns default styles for the controls in WinUI 3. \n\n## Step 9: Building and Running a WinUI 3 app with Fluent Design\nHere is the complete code for the program:\n\n```cpp\n#include \u003cWindows.h\u003e\n#undef GetCurrentTime\n#include \u003cwinrt/Windows.Foundation.Collections.h\u003e\n#include \u003cwinrt/Windows.UI.Xaml.Interop.h\u003e\n#include \u003cwinrt/Microsoft.UI.Xaml.Controls.h\u003e\n#include \u003cwinrt/Microsoft.UI.Xaml.Controls.Primitives.h\u003e\n#include \u003cwinrt/Microsoft.UI.Xaml.XamlTypeInfo.h\u003e\n#include \u003cwinrt/Microsoft.UI.Xaml.Markup.h\u003e\n\nusing namespace winrt;\nusing namespace Microsoft::UI::Xaml;\nusing namespace Microsoft::UI::Xaml::Controls;\nusing namespace Microsoft::UI::Xaml::XamlTypeInfo;\nusing namespace Microsoft::UI::Xaml::Markup;\nusing namespace Windows::UI::Xaml::Interop;\n\nclass App : public ApplicationT\u003cApp, IXamlMetadataProvider\u003e\n{\npublic:\n\tvoid OnLaunched(LaunchActivatedEventArgs const\u0026)\n\t{\n\t\tResources().MergedDictionaries().Append(XamlControlsResources());\n\n\t\twindow = Window();\n\n\t\tStackPanel stackPanel;\n\t\tstackPanel.HorizontalAlignment(HorizontalAlignment::Center);\n\t\tstackPanel.VerticalAlignment(VerticalAlignment::Center);\n\n\t\tButton button;\n\t\tbutton.Content(box_value(L\"WinUI 3 Without XAML!\"));\n\n\t\twindow.Content(stackPanel);\n\t\tstackPanel.Children().Append(button);\n\n\t\twindow.Activate();\n\t}\n\tIXamlType GetXamlType(TypeName const\u0026 type)\n\t{\n\t\treturn provider.GetXamlType(type);\n\t}\n\tIXamlType GetXamlType(hstring const\u0026 fullname)\n\t{\n\t\treturn provider.GetXamlType(fullname);\n\t}\n\tcom_array\u003cXmlnsDefinition\u003e GetXmlnsDefinitions()\n\t{\n\t\treturn provider.GetXmlnsDefinitions();\n\t}\nprivate:\n\tWindow window{ nullptr };\n\tXamlControlsXamlMetaDataProvider provider;\n};\n\nint WINAPI wWinMain(HINSTANCE, HINSTANCE, LPWSTR, int)\n{\n\tinit_apartment();\n\tApplication::Start([](auto\u0026\u0026) {make\u003cApp\u003e(); });\n\treturn 0;\n}\n```\n\nBuild and run the app. You can see a beautiful WinUI 3 button.\n\n## Step 10: Things More Interesting\nNow you can build WinUI 3 app in C++ without XAML. Here, I will show you some examples to help you to use WinUI 3 controls.\n\n```cpp\nvoid OnLaunched(LaunchActivatedEventArgs const\u0026)\n{\n\tResources().MergedDictionaries().Append(XamlControlsResources());\n\n\twindow = Window();\n\n\tStackPanel stackPanel;\n\tstackPanel.HorizontalAlignment(HorizontalAlignment::Center);\n\tstackPanel.VerticalAlignment(VerticalAlignment::Center);\n\n\tTextBlock title;\n\ttitle.Style(Application::Current().Resources().Lookup(box_value(L\"TitleTextBlockStyle\")).as\u003cStyle\u003e());\n\ttitle.Text(L\"WinUI 3 in C++ Without XAML!\");\n\ttitle.HorizontalAlignment(HorizontalAlignment::Center);\n\n\tHyperlinkButton project;\n\tproject.Content(box_value(L\"Github Project Repository\"));\n\tproject.NavigateUri(Uri(L\"https://github.com/sotanakamura/winui3-without-xaml\"));\n\tproject.HorizontalAlignment(HorizontalAlignment::Center);\n\n\tButton button;\n\tbutton.Content(box_value(L\"Click\"));\n\tbutton.Click([\u0026](IInspectable const \u0026sender, RoutedEventArgs) { sender.as\u003cButton\u003e().Content(box_value(L\"Thank You!\")); });\n\tbutton.HorizontalAlignment(HorizontalAlignment::Center);\n\tbutton.Margin(ThicknessHelper::FromUniformLength(20));\n\n\twindow.Content(stackPanel);\n\tstackPanel.Children().Append(title);\n\tstackPanel.Children().Append(project);\n\tstackPanel.Children().Append(button);\n\n\twindow.Activate();\n}\n```\n\n## Step 11 (Optional): Add Precompiled Header Files\nC++/WinRT is header-only library and takes a lot of time to compile. You can reduce the time by precompiling. Any stable header files, for example Standard Library headers and C++/WinRT headers, can be precompiled cause it is not often changed.\n\n1. Add pch.h and pch.cpp files with following code.\n2. Right-click the project on Solution Explorer of Visual Studio and click \"Properties\".\n3. Set `Use` in \"C/C++-\u003ePrecompiled Headers-\u003ePrecompiled Header\".\n3. Set `pch.h` in \"C/C++-\u003ePrecompiled Headers-\u003ePrecompiled Header File\".\n4. Right-click pch.cpp and click \"Properties\".\n5. Set `Create` in \"C/C++-\u003ePrecompiled Headers-\u003ePrecompiled Header\".\n6. Move including header files to `pch.h` and include `pch.h`\n\n```cpp\n//pch.h\n\n#include \u003cWindows.h\u003e\n#undef GetCurrentTime\n#include \u003cwinrt/Windows.Foundation.Collections.h\u003e\n#include \u003cwinrt/Windows.UI.Xaml.Interop.h\u003e\n#include \u003cwinrt/Microsoft.UI.Xaml.Controls.h\u003e\n#include \u003cwinrt/Microsoft.UI.Xaml.Controls.Primitives.h\u003e\n#include \u003cwinrt/Microsoft.UI.Xaml.XamlTypeInfo.h\u003e\n#include \u003cwinrt/Microsoft.UI.Xaml.Markup.h\u003e\n```\n\n```cpp\n//pch.cpp\n\n#include \"pch.h\"\n```\n\n```cpp\n//main.cpp\n\n#include \"pch.h\"\n\nusing naespace ...\n```\n\n## Reference\nThis method is an unsupported scenario; it is strongly recommended to use XAML when creating Winui 3 apps. Please refer to the official documents to get started with [Windows App SDK](https://learn.microsoft.com/en-us/windows/apps/windows-app-sdk/). If you are not familiar with [C++/WinRT](https://learn.microsoft.com/ja-jp/windows/uwp/cpp-and-winrt-apis/) and [XAML](https://learn.microsoft.com/ja-jp/windows/uwp/xaml-platform/), I highly recommend you to learn them before developing. C++ is not primary language for WinUI 3 apps, so this senario is not documented well. You need to refer to API reference many times. Windows App SDK APIs are mainly for WinUI 3. You can access modern Windows features through Windows SDK APIs.\n\n### Documents\n\n* [Windows App SDK](https://learn.microsoft.com/en-us/windows/apps/windows-app-sdk/): The Windows UI Library (WinUI) 3 is the latest and recommended user interface (UI) framework for Windows desktop apps. By incorporating the Fluent Design System into all experiences, controls, and styles, WinUI provides consistent, intuitive, and accessible experiences using the latest UI patterns. WinUI 3 is available as part of the Windows App SDK.\n* [C++/WinRT](https://learn.microsoft.com/ja-jp/windows/uwp/cpp-and-winrt-apis/): C++/WinRT is an entirely standard modern C++17 language projection for Windows Runtime (WinRT) APIs, implemented as a header-file-based library, and designed to provide you with first-class access to the modern Windows API. \n* [XAML](https://learn.microsoft.com/ja-jp/windows/uwp/xaml-platform/): Extensible Application Markup Language (XAML) is a declarative language. Specifically, XAML can initialize objects and set properties of objects using a language structure that shows hierarchical relationships between multiple objects and a backing type convention that supports extension of types. You can create visible UI elements in the declarative XAML markup.\n\n### API reference\n\n* [Windows App SDK APIs Reference](https://learn.microsoft.com/en-us/windows/windows-app-sdk/api/winrt/): APIs for WinUI 3.\n* [Windows SDK APIs Reference](https://learn.microsoft.com/en-us/uwp/api/): APIs for modern Windows features.\n\nSome text in this document is cited from Microsoft documentation. [https://learn.microsoft.com](https://learn.microsoft.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsotanakamura%2Fwinui3-without-xaml","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsotanakamura%2Fwinui3-without-xaml","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsotanakamura%2Fwinui3-without-xaml/lists"}