{"id":15059822,"url":"https://github.com/ho-cooh/winuiessentials","last_synced_at":"2026-06-15T16:00:41.677Z","repository":{"id":287601541,"uuid":"818551886","full_name":"HO-COOH/WinUIEssentials","owner":"HO-COOH","description":"C++ programmer is not part of windows community therefore cannot use the windows community toolkit. So I made one for C++. QQ讨论群：479734355","archived":false,"fork":false,"pushed_at":"2026-06-05T12:29:19.000Z","size":47835,"stargazers_count":46,"open_issues_count":8,"forks_count":9,"subscribers_count":2,"default_branch":"master","last_synced_at":"2026-06-05T14:15:01.329Z","etag":null,"topics":["cpp20","cppwinrt","uwp","winui2","winui3"],"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/HO-COOH.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-06-22T06:37:22.000Z","updated_at":"2026-06-03T17:19:56.000Z","dependencies_parsed_at":null,"dependency_job_id":"c13f07f8-76e3-43f4-acad-e17d27c262aa","html_url":"https://github.com/HO-COOH/WinUIEssentials","commit_stats":null,"previous_names":["ho-cooh/winuiessentials"],"tags_count":115,"template":false,"template_full_name":null,"purl":"pkg:github/HO-COOH/WinUIEssentials","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HO-COOH%2FWinUIEssentials","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HO-COOH%2FWinUIEssentials/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HO-COOH%2FWinUIEssentials/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HO-COOH%2FWinUIEssentials/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HO-COOH","download_url":"https://codeload.github.com/HO-COOH/WinUIEssentials/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HO-COOH%2FWinUIEssentials/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34369850,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-15T02:00:07.085Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["cpp20","cppwinrt","uwp","winui2","winui3"],"created_at":"2024-09-24T22:48:20.391Z","updated_at":"2026-06-15T16:00:41.669Z","avatar_url":"https://github.com/HO-COOH.png","language":"C++","funding_links":[],"categories":[],"sub_categories":[],"readme":"![](MainLogo.png) \n# WinUI Essentials\nA repo dedicated for simplifying C++ development with WinUI2 (Universal Windows Platform) and WinUI3 (Windows App SDK).\n\n## Nuget\n\nFor UWP: [![](https://img.shields.io/nuget/v/WinUIEssential.UWP?label=WinUIEssential.UWP)](https://www.nuget.org/packages/WinUIEssential.UWP)\n\nFor WinUI3 (Windows App SDK): [![](https://img.shields.io/nuget/v/WinUIEssential.WinUI3?label=WinUIEssential.WinUI3)](https://www.nuget.org/packages/WinUIEssential.WinUI3)\n\nWinUI3 Svg: [![](https://img.shields.io/nuget/v/WinUIEssential.WinUI3.Svg?label=WinUIEssential.WinUI3.Svg)](https://www.nuget.org/packages/WinUIEssential.WinUI3.Svg)\n\n\n## Example Gallery\n[Download from Microsoft Store!](https://apps.microsoft.com/detail/9PCC690BCMT9?hl=en-us\u0026gl=US\u0026ocid=pdpshare)\n\n\n\u003ca href=\"https://apps.microsoft.com/detail/9pcc690bcmt9?referrer=appbadge\u0026mode=direct\"\u003e\n\t\u003cimg src=\"https://get.microsoft.com/images/en-us%20dark.svg\" width=\"200\"/\u003e\n\u003c/a\u003e\n\n---\nExample project build status:\n\n|Platform|Debug|Release|\n|---|---|---|\n|x86| [![Build Debug x86](https://github.com/HO-COOH/WinUIEssentials/actions/workflows/build-debug-x86.yml/badge.svg)](https://github.com/HO-COOH/WinUIEssentials/actions/workflows/build-debug-x86.yml) | [![Build Release x86](https://github.com/HO-COOH/WinUIEssentials/actions/workflows/build-release-x86.yml/badge.svg)](https://github.com/HO-COOH/WinUIEssentials/actions/workflows/build-release-x86.yml)\n|x64| [![Build Debug x64](https://github.com/HO-COOH/WinUIEssentials/actions/workflows/build-debug-x64.yml/badge.svg)](https://github.com/HO-COOH/WinUIEssentials/actions/workflows/build-debug-x64.yml) | [![Build Release x64](https://github.com/HO-COOH/WinUIEssentials/actions/workflows/build-release-x64.yml/badge.svg)](https://github.com/HO-COOH/WinUIEssentials/actions/workflows/build-release-x64.yml)\n|~~ARM~~| ~~[![Build Debug ARM](https://github.com/HO-COOH/WinUIEssentials/actions/workflows/build.yml/badge.svg?job=build%20(Debug_CI2,%20ARM))](https://github.com/HO-COOH/WinUIEssentials/actions/workflows/build.yml)~~ | ~~[![Build Release ARM](https://github.com/HO-COOH/WinUIEssentials/actions/workflows/build.yml/badge.svg?job=build%20(Release_CI2,%20ARM))](https://github.com/HO-COOH/WinUIEssentials/actions/workflows/build.yml)~~\n|ARM64| [![Build Debug ARM64](https://github.com/HO-COOH/WinUIEssentials/actions/workflows/build-debug-arm64.yml/badge.svg)](https://github.com/HO-COOH/WinUIEssentials/actions/workflows/build-debug-arm64.yml) | [![Build Release ARM64](https://github.com/HO-COOH/WinUIEssentials/actions/workflows/build-release-arm64.yml/badge.svg)](https://github.com/HO-COOH/WinUIEssentials/actions/workflows/build-release-arm64.yml)\n\n\n## Usage\n\u003e [!NOTE]\n\u003e Update since WinEssential.WinUI3 1.5, you do NOT need to add control resources in `Application.Resources`!\n\n\n\u003e [!WARNING]\n\u003e Make sure to set your C++ language version to C++20 first!\n\nOpen the `WinUIEssential.sln` containing 4 projects:\n- UWPPackage (project for WinUIEssential.UWP nuget package)\n- UWPExample (example gallery for using the above package)\n- WinUI3Package (project for WinUIEssential.WinUI3 nuget package)\n- WinUI3Example (example gallery for using the above package)\n\nBuild the `*Package` project will build the project and pack it with nuget, then install the nuget to your project and start using it.\n\nTo build the `*Example` project, do the same thing. They did not reference `*Package` for demo purposes.\n\n\u003e [!NOTE]\n\u003e Functionalities for UWP and WinUI3 should be exactly the same unless otherwise noted!\n\nIt should be useful until the [community toolkit](https://github.com/CommunityToolkit/WindowsCommunityToolkit) provides C++.\n\n-----\n## Build and contribute\n### Build requirements\n- You need to have [vcpkg](https://vcpkg.io/en/) installed and integrate setup for msbuild. See [this documentation for guide](https://learn.microsoft.com/en-us/vcpkg/get_started/get-started-msbuild?pivots=shell-powershell).\n- You need to have Visual Studio **2026** with `Desktop development with C++` and `WinUI Application development` workload installed. (2022 will NOT work, as we are using the `v145` C++ tools)\n- You need to build both `Debug` and `Release` build to successfully build and debug the example project (**this is intentional for not missing debug version of the package**)\n- \u003e= Windows 10 17763 (Actually I mostly use Windows 10 17763 to ensure compatibility that WinUI3 claims to support)\n\nYou can reference Github Action for detailed build steps.\n\n\n### Contribute a new templated control\n0. **DO NOT submit a PR that's purely AI written WITHOUT your reviewing.** I will **NOT** review it.\n1. If it is a templated control, create a control with the `ViewModel` file template and a `ResourceDictionary` xaml file\n2. Add an entry in the `WinUIEssential.WinU3.targets` so that the `.xbf` file is properly copied (see that file for example) \n3. Please also consider adding a demo page for the control, and add it to `MainWindow.xaml.h` `MainWindow::s_page` (see the file for example)\n\n-----\n## Content\n|Component|UWP|WinUI3|Type\n|--|--|--|--|\n|WinUIIncludes| :white_check_mark: | :x: | Header only\n|TemplateControlHelper| :white_check_mark: | :white_check_mark: | Header only\n|BadgeGlyphs| :white_check_mark: | :white_check_mark: | Header only\n|ToastTemplates| :white_check_mark: | :white_check_mark: | Header only\n|ToastBuilder | :white_check_mark: | :white_check_mark: | Header only\n|TileTemplates| :white_check_mark: | :white_check_mark: | Header only\n|TileBuilder | :white_check_mark: | :white_check_mark: | Header only\n|CursorController | :white_check_mark: | :white_check_mark: | WinRT component\n|PropertyChangeHelper | :white_check_mark: | :white_check_mark: | Header only\n|NegateBoolConverter | :white_check_mark: | :white_check_mark: | WinRT component\n|BoolToVisibilityConverter | :white_check_mark: | :white_check_mark: | WinRT component\n|ContainerToBoolConverter | :white_check_mark: | :white_check_mark: | WinRT component\n|StringToBoolConverter | :white_check_mark: | :white_check_mark: | WinRT component\n|ReferenceToBoolConverter | :white_check_mark: | :white_check_mark: | WinRT component\n|ConverterGroup | :white_check_mark: | :white_check_mark: | WinRT component\n|Convert | :white_check_mark: | :white_check_mark: | WinRT component\n|IsEqualStringTrigger| :white_check_mark: | :white_check_mark: | WinRT component\n|IsNullOrEmptyStateTrigger | :white_check_mark: | :white_check_mark: | WinRT component\n|ControlSizeTrigger | :white_check_mark: | :white_check_mark: | WinRT component\n|CharmBar | :white_check_mark: | :x: | WinRT component\n|GroupBox | :white_check_mark: | :white_check_mark: | Control\n|SettingsCard | :white_check_mark: | :white_check_mark:* | Control\n|SettingsExpander | :white_check_mark: | :white_check_mark:* | Control\n|FontIconExtension | :white_check_mark: | :white_check_mark: | WinRT component\n|DependentValue| :white_check_mark: | :white_check_mark: | WinRT component\n|Taskbar| :x: | :white_check_mark: | Header only\n|MarqueeText | :white_check_mark: | :white_check_mark: | Control\n|ProgressBarEx | :white_check_mark: | :white_check_mark: | Control\n|WindowEx | :x: | :white_check_mark: | Window\n|TransparentBackdrop | :x: | :white_check_mark: | SystemBackdrop\n|Segmented | :white_check_mark: | :white_check_mark: | Control\n|CustomMicaBackdrop | :x: | :white_check_mark: | Backdrop\n|CustomAcrylicBackdrop | :x: | :white_check_mark: | Backdrop\n|Shimmer | :white_check_mark: | :white_check_mark: | Control\n|ImageExtension | :white_check_mark: | :white_check_mark: | WinRT component\n|SwitchPresenter | :white_check_mark: | :white_check_mark: | Control\n|ModernStandardWindowContextMenu| :x: | * :white_check_mark: | WinRT component\n|WindowContextMenu | :x: | :white_check_mark: | WinRT component\n|NonResizableWindowWhiteBorderWorkaround | :x: | :white_check_mark: | WinRT component\n|ComboBoxHelper | :x: | :white_check_mark: | WinRT component\n|AutoSuggestBoxHelper | :x: | :white_check_mark: | WinRT component\n|WrapPanel | :white_check_mark: | :white_check_mark: | Panel\n|ToolTipHelper | :x: | :white_check_mark: | WinRT component\n|CommandBarHelper | :x: | :white_check_mark: | WinRT component\n|IInitializeWithWindowHelper | :x: | :white_check_mark: | Header only\n|WindowCaptionButtonThemeWorkaround | :x: | :white_check_mark: | WinRT component\n|MicaBackdropWithFallback | :x: | :white_check_mark: | WinRT component\n|NonMaximizableWindowWorkaround | :x: | :white_check_mark: | WinRT component\n|DatePickerHelper | :x: | :white_check_mark: | WinRT component\n|TimePickerHelper | :x: | :white_check_mark: | WinRT component\n|FlyoutHelper | :x: | :white_check_mark: | WinRT component\n|CalendarDatePickerHelper | :x: | :white_check_mark: | WinRT component\n|ModalWindow | :x: | :white_check_mark: | WinRT component\n|NavigationViewHelper | :x: | :white_check_mark: | WinRT component\n|SliderHelper | :x: | :white_check_mark: | WinRT component\n|RevealFocusPanel | :x: | :white_check_mark: | Control\n|TenMica | :x: | :white_check_mark: | WinRT component\n|WindowedContentDialog | :x: | :white_check_mark: | Control\n|SvgImageSource | :x: | :white_check_mark: | WinRT component\n\n*means additional settings required, see the sections for info\n\n---\n## WinUIIncludes\nInclude the WinUI2 headers in your `pch.h`, so you don't waste your time figuring out where the compilation error comming from./\n\nUsage:\nAdd this in your `pch.h`\n```cpp\n#include \u003cWinUIIncludes.hpp\u003e\n```\n\n## TemplateControlHelper\nAutomatically call `DefaultStyleKey()` for your templated control so you don't waste your time when you forget to include this line and get an empty control.\n\nUsage: Inherit this class in your header file, make the template argument your **implementation type**.\n```cpp\n#include \u003cTemplateControlHelper.hpp\u003e\n...\nstruct MyControl : MyControlT\u003cMyControl\u003e, TemplateControlHelper\u003cMyControl\u003e\n{\n    ...\n};\n```\n\n## ToastHelper\nHelper for creating toast notifications.\n\n### ToastTemplates --- *namespace `ToastTemplates`*\nThe [built-in templates](https://learn.microsoft.com/en-us/uwp/api/windows.ui.notifications.toasttemplatetype?view=winrt-22621) re-written to strongly-typed classes that derived from `winrt::Windows::UI::Notification::ToastNotification`, so that you can directly use them as arguments for`winrt::Windows::UI::Notifications::ToastNotificationManager`. Example usage:\n```cpp\n#include \u003cToastTemplates.hpp\u003e\nwinrt::Windows::UI::Notifications::ToastNotificationManager::CreateToastNotifier()\n    .Show(ToastTemplates::ImageWithHeaderAndBody{ L\"ms-appx:///Assets/Windows 11.png\", L\"Header\", L\"body\" });\n//alternatively use Microsoft's template name\nwinrt::Windows::UI::Notifications::ToastNotificationManager::CreateToastNotifier()\n    .Show(ToastTemplates::ToastImageAndText02{ L\"ms-appx:///Assets/Windows 11.png\", L\"Header\", L\"body\" });\n```\n\n|Type|Template Name(which can also be used as type)|Sample|\n|--|--|--|\n|`BodyTextOnly`| `ToastText01` | ![](https://learn.microsoft.com/en-us/uwp/api/windows.ui.notifications/images/toast_1.png?view=winrt-22621)\n|`SingleLineHeaderWithBody`| `ToastText02`| ![](https://learn.microsoft.com/en-us/uwp/api/windows.ui.notifications/images/toast_2.png?view=winrt-22621)\n|`TwoLineHeaderWithBody`| `ToastText03`| ![](https://learn.microsoft.com/en-us/uwp/api/windows.ui.notifications/images/toast_4.png?view=winrt-22621)\n|`HeaderWithTwoSingleLineBody`| `ToastText04`| ![](https://learn.microsoft.com/en-us/uwp/api/windows.ui.notifications/images/toast_5.png?view=winrt-22621)\n|`ImageWithBodyOnly`| `ToastImageAndText01`| ![](https://learn.microsoft.com/en-us/uwp/api/windows.ui.notifications/images/toast_6.png?view=winrt-22621)\n|`ImageWithHeaderAndBody`| `ToastImageAndText02`| ![](https://learn.microsoft.com/en-us/uwp/api/windows.ui.notifications/images/toast_7.png?view=winrt-22621)\n|`ImageWithTwoLineHeaderAndBody`| `ToastImageAndText03`| ![](https://learn.microsoft.com/en-us/uwp/api/windows.ui.notifications/images/toast_8.png?view=winrt-22621)\n|`ImageWithHeaderAndTwoSingleLineBody`| `ToastImageAndText04`| ![](https://learn.microsoft.com/en-us/uwp/api/windows.ui.notifications/images/toastimageandtext04.png?view=winrt-22621)\n\n### ToastBuilder --- *namespace `ToastBuilder`*\nStrongly-typed, declarative toast notification elements to quickly build toast notifications, as if you are writing XAML. [Schema here.](https://learn.microsoft.com/en-us/uwp/schemas/tiles/toastschema/root-elements) \nExample usage:\n\u003ctable\u003e\n\u003ctr\u003e\n    \u003ctd\u003eXML\u003c/td\u003e \u003ctd\u003eC++\u003c/td\u003e\n\u003ctr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n\n```xml\n\u003ctoast duration=\"long\" scenario=\"reminder\" useButtonStyle=\"true\"\u003e\n    \u003cvisual\u003e\n        \u003cbinding template=\"ToastText04\"\u003e\n            \u003ctext id=\"1\"\u003eheadline\u003c/text\u003e\n            \u003ctext id=\"2\"\u003ebody text1\u003c/text\u003e\n            \u003ctext id=\"3\"\u003ebody text2\u003c/text\u003e\n        \u003c/binding\u003e\n    \u003c/visual\u003e\n    \u003cactions\u003e\n        \u003caction content=\"Accept\" arguments=\"accept\"/\u003e\n    \u003c/actions\u003e\n\u003c/toast\u003e\n```\n\u003c/td\u003e\n\u003ctd\u003e\n\n```cpp\nToast().Duration(Long).Scenario(Reminder).UseButtonStyle(true)\n(\n    Visual()\n    (\n        Binding().Template(L\"ToastText04\")\n        (\n            Text().Id(1)(L\"headline\"),\n            Text().Id(2)(L\"body text1\"),\n            Text().Id(3)(L\"body text2\")\n        )\n    ),\n    Actions()\n    (\n        Action().Content(L\"Accept\").Arguments(L\"accept\")\n    )\n)\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n\n`\u003ctag\u003e...content...\u003c/tag\u003e`\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n`Tag()(...content...)`\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n\n`attribute=\"value\"`\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n`.Attribute(value)`\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctable\u003e\n\nOptionally add a handler to `Action` so you can handle toast notification button click right on site. For more info, see the comment documentation.\n```cpp\nActions()\n(\n    Action().Content(L\"Accept\").Arguments(L\"accept\")\n    .Click([this](winrt::Windows::ApplicationModel::Activation::ToastNotificationActivatedEventArgs args)\n    {\n        //Handle Accept button\n    }),\n    Action().Content(L\"Cancel\").Arguments(L\"cancel\")\n    .Click([this](winrt::Windows::ApplicationModel::Activation::ToastNotificationActivatedEventArgs args)\n    {\n        //Handle Cancel button\n    })\n)\n```\n\n## TileTemplates --- *namespace `TileTemplates`*\nSimilar to [ToastTemplates](#ToastHelper), but for strongly-typed tile templates.\n\n## TileBuilder --- *namespace `TileBuilder`*\nSimilar to [ToastBuilder](#ToastHelper), but for building tiles.\n\n## Glphys --- *namespace `Glyphs`*\nFont glyphs value for Segoe MDL2 Assets fonts. Usage:\n```cpp\n#include \u003cGlyphs.hpp\u003e\nFontIcon().Glyph(Glyphs::GlobalNavButton);\n```\n\n## CursorController --- *namespace `CursorController`*\nXaml helper for controlling the cursor type when mouse enters. \nValue for `Type` is [CoreCursorType enum](https://learn.microsoft.com/en-us/uwp/api/windows.ui.core.corecursortype?view=winrt-22621). Usage:\n```xml\nxmlns:essential=\"using:WinUI3Package\"\n...\n\u003cRectangle Fill=\"Red\" essential:CursorController.Type=\"Hand\"/\u003e\n```\n\n## PropertyChangeHelper --- *namespace `MvvmHelper`*\nHelper for `OneWay` binding.\n\nUsage: \n1. Inherit `Windows.UI.Xaml.Data.INotifyPropertyChanged` in `idl`\n```\n[default_interface]\nruntimeclass MyPage : Windows.UI.Xaml.Controls.Page, Windows.UI.Xaml.Data.INotifyPropertyChanged\n{\n    ...\n};\n```\n\n2. Inherit from this class in the implementation class.\n```cpp\n/*MyPage.xaml.h*/\n#include \u003cinclude/PropertyChangeHelper.hpp\u003e\n\nnamespace winrt::\u003cMyProject\u003e::implementation\n{\n    struct MyPage : MyMusicT\u003cMyMusic\u003e, MvvmHelper::PropertyChangeHelper\u003cMyMusic\u003e\n    {\n        int m_value;\n        void Value(int newValue)\n        {\n            compareAndRaise(m_value, newValue, L\"Value\");\n        };\n    }\n}\n```\n\n## Converters\n- bool -\u003e Visibility *namespace `BoolToVisibilityConverter`*\n- bool negation *namespace `NegateBoolConverter`*\n- container (IVector, IMap) -\u003e bool *namespace `ContainerToBoolConverter`*\n- reference (any WinRT runtime type) -\u003e bool *namespace `ReferenceToBoolConverter`*\n- String -\u003e bool *namespace `StringToBoolConverter`*\n- ConverterGroups *namespace `ConverterGroups`*:\n  + define series of converters, that convert value from converter1 -\u003e converter2 -\u003e ...\n  + usage:\n  ```xml\n   \u003cessential:ConverterGroup x:Key=\"StringToVisibilityConverter\"\u003e\n       \u003cessential:StringToBoolConverter/\u003e\n       \u003cessential:BoolToVisibilityConverter/\u003e\n   \u003c/essential:ConverterGroup\u003e\n  ```\n\nAnd most of the time when you are NOT using `ConverterGroup`, you should consider using the static functions in `Convert` class.\nAll of the above converters have corresponding static functions in `Convert` that you can use with `x:Bind` directly. Here are the complete list.\n```\nruntimeclass Convert \n{\n    static Single DoubleToSingle(Double value);\n    \n    static Boolean ContainerToBool(Windows.Foundation.Collections.IVector\u003cObject\u003e container);\n    static Boolean ReferenceToBool(Object value);\n    static Boolean StringToBool(String value);\n    static Boolean VisibilityToBool(Microsoft.UI.Xaml.Visibility value);\n\n    static Boolean ContainerToBoolReverse(Windows.Foundation.Collections.IVector\u003cObject\u003e container);\n    static Boolean ReferenceToBoolReverse(Object value);\n    static Boolean StringToBoolReverse(String value);\n    static Boolean VisibilityToBoolReverse(Microsoft.UI.Xaml.Visibility value);\n\n    static Microsoft.UI.Xaml.Visibility ContainerToVisibility(Windows.Foundation.Collections.IVector\u003cObject\u003e container);\n    static Microsoft.UI.Xaml.Visibility ReferenceToVisibility(Object value);\n    static Microsoft.UI.Xaml.Visibility StringToVisibility(String value);\n    static Microsoft.UI.Xaml.Visibility BoolToVisibility(Boolean value);\n    \n    static Microsoft.UI.Xaml.Visibility ContainerToVisibilityReverse(Windows.Foundation.Collections.IVector\u003cObject\u003e container);\n    static Microsoft.UI.Xaml.Visibility ReferenceToVisibilityReverse(Object value);\n    static Microsoft.UI.Xaml.Visibility StringToVisibilityReverse(String value);\n    static Microsoft.UI.Xaml.Visibility BoolToVisibilityReverse(Boolean value);\n\n    static Boolean ReverseBool(Boolean value);\n    static Microsoft.UI.Xaml.Visibility ReverseVisibility(Microsoft.UI.Xaml.Visibility value);\n}\n```\n\n## BadgeGlyphs --- *namespace `BadgeGlyphs`*\nHelpers for creating badge notification xml.\nUsage:\n```cpp\n#include \u003cinclude/BadgeGlyphs.hpp\u003e\n\n//glyph badge\nwinrt::Windows::UI::Notifications::BadgeUpdateManager::CreateBadgeUpdaterForApplication()\n    .Update(BadgeGlyphs::MakeBadgeNotification(BadgeGlyphs::Alert));\n\n//number badge\nwinrt::Windows::UI::Notifications::BadgeUpdateManager::CreateBadgeUpdaterForApplication()\n    .Update(BadgeGlyphs::MakeBadgeNotification(1));\n```\n\n## Triggers\nSee the same class in [Community Toolkit](https://github.com/CommunityToolkit/Windows) for documentation.\n### ControlSizeTrigger --- *namespace `ControlSizeTrigger`*\n### IsEqualStringTrigger --- *namespace `IsEqualStringTrigger`*\nNote: For the reason of lacking reflection, we cannot implement `IsEqualStateTrigger\n### IsNullOrEmptyStateTrigger --- *namespace `IsNullOrEmptyStateTrigger`*\n\n## SettingsCard --- *namespace `SettingsCard`*\nSee the same class in [Community Tookit](https://github.com/CommunityToolkit/Windows) for documentation.\n- Add this to `App.xaml` (UWP)\n```xml\n\u003cApplication.Resources\u003e\n    \u003ccontrols:XamlControlsResources\u003e\n        \u003ccontrols:XamlControlsResources.MergedDictionaries\u003e\n            \u003cResourceDictionary Source=\"ms-appx:///UWPPackage/SettingsCard_Resource.xaml\"/\u003e\n            ...\n        \u003c/controls:XamlControlsResources.MergedDictionaries\u003e\n    \u003c/controls:XamlControlsResources\u003e\n\u003c/Application.Resources\u003e\n```\n\n\u003e [!NOTE]\n\u003e For WinUI3, add `#include #include \u003cwinrt/Microsoft.UI.Xaml.Controls.AnimatedVisuals.h\u003e` to your `pch.h`\n\n## SettingsExpander --- *namespace `SettingsExpander`*\nSee the same class in [Community Tookit](https://github.com/CommunityToolkit/Windows) for documentation.\n![](assets/settings-expander.png)\nAdd this to `App.xaml` (UWP)\n```xml\n\u003cApplication.Resources\u003e\n    \u003ccontrols:XamlControlsResources\u003e\n        \u003ccontrols:XamlControlsResources.MergedDictionaries\u003e\n            \u003cResourceDictionary Source=\"ms-appx:///UWPPackage/SettingsCard_Resource.xaml\"/\u003e\n            \u003cResourceDictionary Source=\"ms-appx:///UWPPackage/SettingsExpander_Resource.xaml\"/\u003e\n            ...\n        \u003c/controls:XamlControlsResources.MergedDictionaries\u003e\n    \u003c/controls:XamlControlsResources\u003e\n\u003c/Application.Resources\u003e\n```\n\n\u003e [!NOTE]\n\u003e For WinUI3, add `#include #include \u003cwinrt/Microsoft.UI.Xaml.Controls.AnimatedVisuals.h\u003e` to your `pch.h`\n\n## CharmBar\nInstalling this nuget ~~will automatically add `Desktop Extension` to your UWP project~~ \n**then add a `      \u003cWinUIEssentialAddDesktopExtension\u003etrue\u003c/WinUIEssentialAddDesktopExtension\u003e` under `PropertyGroup` node in your `vcxproj` file**\n\nso  you can use the good-ol Windows 8 style charm bar. This package further simplifies it's usage by allowing you to directly define local and global settings, directly in XAML containing UI element.\n\n- Define a global setting in resource section, with `SettingsPaneEx.Settings`\n```xml\n\u003cApplication.Resources\u003e\n    \u003cResourceDictionary\u003e\n        \u003cessential:SettingsPaneEx.Settings\u003e\n            \u003c!--SettingsCommandEx items--\u003e\n            \u003cessential:SettingsCommandEx Id=\"Item1\" Label=\"Item123\"\u003e\n                \u003cStackPanel\u003e\n                    \u003cTextBlock Text=\"Text1 in item1\"/\u003e\n                    \u003cTextBlock Text=\"Text2 in item1\"/\u003e\n                \u003c/StackPanel\u003e\n            \u003c/essential:SettingsCommandEx\u003e=\n            \u003cessential:SettingsCommandEx Id=\"Item2\" Label=\"Item456\"\u003e\n                \u003cStackPanel\u003e\n                    \u003cTextBlock Text=\"Text3 in item2\"/\u003e\n                    \u003cTextBlock Text=\"Text4 in item2\"/\u003e\n                \u003c/StackPanel\u003e\n            \u003c/essential:SettingsCommandEx\u003e\n        \u003c/essential:SettingsPaneEx.Settings\u003e\n    \u003c/ResourceDictionary\u003e\n\u003c/Application.Resources\u003e\n```\n![](assets/global-settings.png)\n- Define local settings, where you put instance of `SettingsPaneEx` directly in UI as any other xaml controls.\n```xml\n\u003cPage\n    ...\n\u003e\n    \u003cStackPanel Orientation=\"Horizontal\" HorizontalAlignment=\"Center\" VerticalAlignment=\"Center\"\u003e\n        \u003cessential:SettingsPaneEx x:Name=\"LocalSettings\"\u003e\n            \u003c!--SettingsCommandEx items--\u003e\n            ...\n        \u003c/essential:SettingsPaneEx\u003e\n    \u003c/StackPanel\u003e\n\u003c/Page\u003e\n```\n![](assets/local-settings.png)\n\nDefine keyboard shortcuts with `SettingsPaneEx.KeyboardAccelerator` property.\n```\n\u003cessential:SettingsPaneEx.KeyboardAccelerator\u003e\n    \u003cKeyboardAccelerator Modifiers=\"Control\" Key=\"s\"/\u003e \u003c!-- Ctrl+S to open settings --\u003e\n\u003c/essential:SettingsPaneEx.KeyboardAccelerator\u003e\n```\n## DependentValue ---*namespace `DependentValue`*\nA wrapper around a `double` which you can target to with a `Storyboard` and `DoubleAnimation`, and get value out of it. Value is accessed by `.Value` property, which is a `DependencyProperty`, so you can do a `OneWay` binding to it or listen for value change notification.\n\n\u003e [!NOTE]\n\u003e Remember to set `EnableDependentAnimation=\"True\"` to make it work!\n\nUsage:\n```xml\n\u003cPage.Resources\u003e\n    \u003cessential:DependentValue x:Name=\"MyDoubleValue\"/\u003e\n    \u003cStoryboard x:Name=\"DoubleValueAnimation\"\u003e\n        \u003cDoubleAnimation  \n            From=\"0\"\n            To=\"100\"\n            Storyboard.TargetName=\"MyDoubleValue\"\n            Storyboard.TargetProperty=\"Value\"\n            EnableDependentAnimation=\"True\"/\u003e\n    \u003c/Storyboard\u003e\n\u003c/Page.Resources\u003e\n\n\u003cStackPanel Orientation=\"Horizontal\" HorizontalAlignment=\"Center\" VerticalAlignment=\"Center\"\u003e\n    \u003cButton Click=\"ClickHandler\"\u003eClick to start storyboard\u003c/Button\u003e\n    \u003cTextBlock Text=\"{x:Bind MyDoubleValue.Value, Mode=OneWay}\"/\u003e\n\u003c/StackPanel\u003e\n```\n\n## Taskbar --- *namespace `Taskbar`*\nHelper for setting taskbar status and progress. Usage:\n```cpp\n//Set taskbar status\nTaskbar::SetProgressState(hwnd, Taskbar::ProgressState::Normal);\n//Set taskbar progress value \nTaskbar::SetProgressValue(hwnd, 50); //a third optional parameter for total, default -\u003e 100\n```\n\n## MarqueeText --- *namespace `MarqueeText`*\nEnhanced version of `MarqueeText` in the community toolkit.\n![](assets/marquee-text.png)\n\n\n## ProgressBarEx --- *namespace `ProgressBarEx`*\nA progress bar with animated highlight colors (and animated progress). Default to vista-like styles but also allows you to customize its color.\n\n|Property| DependencyProperty? | Description\n|---|---|---|\n|HighColor | :white_check_mark: | the shimmer highlight color\n|BaseColor | :white_check_mark: | the base background color of the finish part\n|Background | :white_check_mark: | the color of the rest part\n|Percent | :white_check_mark: | range: 0~100 \n|Value | :white_check_mark: | normalized percent, range: 0.0~1.0\n\n![](assets/progressbarex.gif)\nAdd this to `App.xaml` (UWP)\n```xml\n\u003cApplication.Resources\u003e\n    \u003ccontrols:XamlControlsResources\u003e\n        \u003ccontrols:XamlControlsResources.MergedDictionaries\u003e\n            \u003cResourceDictionary Source=\"ms-appx:///Glyphs.xaml\"/\u003e\n            ...\n        \u003c/controls:XamlControlsResources.MergedDictionaries\u003e\n    \u003c/controls:XamlControlsResources\u003e\n\u003c/Application.Resources\u003e\n```\n\n## WindowEx --- *namespace `WindowEx`*\n### Basic Property\n|name|Description\n|---|---|\n|Int32 MinWidth;|Minimum width in DIP\n|Int32 MaxWidth;|Maximum width in DIP\n|Int32 MinHeight;|...\n|Int32 MaxHeight;|...\n|Int32 Width;|...\n|Int32 Height;|...\n|Int32 RawWidth;|Actual width in pixel\n|Int32 RawHeight;|Actual height in pixel\n|UInt32 Dpi{ get; };|Current window dpi\n|Boolean IsMinimizable;|...\n|Boolean IsMaximizable;|...\n|Boolean HasBorder;|...\n|Boolean HasTitleBar;|...\n|Boolean IsResizable;|...\n|Boolean IsAlwaysOnTop;|...\n|Boolean IsShownInSwitcher;|...\n|Boolean TitleBarDarkMode;| Set win32 titlebar to dark mode (support down to Windows 10 17763)\n|Boolean TitleBarAutoDarkMode;| Enable automatic titlebar dark mode (support down to Windows 10 17763), works regardless of `ExtendContentIntoTitleBar`\n|Microsoft.UI.Xaml.UIElement TitleBar;| Custom title bar, if set, automatically calls `ExtendContentIntoTitleBar` for you\n|String Icon;| Set `.ico` icon used for win32 titlebar\n\n### Extensions\n`WindowEx.NonClientRegionKind`: is an attached `DependencyProperty` used when customizing a title bar, automatically calculate and update `InputNonClientPointerSource` for you when the control size changed.\n\n\nUsage:\n```xml\n\u003cGrid x:Name=\"AppTitleBar\"\u003e\n    \u003cGrid.ColumnDefinitions\u003e\n        \u003cColumnDefinition x:Name=\"LeftPaddingColumn\" Width=\"10\" /\u003e\n        \u003cColumnDefinition x:Name=\"IconColumn\" Width=\"Auto\" /\u003e\n        \u003cColumnDefinition x:Name=\"TitleColumn\" Width=\"Auto\" /\u003e\n        \u003cColumnDefinition x:Name=\"LeftDragColumn\" Width=\"*\" /\u003e\n        \u003cColumnDefinition\n            x:Name=\"SearchColumn\"\n            Width=\"4*\"\n            MinWidth=\"220\" /\u003e\n        \u003cColumnDefinition\n            x:Name=\"RightDragColumn\"\n            Width=\"*\"\n            MinWidth=\"48\" /\u003e\n        \u003cColumnDefinition x:Name=\"AccountColumn\" Width=\"Auto\" /\u003e\n        \u003cColumnDefinition Width=\"140\" /\u003e\n    \u003c/Grid.ColumnDefinitions\u003e\n    \u003cImage\n        x:Name=\"TitleBarIcon\"\n        Grid.Column=\"1\"\n        Width=\"16\"\n        Height=\"16\"\n        Margin=\"8,0,16,0\"\n        Source=\"ms-appx:///Assets/StoreLogo.png\" /\u003e\n    \u003cTextBlock\n        x:Name=\"TitleBarTextBlock\"\n        Grid.Column=\"2\"\n        VerticalAlignment=\"Center\"\n        Style=\"{StaticResource CaptionTextBlockStyle}\"\n        Text=\"App title\" /\u003e\n    \u003cAutoSuggestBox\n        x:Name=\"TitleBarSearchBox\"\n        Grid.Column=\"4\"\n        MaxWidth=\"600\"\n        VerticalAlignment=\"Center\"\n        essential:WindowEx.NonClientRegionKind=\"Passthrough\"\n        PlaceholderText=\"Search\"\n        QueryIcon=\"Find\" /\u003e\n    \u003cStackPanel\n        Grid.Column=\"6\"\n        Margin=\"0,0,16,0\"\n        essential:WindowEx.NonClientRegionKind=\"Passthrough\"\n        Orientation=\"Horizontal\"\n        Spacing=\"10\"\u003e\n        \u003cToggleButton\u003eButton on titlebar\u003c/ToggleButton\u003e\n        \u003cPersonPicture\n            x:Name=\"PersonPic\"\n            Height=\"32\"\n            PointerPressed=\"PersonPic_PointerPressed\"\u003e\n            \u003cPersonPicture.ContextFlyout\u003e\n                \u003cMenuFlyout x:Name=\"PersonPicMenu\"\u003e\n                    \u003cMenuFlyoutItem Text=\"Settings\" /\u003e\n                    \u003cMenuFlyoutSeparator /\u003e\n                    \u003cMenuFlyoutItem Text=\"About Me\" /\u003e\n                \u003c/MenuFlyout\u003e\n            \u003c/PersonPicture.ContextFlyout\u003e\n        \u003c/PersonPicture\u003e\n    \u003c/StackPanel\u003e\n\u003c/Grid\u003e\n```\n\n## TransparentBackdrop --- *namespace `TransparentBackdrop*\nMake your `WindowEx` fully transparent.\n```xml\n\u003cessential:WindowEx\n    ...\n    \u003cessential:WindowEx.SystemBackdrop\u003e\n        \u003cessential:TransparentBackdrop/\u003e\n    \u003cessential:WindowEx.SystemBackdrop\u003e\n\u003c/essential:WindowEx\u003e\n```\n![](assets/transparent-window.png)\n\n- left: ExtendContentIntoTitleBar\n- right: Win32 Titlebar\n\n## UIElementExtension --- *namespace `UIElementExtension`*\nSee the same class in [Community Toolkit](https://github.com/CommunityToolkit/Windows) for documentation.\nUsage:\n```xml\n\u003cGrid Width=\"148\"\n    Height=\"148\"\n    essential:UIElementExtension.ClipToBounds=\"True\"\n    .../\u003e\n```\n\n## Segmented --- *namespace `Segmented`*\nAlmost like the `Segmented` control in [Community Toolkit](https://github.com/CommunityToolkit/Windows) but with more customizations.\n\n- Animated selected-item transition\n![](assets/segmented-item-animation.gif)\n- Does not limited to `Icon + Text`. Use any UIElement\n```xml\n\u003cessential:SegmentedItem\u003e\n    \u003cStackPanel Orientation=\"Horizontal\"\u003e\n        \u003cFontIcon Glyph=\"\u0026#xE8C0;\"/\u003e\n        \u003cTextBlock Text=\"Week\"/\u003e\n    \u003c/StackPanel\u003e\n\u003c/essential:SegmentedItem\u003e\n```\n- Button style has 0 size margin\n```xml\n\u003cessential:Segmented Style=\"{StaticResource ButtonSegmentedStyle}\"\u003e\n    \u003cessential:SegmentedItem\u003e\n        \u003cStackPanel Orientation=\"Horizontal\" Spacing=\"4\"\u003e\n            \u003cFontIcon Glyph=\"\u0026#xE8BF;\"/\u003e\n            \u003cTextBlock Text=\"Day\"/\u003e\n        \u003c/StackPanel\u003e\n    \u003c/essential:SegmentedItem\u003e\n    \u003cessential:SegmentedItem\u003e\n        \u003cStackPanel Orientation=\"Horizontal\" Spacing=\"4\"\u003e\n            \u003cFontIcon Glyph=\"\u0026#xE8C0;\"/\u003e\n            \u003cTextBlock Text=\"Week\"/\u003e\n        \u003c/StackPanel\u003e\n    \u003c/essential:SegmentedItem\u003e\n    \u003cessential:SegmentedItem\u003e\n        \u003cStackPanel Orientation=\"Horizontal\" Spacing=\"4}\"\u003e\n            \u003cFontIcon Glyph=\"\u0026#xE787;\"/\u003e\n            \u003cTextBlock Text=\"Month\"/\u003e\n        \u003c/StackPanel\u003e\n    \u003c/essential:SegmentedItem\u003e\n\u003c/essential:Segmented\u003e\n```\n![](assets/button-style-segmented.png)\n- Support vertical layout\n```xml\n\u003cessential:Segmented\u003e\n    \u003cessential:SegmentedItem\u003e\n        \u003cStackPanel Orientation=\"Horizontal\" Spacing=\"7\"\u003e\n            \u003cSymbolIcon Symbol=\"Accept\"/\u003e\n            \u003cTextBlock Text=\"Content1\"/\u003e\n        \u003c/StackPanel\u003e\n    \u003c/essential:SegmentedItem\u003e\n\n    \u003cessential:SegmentedItem\u003e\n        \u003cStackPanel Orientation=\"Horizontal\" Spacing=\"7\"\u003e\n            \u003cSymbolIcon Symbol=\"Add\"/\u003e\n            \u003cTextBlock Text=\"Content2\"/\u003e\n        \u003c/StackPanel\u003e\n    \u003c/essential:SegmentedItem\u003e\n\n    \u003cessential:SegmentedItem\u003e\n        \u003cStackPanel Orientation=\"Horizontal\" Spacing=\"7\"\u003e\n            \u003cSymbolIcon Symbol=\"Admin\"/\u003e\n            \u003cStackPanel Orientation=\"Vertical\"\u003e\n                \u003cTextBlock Text=\"Content longerrrrrrrrrr\"/\u003e\n                \u003cTextBlock Text=\"Content 2nd line\"/\u003e\n            \u003c/StackPanel\u003e\n        \u003c/StackPanel\u003e\n    \u003c/essential:SegmentedItem\u003e\n\n    \u003cessential:Segmented.ItemsPanel\u003e\n        \u003cItemsPanelTemplate\u003e\n            \u003cStackPanel Orientation=\"Vertical\"/\u003e\n        \u003c/ItemsPanelTemplate\u003e\n    \u003c/essential:Segmented.ItemsPanel\u003e\n\u003c/essential:Segmented\u003e\n```\n- Allow reordering items\n```xml\n\u003cessential:Segmented CanReorderItems=\"True\" AllowDrop=\"True\"\n    ...\n```\n\nUsage:\n- Add this to `App.xaml` (UWP)\n```xml\n\u003cApplication.Resources\u003e\n    \u003ccontrols:XamlControlsResources\u003e\n        \u003ccontrols:XamlControlsResources.MergedDictionaries\u003e\n            \u003cResourceDictionary Source=\"ms-appx:///UWPPackage/Segmented_Resource.xaml\"/\u003e\n            ...\n        \u003c/controls:XamlControlsResources.MergedDictionaries\u003e\n    \u003c/controls:XamlControlsResources\u003e\n\u003c/Application.Resources\u003e\n```\n\n## CustomAcrylicBackdrop\nA customizable acrylic backdrop with bindable properties, and can be set as active when the window is inactive.\n\n|Property| Type | DependencyProperty? |\n|---|---|---|\n|FallbackColor| Color | :white_check_mark:\n|TintColor| Color | :white_check_mark:\n|Kind| DesktopAcrylicKind | :white_check_mark:\n|LuminosityOpacity| Single | :white_check_mark:\n|TintOpacity| Single | :white_check_mark:\n|EnableWhenInactive| Boolean | :white_check_mark:\n\n## CustomMicaBackdrop\n![](./assets/backdrop.gif)\nA customizable mica backdrop with bindable properties, and can be set as active when the window is inactive.\n\n|Property| Type | DependencyProperty? |\n|---|---|---|\n|FallbackColor| Color | :white_check_mark:\n|TintColor| Color | :white_check_mark:\n|Kind| MicaKind | :white_check_mark:\n|LuminosityOpacity| Single | :white_check_mark:\n|TintOpacity| Single | :white_check_mark:\n|EnableWhenInactive| Boolean | :white_check_mark:\n\n## Shimmer\nSimilar to the `Shimmer` in Community Toolkit, but it's a `ContentControl`, which allows you to directly put content into it, making it easier to use.\nAlso, the `ShimmerGradientStops` is a resource of type `Windows.UI.Xaml.Media.GradientStopCollection` which allows to be override.\n\n|Property| Type | DependencyProperty? |\n|---|---|---|\n|IsLoading| Boolean | :white_check_mark:\n\n![](./assets/shimmer-light.gif)\n![](./assets/shimmer-dark.gif)\n\n## ScopedButtonDisabler\n```cpp\n#include \u003cScopedButtonDisabler.hpp\u003e\n```\nThis is a simple header-only RAII-style class that disable a button in a scope.\nWhen you attach a `Click` handler of a button and open a `FilePicker`, when user click fast enough, it will have 2 `FilePicker` opened at the same time, which is a source of logical bugs.\n```cpp\nwinrt::Windows::Storage::Pickers::FileOpenPicker picker;\npicker.FileTypeFilter().Append(L\"*\");\nauto file = co_await picker.PickSingleFileAsync();\n```\n\nWith `ScopedButtonDisabler`, it will disable the button inside this handler, preventing any logical bugs that might happens.\n```cpp\nScopedButtonDisabler disabler{ sender };\nwinrt::Windows::Storage::Pickers::FileOpenPicker picker;\npicker.FileTypeFilter().Append(L\"*\");\nauto file = co_await picker.PickSingleFileAsync();\n```\n![](./assets/shimmer-dark.gif)\n\n## ImageExtension\nAutomatically display a fallback image when `Image` failed to load.\nUsage:\n\n```xml\n\u003cImage\n    essential:ImageExtension.FallbackSource=\"ms-appx:///Assets/Owl.jpg\"\n    Source=\"https://upload.wikimedia.org/wikipedia/commons/5/5f/Windows_logo_-_2012.svg\" /\u003e\n```\n\n## SwitchPresenter\nAlmost the same as community's `SwitchPresenter`. But lacking reflection in C++ means you need to explicitly write out the value type in xaml in `Case.Value` property.\n\nFor example, if you binding the `SwitchPresenter.Value` to a `Boolean`, you need to write the `Case.Value` to `\u003cx:Boolean\u003eTrue\u003c/x:String\u003e`:\n```xml\n\u003cessential:SwitchPresenter Value=\"{Binding IsOn, ElementName=LoadingState, Mode=OneWay}\"\u003e\n    \u003cessential:Case\u003e\n        \u003cessential:Case.Value\u003e\n            \u003cx:Boolean\u003eTrue\u003c/x:Boolean\u003e\n        \u003c/essential:Case.Value\u003e\n        \u003cTextBlock Text=\"True value content\"\u003e\n    \u003c/essential:Case\u003e\n\u003c/essential:SwitchPresenter\u003e\n```\nYou should most likely use `Binding` instead of `x:Bind`, because when `{x:Bind}` is evaluated the controls are not finished loading, causing a crash\n\n## ModernStandardWindowContextMenu\nA modern XAML-based window context menu to replace the traditional win32 menu when you right-click the window titlebar. \nIt supports uses on both `Essential:WindowEx` and a normal `Microsoft.UI.Xaml.Window`. \nThe icons are hard-coded glyphs so you get the same appearance on both Windows 10 \u0026 Windows 11.\nIt also listens to window style changes, so it shows the correct menu item in whatever window styles your window have.\n\n- To use with a `essential:Window`, simply set it to `WindowEx.ContextMenu`\n```xml\n\u003cessential:WindowEx ...\n    \u003cessential:WindowEx.ContextMenu\u003e\n        \u003c!--  Simply set it to WindowEx.ContextMenu  --\u003e\n        \u003cessential:ModernStandardWindowContextMenu /\u003e\n    \u003c/essential:WindowEx.ContextMenu\u003e\n\u003c/essential:WindowEx\u003e\n```\n- To use with a `Microsoft.UI.Xaml.Window`, declare it as a `Resource` with a `x:Name` and `{x:Bind}` to `ModernStandardWindowContextMenu.Window` property \n  under **the first element in the window context**\n```xml\n\u003cWindow ...\u003e\n    \u003cStackPanel\u003e\n        \u003cStackPanel.Resources\u003e\n            \u003c!--  Simply declare it as resource in your first control of the window  --\u003e\n            \u003cessential:ModernStandardWindowContextMenu x:Name=\"Menu\" Window=\"{x:Bind}\" /\u003e\n        \u003c/StackPanel.Resources\u003e\n    \u003c/StackPanel\u003e\n\u003c/Window\u003e\n```\n\n![](assets/window-context-menu.gif)\n\n## WindowContextMenu\nA customized version of `ModernStandardWindowContextMenu` that allows you to use a custom `MenuFlyout` with any items you'd like.\nUsage are largely the same to `ModernStandardWindowContextMenu`, that you still bind a `Window` with `{x:Bind}`,\nbut you do not need to add a resource to `Application.Resources`\n```xml\n\u003cWindow ...\u003e\n    \u003cStackPanel\u003e\n        \u003cStackPanel.Resources\u003e\n            \u003cessential:WindowContextMenu x:Name=\"Menu\" Window=\"{x:Bind}\"\u003e\n                \u003cMenuFlyout\u003e\n                    \u003cMenuFlyoutItem Text=\"Item1\" /\u003e\n                    \u003cMenuFlyoutItem Text=\"Item2\" /\u003e\n                \u003c/MenuFlyout\u003e\n            \u003c/essential:WindowContextMenu\u003e\n        \u003c/StackPanel.Resources\u003e\n    \u003c/StackPanel\u003e\n\u003c/Window\u003e\n```\n\n## NonResizableWindowWhiteBorderWorkaround\nWASDK 1.6 has [this issue](https://github.com/microsoft/microsoft-ui-xaml/issues/9978) that window has a white border when you `SetBorderAndTitleBar(false, false)`.\nThis controls helps to workaround it by providing a simple syntax you declare right in your window's first element's `Resource`\n```xml\n\u003cWindow ...\u003e\n\n    \u003cStackPanel\u003e\n        \u003cStackPanel.Resources\u003e\n            \u003cessential:NonResizableWindowWhiteBorderWorkaround x:Name=\"Workaround\" Window=\"{x:Bind}\" /\u003e\n        \u003c/StackPanel.Resources\u003e\n    \u003c/StackPanel\u003e\n\u003c/Window\u003e\n```\n\nBefore:\n\n![](assets/non-resizable-window-white-border.png)\n\nAfter:\n\n![](assets/non-resizable-window-white-border-workaround.png)\n\n## ComboBoxHelper\nThe WinUI3's built-in `ComboBox` does not have [Acrylic background](https://github.com/microsoft/microsoft-ui-xaml/issues/9523). We fixed it for you. To use it, simply add `ComboBoxHelper.AcrylicWorkaround=\"True\"` as an attached property on your `ComboBox`.\n\n```xml\n\u003cComboBox\n    Width=\"200\"\n    essential:ComboBoxHelper.AcrylicWorkaround=\"True\"\n    Header=\"Colors\"\n    PlaceholderText=\"Pick a color\"\u003e\n    \u003cx:String\u003eBlue\u003c/x:String\u003e\n    \u003cx:String\u003eGreen\u003c/x:String\u003e\n    \u003cx:String\u003eRed\u003c/x:String\u003e\n    \u003cx:String\u003eYellow\u003c/x:String\u003e\n\u003c/ComboBox\u003e\n```\n|Before|After|\n|------|-----|\n|![](assets/combobox-original.png)|![](assets/combobox-fixed.png)|\n\n## AutoSuggestBoxHelper\nThe WinUI3's built-in `AutoSuggestBox` does not have [Acrylic background](https://github.com/microsoft/microsoft-ui-xaml/issues/10590). We fixed it for you. To use it, simply add `AutoSuggestBoxHelper.AcrylicWorkaround=\"True\"` as an attached property on your `AutoSuggestBox`.\n\n```xml\n\u003cAutoSuggestBox x:Name=\"Control2\" Width=\"300\"\n    essential:AutoSuggestBoxHelper.AcrylicWorkaround=\"True\"/\u003e\n```\n|Before|After|\n|------|-----|\n|![](assets/autosuggestbox-original.png)|![](assets/autosuggestbox-fixed.png)|\n\n## WrapPanel\nA panel that position child elements from left to right first then wrap to new row when the width is not enough.\nSwitching orientation to position child elements from top to bottom first then wrap to new column when the height is not enough.\n\nA better implementation to community toolkit that does NOT crash!\n\nUsage:\n```xml\n \u003cListView ItemsSource=\"{x:Bind WrapPanelCollection, Mode=OneWay}\"\u003e\n    \u003cListView.ItemsPanel\u003e\n        \u003cItemsPanelTemplate\u003e\n            \u003cessential:WrapPanel x:Name=\"sampleWrapPanel\" /\u003e\n        \u003c/ItemsPanelTemplate\u003e\n    \u003c/ListView.ItemsPanel\u003e\n\u003c/ListView\u003e\n```\n\n![](assets/wrappanel.gif)\n\n## ToolTipHelper\nThe WinUI3's built-in `ToolTip` does not have Acrylic background. We fixed it for you. To use it, simply add `ToolTipHelper.AcrylicWorkaround=\"True\"` as an attached property on your `ToolTip`.\n```xml\n\u003cButton Content=\"Button with a simple ToolTip.\"\u003e\n    \u003cToolTipService.ToolTip\u003e\n        \u003cToolTip essential:ToolTipHelper.AcrylicWorkaround=\"True\" Content=\"Simple ToolTip\" /\u003e\n    \u003c/ToolTipService.ToolTip\u003e\n\u003c/Button\u003e\n```\n|Before|After|\n|------|-----|\n|![](assets/tooltip-original.png)|![](assets/tooltip-fixed.png)|\n\n## CommandBarHelper\nThe WinUI3's built-in `CommandBar` does not have Acrylic background. We fixed it for you. To use it, simply add `CommandBarHelper.AcrylicWorkaround=\"True\"` as an attached property on your `CommandBar`.\n```xml\n\u003cCommandBar essential:CommandBarHelper.AcrylicWorkaround=\"True\"\u003e\n    \u003cAppBarButton Icon=\"Add\" Label=\"Add\"/\u003e\n    \u003cAppBarButton Icon=\"Edit\" Label=\"Edit\"/\u003e\n    \u003cAppBarButton Icon=\"Delete\" Label=\"Delete\"/\u003e\n\u003c/CommandBar\u003e\n```\n|Before|After|\n|------|-----|\n|![](assets/commandbar-original.png)|![](assets/commandbar-fixed.png)|\n\n## IInitializeWithWindowHelper\nA header-only helper for [initializing](https://learn.microsoft.com/en-us/windows/apps/develop/ui-input/display-ui-objects) WinRT objects that requires a `hwnd`.\n\nTo use, simply change the namespace `winrt` to `WinUIEssentials` of your objects that needs to be initialized, and pass either a `HWND` or a `Microsoft.UI.Xaml.Window` to the constructor.\n\nTake `FileOpenPicker` as an example:\n```cpp\n#include \u003cinclude/IInitializeWithWindowHelper.hpp\u003e\n\nWinUIEssentials::Windows::Storage::Pickers::FileOpenPicker picker{ MainWindow::Hwnd };\n//or\nWinUIEssentials::Windows::Storage::Pickers::FileOpenPicker picker{ MainWindow::Instance };\n\n//...\npicker.PickSingleFileAsync();\n```\n\n## WindowCaptionButtonThemeWorkaround\nWhen you have `Window.ExtendsContentIntoTitleBar(true)`, the caption buttons often comes out with broken color regarding to theme. \nThis helper fixed it by working as a hidden control and listens to theme change message, and make corresponding changes to caption buttons.\n\nTo use, simply put it under a Xaml control (such as `Grid`) that can accept child contents.\n\n```xml\n\u003cWindow\u003e\n    ...\n    \u003cGrid x:Name=\"RootGrid\"\u003e\n        \u003cessential:WindowCaptionButtonThemeWorkaround Window=\"{x:Bind}\" /\u003e\n        \u003c-- Other contents --\u003e\n    \u003c/Grid\u003e\n\u003c/Window\u003e\n```\n\n|Before|After|\n|------|-----|\n|![](assets/window-broken.gif)|![](assets/window-fixed.gif)|\n\n## MicaBackdropWithFallback\nThe default mica backdrop, but with automatic fallback to any other kind of backdrop (mainly `DesktopAcrylicBackdrop` from WASDK).\n\nUsage: \n```xml\n\u003cWindow.SystemBackdrop\u003e\n    \u003cessential:MicaBackdropWithFallback\u003e\n        \u003cessential:MicaBackdropWithFallback.Fallback\u003e\n            \u003cDesktopAcrylicBackdrop /\u003e\n        \u003c/essential:MicaBackdropWithFallback.Fallback\u003e\n    \u003c/essential:MicaBackdropWithFallback\u003e\n\u003c/Window.SystemBackdrop\u003e\n```\n\n## NonMaximizableWindowWorkaround\nHelper for workaround setting `IsMaximizable=false` but you are still able to maximize the window but double-tapping on the title bar.\n\n\nSimply delcare it under any `Resource` under a control that is inside a `Window`. Usage:\n```xml\n\u003cWindow ...\u003e\n    \u003cStackPanel\u003e\n        \u003cStackPanel.Resource\u003e\n            \u003cessential:NonMaximizableWindowWorkaround Window=\"{x:Bind}\"/\u003e\n        \u003c/StackPanel.Resource\u003e\n    \u003c/StackPanel\u003e\n    ...\n\u003c/Window\u003e\n```\n\n## DatePickerHelper\nThe WinUI3's built-in `DatePicker` does not have Acrylic background. We fixed it for you. To use it, simply add `DatePickerHelper.AcrylicWorkaround=\"True\"` as an attached property on your `DatePicker`.\n```xml\n\u003cDatePicker essential:DatePickerHelper.AcrylicWorkaround=\"True\" Header=\"Pick a date\" /\u003e\n```\n|Before|After|\n|------|-----|\n|![](assets/datepicker-original.png)|![](assets/datepicker-fixed.png)|\n\n## TimePickerHelper\nThe WinUI3's built-in `TimePicker` does not have Acrylic background. We fixed it for you. To use it, simply add `TimePickerHelper.AcrylicWorkaround=\"True\"` as an attached property on your `TimePicker`.\n```xml\n\u003cTimePicker essential:TimePickerHelper.AcrylicWorkaround=\"True\" Header=\"Pick a time\" /\u003e\n```\n|Before|After|\n|------|-----|\n|![](assets/timepicker-original.png)|![](assets/timepicker-fixed.png)|\n\n## FlyoutHelper\nThe WinUI3's built-in `Flyout` does not have Acrylic background. We fixed it for you. To use it, simply add `Flyout.AcrylicWorkaround=\"True\"` as an attached property on your `Flyout`.\n```xml\n\u003cFlyout essential:FlyoutHelper.AcrylicWorkaround=\"True\"\u003e\n    \u003cStackPanel\u003e\n        \u003cTextBlock\n            Margin=\"0,0,0,12\"\n            Style=\"{ThemeResource BaseTextBlockStyle}\"\n            Text=\"All items will be removed. Do you want to continue?\" /\u003e\n        \u003cButton Content=\"Yes, empty my cart\" /\u003e\n    \u003c/StackPanel\u003e\n\u003c/Flyout\u003e\n```\n|Before|After|\n|------|-----|\n|![](assets/flyout-original.png)|![](assets/flyout-fixed.png)|\n\n## CalendarDatePickerHelper\nThe WinUI3's built-in `TimePickerHelper` does not have Acrylic background. We fixed it for you. To use it, simply add `TimePickerHelper.AcrylicWorkaround=\"True\"` as an attached property on your `TimePickerHelper`.\n```xml\n\u003cCalendarDatePicker\n    essential:CalendarDatePickerHelper.AcrylicWorkaround=\"True\"\n    Header=\"Calendar\"\n    PlaceholderText=\"Pick a date\" /\u003e\n```\n|Before|After|\n|------|-----|\n|![](assets/calendardatepicker-original.png)|![](assets/calendardatepicker-fixed.png)|\n\n## ModalWindow\nA WinUI3 modal window (meaning that it has an owner window, and take its focus) that you can directly use in xaml, just like the good-ol `Window`.\n```xml\n\u003cessential:ModalWindow\n    x:Class=\"WinUI3Example.SampleModalWindow\"\n    xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\"\n    xmlns:x=\"http://schemas.microsoft.com/winfx/2006/xaml\"\n    xmlns:d=\"http://schemas.microsoft.com/expression/blend/2008\"\n    xmlns:essential=\"using:WinUI3Package\"\n    xmlns:local=\"using:WinUI3Example\"\n    xmlns:mc=\"http://schemas.openxmlformats.org/markup-compatibility/2006\"\n    Title=\"Sample Modal Window\"\n    mc:Ignorable=\"d\"\u003e\n\n    \u003cTextBlock Text=\"This is a ModalWindow\" /\u003e\n\u003c/essential:ModalWindow\u003e\n```\n\n## NavigationViewHelper\nThe WinUI3's built-in `NavigationView` does not have Acrylic background with the dropdown menu and the overflow menu when it's at top. We fixed it for you. To use it, simply add `TimePickerHelper.AcrylicWorkaround=\"True\"` as an attached property on your `NavigationView` when it has `PaneDisplayMode=\"Top\"`.\n```xml\n\u003cNavigationView\n    ...\n    essential:NavigationViewHelper.AcrylicWorkaround=\"True\"\n    PaneDisplayMode=\"Top\"\u003e\n\n    ...Other contents...\n\u003c/NavigationView\u003e\n```\n|Before|After|\n|------|-----|\n|![](assets/navigationview-original.png)|![](assets/navigationview-fixed.png)|\n\n## SliderHelper\nThe WinUI3's built-in `Slider` does not have Acrylic background on its tooltip. We fixed it for you. To use it, simply add `SliderHelper.AcrylicWorkaround=\"True\"` as an attached property on your `Slider`.\n```xml\n\u003cSlider\n    Width=\"200\"\n    VerticalAlignment=\"Center\"\n    essential:SliderHelper.AcrylicWorkaround=\"True\" /\u003e\n```\n|Before|After|\n|------|-----|\n|![](assets/slider-original.png)|![](assets/slider-fixed.png)|\n\n\n## RevealFocusPanel\nMissing the good-ol Reveal Focus effect from UWP? We bring it back to you! For detailed usage, please download the [Example Gallery](https://apps.microsoft.com/detail/9PCC690BCMT9?hl=en-us\u0026gl=US\u0026ocid=pdpshare) and see for yourself!\n|Light|Dark|\n|-----|----|\n|![](assets/reveal1-light.gif)|![](assets/reveal1-dark.gif)|\n|![](assets/reveal2-light.gif)|![](assets/reveal2-dark.gif)|\n|![](assets/reveal3-light.gif)|![](assets/reveal3-dark.gif)|\n\n\n## TenMica\nSimulated [Mica effect](https://learn.microsoft.com/en-us/windows/apps/design/style/mica) for Windows 10 (that also works on Windows 11 if you want to force the effect even when the user disabled it in system settings). \nThis is a drop-in replacement for WinUI3's built-in `MicaBackdrop`, and it automatically handles:\n- Cross-screen window moving with different dpi\n- Wallpaper changes\n- Theme changes\n- Monitor changes\n- GPU driver reset / GPU changes\n- Works with software (no GPU) and hardware rendering\n\n```xml\n\u003cWindow ...\u003e\n    \u003cWindow.SystemBackdrop\u003e\n        \u003cessential:TenMicaBackdrop BindThemeTo=\"{x:Bind RootGrid}\" EnableWhenInactive=\"{x:Bind EnableInactiveSwitch.IsOn, Mode=OneWay}\" /\u003e\n    \u003c/Window.SystemBackdrop\u003e\n\n    ...\n\u003c/Window\u003e\n```\n\n|Light|Dark|\n|-----|----|\n|![](assets/tenmica-light.png)|![](assets/tenmica-dark.png)|\n\n## WindowedContentDialog\n`ContentDialog` but shown inside a window that has exactly the same `ShowAsync()` api that you are familiar with.\n- If you `ShowAsync()` with a parent window, it automatically center (but clamped to visible monitor area) inside the parent, theme synced with the parent, and you can also specify the underlay (with a nice animation)\n- If you `ShowAsync()` without a parent window, it shows as a free top-level window.\n\n```idl\nWindows.Foundation.IAsyncOperation\u003cMicrosoft.UI.Xaml.Controls.ContentDialogResult\u003e ShowAsync();\nWindows.Foundation.IAsyncOperation\u003cMicrosoft.UI.Xaml.Controls.ContentDialogResult\u003e ShowAsync(Microsoft.UI.Xaml.Window parentWindow);\nWindows.Foundation.IAsyncOperation\u003cMicrosoft.UI.Xaml.Controls.ContentDialogResult\u003e ShowAsync(\n    Microsoft.UI.Xaml.Window parentWindow,\n    UnderlayMode underlay\n);\n```\n|UnderlayMode|\n|------------|\n|None|\n|Blur|\n|Smoke|\n\n\n|Smoke|Blur|\n|-----|----|\n|![](assets/windowed-dialog-smoke.png)|![](assets/windowed-dialog-blur.png)\n\n## SvgImageSource\n**This component is in a dedicated `WinUIEssential.WinUI3.Svg` package.**\n\nThis component is based on [the great resvg project](https://github.com/linebender/resvg). \nIt is meant to be a drop-in replacement for the WinUI3's built-in `SvgImageSource`, but offers much better rendering capabilities.\nThe WinUI3's built-in `SvgImageSource` has these [known limitations](https://learn.microsoft.com/en-us/windows/win32/direct2d/svg-support), one of the most limiting one being:\n **unable to render `\u003ctext\u003e`**.\n\n Using this component, you get the majority of svg1.1 features supported (download the WinEssentials.WinUI3Example app from the store and see for yourself), plus easier sizing control,\n supporting binding the rasterization size directly with the `Image` control.\n\n Example usage:\n ```xml\n\u003cImage x:Name=\"SvgUrlImage\"\u003e\n    \u003cImage.Source\u003e\n        \u003csvg:SvgImageSource BindSizeTo=\"{x:Bind SvgUrlImage}\" UriSource=\"https://img.shields.io/nuget/v/WinUIEssential.WinUI3?label=WinUIEssential.WinUI3\" /\u003e\n    \u003c/Image.Source\u003e\n\u003c/Image\u003e\n ```\n\n ![](assets/svg1.png)\n ![](assets/svg-compare.png)\n\n|Property| DependencyProperty? | Description\n|---|---|---|\n|UriSource | :white_check_mark: | Set the svg source by `Uri`\n|StringSource | :white_check_mark: | Set the svg source by the svg content string\n|RasterizePixelWidth | :white_check_mark: | The pixel width of the svg rasterized, not compatible with `BindSizeTo`\n|RasterizePixelHeight | :white_check_mark: | The pixel height of the svg rasterized, not compatible with `BindSizeTo`\n|BindSizeTo | :white_check_mark: | The `Image` control to bind to automatically adjust rasterized size. Not compatible with `RasterizedPixelWidth` and `RasterizedPixelHeight`","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fho-cooh%2Fwinuiessentials","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fho-cooh%2Fwinuiessentials","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fho-cooh%2Fwinuiessentials/lists"}