How can I restyle a NumberBox control?

[AndrewKeepCoding]

I have a custom control, CustomNumberBox derived from NumberBox, and I want to restyle its control template but the style doesn't get applied. AFAICS, this is the same on all controls under the Microsoft.UI.Xaml.Controls namespace.

• Breadcrumbar
• ColorPicker
• InfoBar
• NumberBox
• ProgressBar/ProgressRing
• RatingControl

So, apparently this is by design but is there any way to restyle these controls?

[marcelwgn]

How did you restyle the control and where did you place the template?

[marcelwgn]

I think the issue is that the way the controls apply their template in WinUI 2 is a bit more complicated. They use this lookup logic to find the right template:

microsoft-ui-xaml/dev/dll/XamlControlsResources.cpp

Lines 266 to 364 in da8b658

	void SetDefaultStyleKeyWorker(winrt::IControlProtected const& controlProtected, std::wstring_view const& className)
	{
	controlProtected.DefaultStyleKey(box_value(className));
	if (auto control5 = controlProtected.try_as<winrt::IControl5>())
	{
	winrt::Uri uri{
	[]() {
	// RS3 styles should be used on builds where ListViewItemPresenter's VSM integration works.
	const bool isRS3OrHigher = SharedHelpers::DoesListViewItemPresenterVSMWork();
	const bool isRS4OrHigher = SharedHelpers::IsRS4OrHigher();
	const bool isRS5OrHigher = SharedHelpers::IsRS5OrHigher() && SharedHelpers::IsControlCornerRadiusAvailable();
	const bool is19H1OrHigher = SharedHelpers::Is19H1OrHigher();
	const bool is21H1OrHigher = SharedHelpers::Is21H1OrHigher();
	const bool isInFrameworkPackage = SharedHelpers::IsInFrameworkPackage();
	const bool isInCBSPackage = SharedHelpers::IsInCBSPackage();
	std::wstring postfix = s_tlsIsControlsResourcesVersion2 ? L"generic.xaml" : L"generic_v1.xaml";
	std::wstring releasePrefix = L"";
	if (isInFrameworkPackage)
	{
	if (is21H1OrHigher)
	{
	releasePrefix = L"ms-appx://" MUXCONTROLS_PACKAGE_NAME "/" MUXCONTROLSROOT_NAMESPACE_STR "/Themes/21h1_";
	}
	else if (is19H1OrHigher)
	{
	releasePrefix = L"ms-appx://" MUXCONTROLS_PACKAGE_NAME "/" MUXCONTROLSROOT_NAMESPACE_STR "/Themes/19h1_";
	}
	else if (isRS5OrHigher)
	{
	releasePrefix = L"ms-appx://" MUXCONTROLS_PACKAGE_NAME "/" MUXCONTROLSROOT_NAMESPACE_STR "/Themes/rs5_";
	}
	else if (isRS4OrHigher)
	{
	releasePrefix = L"ms-appx://" MUXCONTROLS_PACKAGE_NAME "/" MUXCONTROLSROOT_NAMESPACE_STR "/Themes/rs4_";
	}
	else if (isRS3OrHigher)
	{
	releasePrefix = L"ms-appx://" MUXCONTROLS_PACKAGE_NAME "/" MUXCONTROLSROOT_NAMESPACE_STR "/Themes/rs3_";
	}
	else
	{
	releasePrefix = L"ms-appx://" MUXCONTROLS_PACKAGE_NAME "/" MUXCONTROLSROOT_NAMESPACE_STR "/Themes/rs2_";
	}
	}
	else if (isInCBSPackage)
	{
	if (is21H1OrHigher)
	{
	releasePrefix = L"ms-appx://" MUXCONTROLS_CBS_PACKAGE_NAME "/" MUXCONTROLSROOT_NAMESPACE_STR "/Themes/21h1_";
	}
	else if (is19H1OrHigher)
	{
	releasePrefix = L"ms-appx://" MUXCONTROLS_CBS_PACKAGE_NAME "/" MUXCONTROLSROOT_NAMESPACE_STR "/Themes/19h1_";
	}
	else
	{
	MUX_FAIL_FAST_MSG("CBS package doesn't apply to old platforms");
	releasePrefix = L"ms-appx://" MUXCONTROLS_CBS_PACKAGE_NAME "/" MUXCONTROLSROOT_NAMESPACE_STR "/Themes/rs2_";
	}
	}
	else
	{
	if (is21H1OrHigher)
	{
	releasePrefix = L"ms-appx:///" MUXCONTROLSROOT_NAMESPACE_STR "/Themes/21h1_";
	}
	else if (is19H1OrHigher)
	{
	releasePrefix = L"ms-appx:///" MUXCONTROLSROOT_NAMESPACE_STR "/Themes/19h1_";
	}
	else if (isRS5OrHigher)
	{
	releasePrefix = L"ms-appx:///" MUXCONTROLSROOT_NAMESPACE_STR "/Themes/rs5_";
	}
	else if (isRS4OrHigher)
	{
	releasePrefix = L"ms-appx:///" MUXCONTROLSROOT_NAMESPACE_STR "/Themes/rs4_";
	}
	else if (isRS3OrHigher)
	{
	releasePrefix = L"ms-appx:///" MUXCONTROLSROOT_NAMESPACE_STR "/Themes/rs3_";
	}
	else
	{
	releasePrefix = L"ms-appx:///" MUXCONTROLSROOT_NAMESPACE_STR "/Themes/rs2_";
	}
	}
	return releasePrefix + postfix;
	}()
	};
	// Choose a default resource URI based on whether we're running in a framework package scenario or not.
	control5.DefaultStyleResourceUri(uri);
	}

I was able to get this working by putting the template in the App.xaml file as part of the merged dictionaries.

[AndrewKeepCoding]

Placing the style in the App.xaml worked! Thanks @chingucoding.

[AndrewKeepCoding]

This is just for clarification but, this is a workaround right? You can't use this way on control libraries separated from the app. Should I create an issue?

[marcelwgn]

Yes @AndrewKeepCoding , this is more or less a workaround. A normal library could probably work around, I'm inclined to say this issue might be caused by the "magic" around the Themes/Generic.xaml. Loading a resource dictionary by referencing the XAML file would probably work just as expected.

[4broadcast]

Hi, does anyone know if there is an open issue somewhere for this? I just found this question, which seems to be the same as mine here #10196.