Getting Started<\/h2>\n\n\n\n
As briefly mentioned in the introduction, WinUI 3 is a new native framework that is part of the Windows App SDK. It sits on top of Win32 and Universal Windows Platform, providing a way to build applications that can run on a variety of platforms, such as PCs or mobile devices. Here is a picture from Microsoft Docs<\/a> showing the relationship between these technologies:<\/p>\n\n\n\n Here are some resources to check to learn more about it:<\/p>\n\n\n\n To get started with WinUI 3 for C++, you need:<\/p>\n\n\n\n The last two you can get from the second link above.<\/p>\n\n\n\n Installing the pre-requisites is straight forward and I did not encounter any problem.<\/p><\/div><\/div>\n\n\n\n After installing the pre-requisites, you can create new projects. You need to select C++<\/strong> for the language and the WinUI<\/strong> for the project type. From the available list then select Blank App, Packaged (WinUI 3 in Desktop)<\/strong>:<\/p>\n\n\n\n The following template project is created:<\/p>\n\n\n\n The solution contains several files, including:<\/p>\n\n\n\n Here is how the On the other hand, the What I can see from here is that:<\/p>\n\n\n\n There is also the If you double click it, it opens it with the Source Editor<\/strong>. If you try to run the Open with…<\/strong> command and select XAML Designer<\/strong> nothing happens. There is an Design in Blend<\/strong> option, but it’s the same problem:<\/p>\n\n\n\n I can only conclude that designing WinUI 3 visual elements is not possible with the designer so you need to do everything by hand and run the application to see how the UI looks. That’s a huge minus, in my book, and defeats most of the purpose of having a UI framework. But maybe it’s my fault and I missed installing something. After all, I’m just trying things.<\/p>\n\n\n\n When you build the project, a folder called Generated Files<\/strong> is created, containing, as the name suggests, files generated from existing source code. These include:<\/p>\n\n\n\n The generated header for the You can see the accessor member functions for the Not being able to edit the XAML in the visual designer is a huge drawback.<\/p> Familiarizing with WinRT concepts and structure needs some time.<\/p><\/div><\/div>\n\n\n\n Trying to build this project, I got the following error in the output window:<\/p>\n\n\n\n The solution to this is to enable the Developer Mode<\/strong> from settings, Privacy & Security > For Developers<\/strong>.<\/p>\n\n\n\n After this, building works and it also automatically downloads and installs missing components:<\/p>\n\n\n\n Running the app shows the following window:<\/p>\n\n\n\n Building and running was a seamless experience.<\/p><\/div><\/div>\n\n\n\n I want my demo app to have two text boxes: one for entering a Celsius value and one for Fahrenheit values. As you edit any of them, entering a value, the other should display the equivalent value. Here is how the UI is going to look:<\/p>\n\n\n\n If I build and run it, it looks as follows:<\/p>\n\n\n\n What I need to do next is adding handlers. The designer does not work, but luckily, adding them from the Source Editor does work:<\/p>\n\n\n\n This is the modified code:<\/p>\n\n\n\n Here is how the handlers look in the header and source file:<\/p>\n\n\n\n Again, two things to notice:<\/p>\n\n\n\n Here is my first attempt to implement the handler for the change of the Celsius value:<\/p>\n\n\n\n This compiles but when executed does not work. The text is not set in the Fahrenheit box. Remember the This time it does work. But there are still some problems. The application crashes if you type a – (minus) or you write something in the Celsius field and then delete it all. So, the implementation to cover these looks as follows:<\/p>\n\n\n\n The opposite formula is Code generation is not at its best. Inconsistencies between the project templates and the generated code are obvious. Fully qualified names of components of the WinUI framework make the code hard to read.<\/p><\/div><\/div>\n\n\n\n To try to get a better feeling of the experience of working with the WinUI API, I decided do add some more features. For instance, the ability to toggle between a light mode and dark mode of the UI. The WinUI framework has a toggle button, represented by the ToggleSwitch<\/a> class. So, I added one to the top-right corner of the window:<\/p>\n\n\n\n The implementation of the handler for the The compiler errors were the following:<\/p>\n\n\n\n This means that the definition of the The good part is that the file names and the namespaces have the same name. So if you’re looking to include the APIs from the With these changes I could compile and run but the behavior was not really what I expected. I got a few more problems:<\/p>\n\n\n\n Since the plan was not to provide a perfect solution but something that works to some level, I decided to simplify it as follows:<\/p>\n\n\n\n With these changes, the application looks as follows:<\/p>\n\n\n\n And then I realized I was using the wrong A second feature that I decided to add was displaying an icon representing a thermometer based on the entered temperature. A value over 4 degrees Celsius would show a warm\/hot temperature, one below that a freezing temperature. When no value is entered, there should be no icon displayed.<\/p>\n\n\n\n This turned out to be a mess. Because WinUI 3 has many classes including the following:<\/p>\n\n\n\n After a few tries, I ended up using an I created a helper function to set the right image source to this control. This wasn’t easy either, but eventually I found what I was looking for within the docs for the class. My function looks as follows:<\/p>\n\n\n\n This function needs to be invoked every time the temperature value changes:<\/p>\n\n\n\n Eventually, I got the result I was looking for. Here are a couple of screenshots:<\/p>\n\n\n\n Based on my experience with WPF I though doing these would be relatively simple but ended up spending unexpectedly more time reading docs to figure out how to do it. Maybe I’m too harsh, but a combination of unhelpful documentation and similar APIs created too much confusion for me.<\/p><\/div><\/div>\n\n\n\n WinUI 3 is trumpeted as the next big thing in Windows development. When it comes to the C++ projection of the API, unfortunately, I’m not impressed. I personally don’t see this as the modern native library C++ Windows developers have been wishing for the past 12-15 years. Designing user interfaces must be done by hand in XAML, which I often do in WPF, but not having the designer means you don’t really know what you get at design time and that’s a huge drawback. The C++ API is cumbersome at best. Although I tried to browse through the framework source code, the experience was similar to trying to make a sense of long template error messages. Also, the generated code is not optimal as I explained earlier. Maybe in a few versions it will get better but for the time being it doesn’t look like something that I’ll be using. I think that time has shown WinRT and UWP were a mistake. WinUI, instead of starting from scratch, sweeps the dirt under the carpet. I think it’s another mistake and time will tell whether I’m right or wrong.<\/p>\n","protected":false},"excerpt":{"rendered":" The Windows UI Library 3, known shortly as WinUI 3, is a native UI framework that ships with the Windows App SDK. This is an SDK complementary to the Windows SDK, WPF, WinForms, and Win32. It provides a new unified set of APIs and tools that can be used to develop desktop apps on Windows 11 (as well as downwards to Windows 10, version 1809). I decided to have a look at what this framework provides and this post is written as I am trying it. To evaluate it, I’ll try to build a small application that does conversion between Celsius and Fahrenheit degrees as you type in a field.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[7,146,8,289],"tags":[451,459,625],"class_list":["post-4462","post","type-post","status-publish","format-standard","hentry","category-c","category-windows","category-windows-programming","category-winrt","tag-c","tag-windows","tag-winui"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t![\"\"](\"https:\/\/mariusbancila.ro\/blog\/wp-content\/uploads\/2022\/04\/platforms-winui3-700x271.png\")
<\/a>Impression: \u2b50\u2b50\u2b50\u2b50\u2b50<\/h4>
Creating a first project<\/h2>\n\n\n\n
![\"\"](\"https:\/\/mariusbancila.ro\/blog\/wp-content\/uploads\/2022\/04\/newproject-700x449.png\")
<\/a><\/figure>\n\n\n\n![\"\"](\"https:\/\/mariusbancila.ro\/blog\/wp-content\/uploads\/2022\/04\/solution.png\")
<\/a><\/figure>\n\n\n\nApp.xaml<\/code>, together with App.idl<\/code>, App.xaml.h<\/code>, and App.xaml.cpp<\/code>. The App<\/a> class represents the current application and its services, such as entry point, lifetime management, unhandled exception detection.<\/li>MainWindow.xaml<\/code>, together with MainWindow.idl<\/code>, MainWindow.xaml.cpp<\/code>, MainWindow.xaml.h<\/code>. The MainWindow<\/code> class is derived from the Window<\/a> class and represents a window of the application.<\/li><\/ul>\n\n\n\nApp<\/code> class looks:<\/p>\n\n\n\n\/\/ --- App.xaml.h ---\nnamespace winrt::WinUIApp::implementation\n{\n struct App : AppT<App>\n {\n App();\n\n void OnLaunched(Microsoft::UI::Xaml::LaunchActivatedEventArgs const&);\n\n private:\n winrt::Microsoft::UI::Xaml::Window window{ nullptr };\n };\n}\n\n\n\/\/ --- App.xaml.cpp ---\n#include \"App.xaml.h\"\n#include \"MainWindow.xaml.h\"\n\nusing namespace winrt;\nusing namespace Windows::Foundation;\nusing namespace Microsoft::UI::Xaml;\nusing namespace Microsoft::UI::Xaml::Controls;\nusing namespace Microsoft::UI::Xaml::Navigation;\nusing namespace WinUIApp;\nusing namespace WinUIApp::implementation;\n\n\/\/ To learn more about WinUI, the WinUI project structure,\n\/\/ and more about our project templates, see: http:\/\/aka.ms\/winui-project-info.\n\n\/\/\/ <summary>\n\/\/\/ Initializes the singleton application object. This is the first line of authored code\n\/\/\/ executed, and as such is the logical equivalent of main() or WinMain().\n\/\/\/ <\/summary>\nApp::App()\n{\n InitializeComponent();\n\n#if defined _DEBUG && !defined DISABLE_XAML_GENERATED_BREAK_ON_UNHANDLED_EXCEPTION\n UnhandledException([this](IInspectable const&, UnhandledExceptionEventArgs const& e)\n {\n if (IsDebuggerPresent())\n {\n auto errorMessage = e.Message();\n __debugbreak();\n }\n });\n#endif\n}\n\n\/\/\/ <summary>\n\/\/\/ Invoked when the application is launched normally by the end user. Other entry points\n\/\/\/ will be used such as when the application is launched to open a specific file.\n\/\/\/ <\/summary>\n\/\/\/ <param name=\"e\">Details about the launch request and process.<\/param>\nvoid App::OnLaunched(LaunchActivatedEventArgs const&)\n{\n window = make<MainWindow>();\n window.Activate();\n}\n\n\/\/ --- App.xaml.idl ---<\/pre>\n\n\n\nMainWindow<\/code> class looks as follows:<\/p>\n\n\n\n\/\/ --- MainWindow.xaml.h ---\n#pragma once\n\n#include \"MainWindow.g.h\"\n\nnamespace winrt::WinUIApp::implementation\n{\n struct MainWindow : MainWindowT<MainWindow>\n {\n MainWindow();\n\n int32_t MyProperty();\n void MyProperty(int32_t value);\n\n void myButton_Click(Windows::Foundation::IInspectable const& sender, Microsoft::UI::Xaml::RoutedEventArgs const& args);\n };\n}\n\nnamespace winrt::WinUIApp::factory_implementation\n{\n struct MainWindow : MainWindowT<MainWindow, implementation::MainWindow>\n {\n };\n}\n\n\/\/ --- MainWindow.xaml.cpp ---\n#include \"pch.h\"\n#include \"MainWindow.xaml.h\"\n#if __has_include(\"MainWindow.g.cpp\")\n#include \"MainWindow.g.cpp\"\n#endif\n\nusing namespace winrt;\nusing namespace Microsoft::UI::Xaml;\n\n\/\/ To learn more about WinUI, the WinUI project structure,\n\/\/ and more about our project templates, see: http:\/\/aka.ms\/winui-project-info.\n\nnamespace winrt::WinUIApp::implementation\n{\n MainWindow::MainWindow()\n {\n InitializeComponent();\n }\n\n int32_t MainWindow::MyProperty()\n {\n throw hresult_not_implemented();\n }\n\n void MainWindow::MyProperty(int32_t \/* value *\/)\n {\n throw hresult_not_implemented();\n }\n\n void MainWindow::myButton_Click(IInspectable const&, RoutedEventArgs const&)\n {\n myButton().Content(box_value(L\"Clicked\"));\n }\n}\n\n\/\/ --- MainWindow.xaml.idl ---\nnamespace WinUIApp\n{\n [default_interface]\n runtimeclass MainWindow : Microsoft.UI.Xaml.Window\n {\n MainWindow();\n Int32 MyProperty;\n }\n}<\/pre>\n\n\n\nMainWindow<\/code>, both derived from the class template MainWindowT<\/code>, except with different template arguments. However, they are part of two different namespaces: one is called implementation<\/code> and the other is called factory_implementation<\/code>. At a first look, I find this confusing, but will probably understand it better lately.<\/li>myButton().Content(box_value(L\"Clicked\"))<\/code>. myButton<\/code> is an object that’s defined in the MainWindow.xaml<\/code> file but it’s accessed through a function. And there’s this box_value<\/code> wrapper for the string. <\/li><\/ul>\n\n\n\nMainWindow.xaml<\/code> file that looks as follows:<\/p>\n\n\n\n<Window\n x:Class=\"WinUIAppDemo.MainWindow\"\n xmlns=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\/presentation\"\n xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\"\n xmlns:local=\"using:WinUIAppDemo\"\n xmlns:d=\"http:\/\/schemas.microsoft.com\/expression\/blend\/2008\"\n xmlns:mc=\"http:\/\/schemas.openxmlformats.org\/markup-compatibility\/2006\"\n mc:Ignorable=\"d\">\n\n <StackPanel Orientation=\"Horizontal\" HorizontalAlignment=\"Center\" VerticalAlignment=\"Center\">\n <Button x:Name=\"myButton\" Click=\"myButton_Click\">Click Me<\/Button>\n <\/StackPanel>\n<\/Window><\/pre>\n\n\n\n
![\"\"](\"https:\/\/mariusbancila.ro\/blog\/wp-content\/uploads\/2022\/04\/blend-700x219.png\")
<\/a>App.xaml.g.hpp<\/code> and App.xaml.g.cpp<\/code> for the App<\/code> class.<\/li>MainWindow.xaml.g.hpp<\/code> and MainWindow.xaml.g.cpp<\/code> for the MainWindow<\/code> class.<\/li><\/ul>\n\n\n\nMainWindow<\/code> class looks as follows:<\/p>\n\n\n\n#pragma once\n\nnamespace winrt::WinUIAppDemo::implementation\n{\n using IInspectable = ::winrt::Windows::Foundation::IInspectable;\n\n template <typename D, typename ... I>\n struct MainWindowT : public ::winrt::WinUIAppDemo::implementation::MainWindow_base<D,\n ::winrt::Microsoft::UI::Xaml::Markup::IComponentConnector,\n I...>\n {\n using base_type = typename MainWindowT::base_type;\n using base_type::base_type;\n using class_type = typename MainWindowT::class_type;\n\n void InitializeComponent();\n void Connect(int32_t connectionId, IInspectable const& target);\n ::winrt::Microsoft::UI::Xaml::Markup::IComponentConnector GetBindingConnector(int32_t connectionId, IInspectable const& target);\n void UnloadObject(::winrt::Microsoft::UI::Xaml::DependencyObject const& dependencyObject);\n void DisconnectUnloadedObject(int32_t connectionId);\n\n ::winrt::Microsoft::UI::Xaml::Controls::Button myButton()\n {\n return _myButton;\n }\n void myButton(::winrt::Microsoft::UI::Xaml::Controls::Button value)\n {\n _myButton = value;\n }\n \n protected:\n bool _contentLoaded{false};\n\n private:\n struct MainWindow_obj1_Bindings;\n\n ::winrt::Microsoft::UI::Xaml::Controls::Button _myButton{nullptr};\n };\n}<\/pre>\n\n\n\nmyButton<\/code> control. That’s why the syntax for accessing the object was myButton().Content(box_value(L\"Clicked\"))<\/code>.<\/p>\n\n\n\nImpression: \u2b50\u2b50<\/h4>
Building and Running<\/h2>\n\n\n\n
DEP0100: Please ensure that target device has developer mode enabled. Could not check to see if Developer Mode is enabled on the local machine due to error 00000490. To learn more about Developer Mode, please visit https:\/\/go.microsoft.com\/fwlink\/?linkid=2128411<\/pre>\n\n\n\n
![\"\"](\"https:\/\/mariusbancila.ro\/blog\/wp-content\/uploads\/2022\/04\/devmode.png\")
<\/a><\/figure>\n\n\n\nCreating a new clean layout...\nCopying files: Total 3 mb to layout...\nChecking whether required frameworks are installed...\nFramework: Microsoft.VCLibs.140.00.Debug.UWPDesktop\/X64, app package version 14.0.30704.0 is not currently installed.\nFramework: Microsoft.VCLibs.140.00.Debug\/X64, app package version 14.0.30704.0 is not currently installed.\nInstalling missing frameworks...\nRegistering the application to run from layout...\nDeployment complete (0:00:05.292). Full package name: \"17af30e1-10a4-4abe-8866-203638b1aa27_1.0.0.0_x64__60yvx6gbcw69r\"\n========== Deploy: 1 succeeded, 0 failed, 0 skipped ==========<\/pre>\n\n\n\n
![\"\"](\"https:\/\/mariusbancila.ro\/blog\/wp-content\/uploads\/2022\/04\/clickme.png\")
<\/a><\/figure>\n\n\n\nImpression: \u2b50\u2b50\u2b50\u2b50\u2b50<\/h4>
Creating the demo app<\/h2>\n\n\n\n
<Window\n x:Class=\"WinUIApp.MainWindow\"\n xmlns=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\/presentation\"\n xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\"\n xmlns:local=\"using:WinUIApp\"\n xmlns:d=\"http:\/\/schemas.microsoft.com\/expression\/blend\/2008\"\n xmlns:mc=\"http:\/\/schemas.openxmlformats.org\/markup-compatibility\/2006\"\n mc:Ignorable=\"d\">\n\n <Grid Margin=\"10\">\n <Grid.RowDefinitions>\n <RowDefinition Height=\"Auto\" \/>\n <RowDefinition Height=\"Auto\" \/>\n <\/Grid.RowDefinitions>\n <Grid.ColumnDefinitions>\n <ColumnDefinition Width=\"Auto\" \/>\n <ColumnDefinition Width=\"*\" \/>\n <\/Grid.ColumnDefinitions>\n\n <TextBlock Grid.Column=\"0\" Grid.Row=\"0\" Text=\"Celsius\" \/>\n <TextBox Grid.Column=\"1\" Grid.Row=\"0\" Name=\"txtCelsius\"\/>\n\n <TextBlock Grid.Column=\"0\" Grid.Row=\"1\" Text=\"Fahrenheit\" \/>\n <TextBox Grid.Column=\"1\" Grid.Row=\"1\" Name=\"txtFahrenheit\"\/>\n <\/Grid>\n<\/Window>\n<\/pre>\n\n\n\n
![\"\"](\"https:\/\/mariusbancila.ro\/blog\/wp-content\/uploads\/2022\/04\/ui1-700x265.png\")
<\/a><\/figure>\n\n\n\n![\"\"](\"https:\/\/mariusbancila.ro\/blog\/wp-content\/uploads\/2022\/04\/addhandler-700x117.png\")
<\/a><\/figure>\n\n\n\n<TextBox Grid.Column=\"1\" Grid.Row=\"0\" Name=\"txtCelsius\" TextChanged=\"txtCelsius_TextChanged\"\/>\n<TextBox Grid.Column=\"1\" Grid.Row=\"1\" Name=\"txtFahrenheit\" TextChanged=\"txtFahrenheit_TextChanged\"\/><\/pre>\n\n\n\n
\/\/ --- MainWindow.xaml.h ---\nnamespace winrt::WinUIApp::implementation\n{\n struct MainWindow : MainWindowT<MainWindow>\n {\n MainWindow();\n\n int32_t MyProperty();\n void MyProperty(int32_t value);\n\n void txtCelsius_TextChanged(winrt::Windows::Foundation::IInspectable const& sender, winrt::Microsoft::UI::Xaml::Controls::TextChangedEventArgs const& e);\n void txtFahrenheit_TextChanged(winrt::Windows::Foundation::IInspectable const& sender, winrt::Microsoft::UI::Xaml::Controls::TextChangedEventArgs const& e);\n };\n}\n\n\/\/ --- MainWindow.xaml.cpp ---\nvoid winrt::WinUIApp::implementation::MainWindow::txtCelsius_TextChanged(winrt::Windows::Foundation::IInspectable const& sender, winrt::Microsoft::UI::Xaml::Controls::TextChangedEventArgs const& e)\n{\n}\n\nvoid winrt::WinUIApp::implementation::MainWindow::txtFahrenheit_TextChanged(winrt::Windows::Foundation::IInspectable const& sender, winrt::Microsoft::UI::Xaml::Controls::TextChangedEventArgs const& e)\n{\n}<\/pre>\n\n\n\nusing namespace<\/code> directives where already declared, which is also inconsistent with the rest. Moreover, the result is cluttered code. These lines are so long it’s impossible to read.<\/li><\/ul>\n\n\n\nvoid MainWindow::txtCelsius_TextChanged(IInspectable const& sender, TextChangedEventArgs const& e)\n{\n double celsius = std::stod(txtCelsius().Text().c_str());\n double fahrenheit = 32 + 1.8 * celsius;\n txtFahrenheit().Text() = std::to_wstring(fahrenheit);\n}<\/pre>\n\n\n\nmyButton().Content(box_value(L\"Clicked\"))<\/code> line? The text should probably be set with something like Text(str)<\/code>.<\/p>\n\n\n\nvoid MainWindow::txtCelsius_TextChanged(IInspectable const& sender, TextChangedEventArgs const& e)\n{\n double celsius = std::stod(txtCelsius().Text().c_str());\n double fahrenheit = 32 + 1.8 * celsius;\n txtFahrenheit().Text(std::to_wstring(fahrenheit));\n}<\/pre>\n\n\n\nvoid MainWindow::txtCelsius_TextChanged(IInspectable const& sender, TextChangedEventArgs const& e)\n{\n winrt::hstring text = txtCelsius().Text();\n if (!text.empty() && text != L\"-\")\n {\n try\n {\n double celsius = std::stod(text.c_str());\n double fahrenheit = 32 + 1.8 * celsius;\n txtFahrenheit().Text(std::to_wstring(fahrenheit));\n }\n catch(...)\n {\n txtFahrenheit().Text(L\"\");\n }\n }\n else\n {\n txtFahrenheit().Text(L\"\");\n }\n}<\/pre>\n\n\n\nC = (F - 32) \/ 1.8<\/code>. You can find the source code for the other handler in the attached zip archive.<\/p>\n\n\n\nImpression: \u2b50\u2b50\u2b50<\/h4>
Adding more features<\/h2>\n\n\n\n
<ToggleSwitch Grid.Column=\"1\" Grid.Row=\"0\" HorizontalAlignment=\"Right\"\n Name=\"toggleMode\" Header=\"Mode\" \n OnContent=\"Light\" OffContent=\"Dark\"\n IsOn=\"True\"\n Toggled=\"toggleMode_Toggled\"\/><\/pre>\n\n\n\n
Toggled<\/code> event should change the Background<\/code> and Foreground<\/code> of the window and its controls. It took me a while to figure out how to create brushes to set for the foreground and background properties of controls. The trouble is, the Brush<\/a> class in in the winrt::Microsoft::UI::Xaml::Media<\/code> namespace, while the Colors<\/a> class is in the winrt::Microsoft::UI<\/code> namespace. But there’s not all; there is also a Colors<\/a> class in the winrt::Windows::UI<\/code> namespace. And that’s what I used first. However, that’s part of UWP and it works too, except that I got some errors. But first, here is my first attempt to implement the handler:<\/p>\n\n\n\nvoid MainWindow::toggleMode_Toggled(IInspectable const& \/*sender*\/, RoutedEventArgs const& \/*e*\/)\n{\n if (!m_initialized) return;\n\n ToggleMode(toggleMode().IsOn());\n}\n\nvoid MainWindow::ToggleMode(bool const light)\n{\n auto bgColor = SolidColorBrush(\n light ? \n Colors::White() :\n Colors::DarkGray());\n\n auto txColor = SolidColorBrush(\n light ?\n Colors::Black() :\n Colors::White());\n\n rootGrid().Background(bgColor);\n\n txtCelsius().Background(bgColor);\n txtCelsius().Foreground(txColor);\n\n txtFahrenheit().Background(bgColor);\n txtFahrenheit().Foreground(txColor);\n\n txtFahrenheit().Background(bgColor);\n toggleMode().Foreground(txColor);\n}<\/pre>\n\n\n\nWinUIApp\\MainWindow.xaml.cpp(82,18): error C3779: 'winrt::Windows::UI::Colors::White': a function that returns 'auto' cannot be used before it is defined\nWinUIApp\\Generated Files\\winrt\\impl\\Windows.UI.2.h(172): message : see declaration of 'winrt::Windows::UI::Colors::White'\nWinUIApp\\MainWindow.xaml.cpp(83,18): error C3779: 'winrt::Windows::UI::Colors::Black': a function that returns 'auto' cannot be used before it is defined\nWinUIApp\\Generated Files\\winrt\\impl\\Windows.UI.2.h(42): message : see declaration of 'winrt::Windows::UI::Colors::Black'<\/pre>\n\n\n\n
White()<\/code> and Black()<\/code> functions could not be found. So I was missing a header. Turned out I had to include the following in pch.h<\/code>:<\/p>\n\n\n\n#include <winrt\/Windows.UI.h><\/pre>\n\n\n\n
winrt::Microsoft::UI::Xaml::Controls<\/code> namespace, then you need to include the header <winrt\/Microsoft.UI.Xaml.Controls.h><\/code>.<\/p>\n\n\n\nvoid MainWindow::ToggleMode(bool const light)\n{\n auto bgColor = SolidColorBrush(\n light ? \n Colors::White() :\n Colors::DarkGray());\n\n rootGrid().Background(bgColor);\n}<\/pre>\n\n\n\n![\"\"](\"https:\/\/mariusbancila.ro\/blog\/wp-content\/uploads\/2022\/04\/ui2.png\")
![\"\"](\"https:\/\/mariusbancila.ro\/blog\/wp-content\/uploads\/2022\/04\/ui3.png\")
<\/div><\/figure>\n\n\n\nColors<\/code> class, from UWP instead of WinUI. The change required only a swapping of namespaces, from winrt::Windows::UI<\/code> to winrt::Microsoft::UI<\/code>. Of course, this also made unnecessary the inclusion of the <winrt\/Windows.UI.h><\/code> header.<\/p>\n\n\n\nImage<\/code> object:<\/p>\n\n\n\n<Image Grid.Column=\"1\" Grid.Row=\"3\" Name=\"imageThermo\" \n HorizontalAlignment=\"Left\" Margin=\"5\"\n Width=\"48\" Height=\"48\" \/><\/pre>\n\n\n\n
void MainWindow::DisplayThermometer(std::optional<double> value)\n{\n if (!value.has_value())\n {\n ImageSource src(nullptr);\n imageThermo().Source(src);\n }\n else\n {\n BitmapImage img;\n Windows::Foundation::Uri uri(\n value.value() > 4 ? \n L\"ms-appx:\/\/\/Assets\/hot48.png\" : \n L\"ms-appx:\/\/\/Assets\/freezing48.png\");\n img.UriSource(uri);\n\n imageThermo().Source(img);\n }\n}<\/pre>\n\n\n\nvoid MainWindow::txtCelsius_TextChanged(IInspectable const& \/*sender*\/, TextChangedEventArgs const& \/*e*\/)\n{\n winrt::hstring text = txtCelsius().Text();\n if (!text.empty() && text != L\"-\")\n {\n try\n {\n double celsius = std::stod(text.c_str());\n double fahrenheit = 32 + 1.8 * celsius;\n txtFahrenheit().Text(std::to_wstring(fahrenheit));\n\n DisplayThermometer(celsius);\n }\n catch(...)\n {\n txtFahrenheit().Text(L\"\");\n DisplayThermometer({});\n }\n }\n else\n {\n txtFahrenheit().Text(L\"\");\n DisplayThermometer({});\n }\n}<\/pre>\n\n\n\n![\"\"](\"https:\/\/mariusbancila.ro\/blog\/wp-content\/uploads\/2022\/04\/ui4.png\")
![\"\"](\"https:\/\/mariusbancila.ro\/blog\/wp-content\/uploads\/2022\/04\/ui6.png\")
<\/div><\/figure>\n\n\n\nImpression: \u2b50\u2b50<\/h4>
Final words<\/h2>\n\n\n\n