What's the proper way to set Foreground on CheckBox using Lightweight styling?

[jeanplevesque]

With the Lightweight styling introduced with Uno 4.10 I can no longer set the Foreground property on CheckBox.
Instead I need to override the following 18 resources (I didn't include the variants for the disables states because I don't need them).
I want to set the OnPrimaryBrush to all 18.

CheckBoxForegroundUnchecked
CheckBoxForegroundUncheckedPointerOver
CheckBoxForegroundUncheckedPressed

CheckBoxForegroundChecked
CheckBoxForegroundCheckedPointerOver
CheckBoxForegroundCheckedPressed

CheckBoxForegroundIndeterminate
CheckBoxForegroundIndeterminatePointerOver
CheckBoxForegroundIndeterminatePressed

CheckBoxGlyphForegroundUnchecked
CheckBoxGlyphForegroundUncheckedPointerOver
CheckBoxGlyphForegroundUncheckedPressed

CheckBoxGlyphForegroundChecked
CheckBoxGlyphForegroundCheckedPointerOver
CheckBoxGlyphForegroundCheckedPressed

CheckBoxGlyphForegroundIndeterminate
CheckBoxGlyphForegroundIndeterminatePointerOver
CheckBoxGlyphForegroundIndeterminatePressed

I'd like to avoid writing 18 lines of code in my pages that need this. I assume I can do this using a style however I don't understand how to do that.
The current documentation doesn't show such use case and seems to redefine brushes with new colors.
In my case I want to reuse the existing OnPrimaryBrush.

[kazo0]

Good catch, CheckBox is a good example to highlight in the docs as it is a bit of a special case where Foreground/Background don't apply as you might expect, and definitely something that we missed when talking about breaking changes.

If you are attempting to use the Foreground property to manage the color of the checkmark/indeterminate glyph, you'll have to override the resources like you would if you were using the Fluent version of the CheckBox style.

See a similar question here

In the case of using an existing brush, your XAML should look something like:

<CheckBox Content="Checked">
	<CheckBox.Resources>
		<StaticResource x:Key="CheckBoxGlyphForegroundChecked" ResourceKey="OnPrimaryBrush" />
		<StaticResource x:Key="CheckBoxGlyphForegroundCheckedPointerOver" ResourceKey="OnPrimaryBrush" />
		<StaticResource x:Key="CheckBoxGlyphForegroundCheckedPressed" ResourceKey="OnPrimaryBrush" />
		<StaticResource x:Key="CheckBoxGlyphForegroundChecked" ResourceKey="OnPrimaryBrush" />
		<!-- ... -->
	</CheckBox.Resources>
</CheckBox>

Although, in the case of the Glyph Foreground, those should already be all OnPrimaryBrush

It's a bit verbose, I know, but we're trying to follow the standards from Fluent styles. There is work underway to be able to define a set of Resources as an attached property that you can use as a Setter on a custom Style so you can re-use the same CheckBox style with all the overridden resources throughout your app. If this is something you want to be done globally or at a Page-level, you can define these StaticResource aliases in the App/Page Resources instead of on the specific CheckBox.

There's also work starting around a simpler way to override the material colors at any scope. So you will be able to say "just for this CheckBox, use X as PrimaryColor/OnPrimaryColor/SurfaceColor/etc."

You are correct that the documentation should show a case like this where you can alias existing brushes as part of your lightweight styling overrides.

[Xiaoy312]

you can create a OneSpecialButton.xaml with the resources, and in Button.Resources import that with Source=path\to\OneSpecialButton.xaml

[Xiaoy312]

this can also be converted into a style too, but you will need to create a custom attached-property to set .Resources in code behind by the assigned value, as FrameworkElement.Resources is not a dp. (i havent really tested this, but in theory this hsould work)

[kazo0]

Right now you can't hide it in a Style, unless you re-template and remove the fact that the visual states set different brushes on the ContentPresenter for the Foreground. That's where what I mentioned before with the work to have an attached property for the Resources that can be set in a Style.Setter will come in handy

You should only need to override these 9 brushes:

CheckBoxForegroundUnchecked
CheckBoxForegroundUncheckedPointerOver
CheckBoxForegroundUncheckedPressed

CheckBoxForegroundChecked
CheckBoxForegroundCheckedPointerOver
CheckBoxForegroundCheckedPressed

CheckBoxForegroundIndeterminate
CheckBoxForegroundIndeterminatePointerOver
CheckBoxForegroundIndeterminatePressed

As the Glyph ones are already set to OnPrimaryBrush

Basically your options are the same as you would have from this answer: https://stackoverflow.com/questions/60950009/checkbox-content-color-cant-be-set-in-uwp

You either override the brushes in the resources or you have a custom CheckBox style that doesn't change certain properties per visual state.

You might get away with doing something like

<CheckBox.Resources>
	<SolidColorBrush x:Key="CheckBoxForegroundUnchecked" Color={ThemeResource OnPrimaryColor} />
	<!-- ... -->
</CheckBox.Resource> 

But I'm not sure if that works in all cases

[jeanplevesque]

Ok so your suggestion of redefining a new SolidColorBrush using a ThemeResource reference on the color is what I ended up doing because it avoids duplicating the overrides per theme.
Thanks for that.

<CheckBox x:Name="TermsOfServiceCheckBox"
	Content="I agree to the terms of services"
	x:Uid="CreateAccount_TermsOfServices"
	IsChecked="{Binding Form.AgreeToTermsOfServices, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
	HorizontalAlignment="Left">
	<CheckBox.Resources>
		<SolidColorBrush x:Key="CheckBoxForegroundUnchecked" Color="{ThemeResource OnPrimaryColor}" />
		<SolidColorBrush x:Key="CheckBoxForegroundUncheckedPointerOver" Color="{ThemeResource OnPrimaryColor}" />
		<SolidColorBrush x:Key="CheckBoxForegroundUncheckedPressed" Color="{ThemeResource OnPrimaryColor}" />

		<SolidColorBrush x:Key="CheckBoxForegroundChecked" Color="{ThemeResource OnPrimaryColor}" />
		<SolidColorBrush x:Key="CheckBoxForegroundCheckedPointerOver" Color="{ThemeResource OnPrimaryColor}" />
		<SolidColorBrush x:Key="CheckBoxForegroundCheckedPressed" Color="{ThemeResource OnPrimaryColor}" />

		<SolidColorBrush x:Key="CheckBoxCheckBackgroundStrokeUnchecked" Color="{ThemeResource OnPrimaryColor}" />
		<SolidColorBrush x:Key="CheckBoxCheckBackgroundStrokeUncheckedPointerOver" Color="{ThemeResource OnPrimaryColor}" />
		<SolidColorBrush x:Key="CheckBoxCheckBackgroundStrokeUncheckedPressed" Color="{ThemeResource OnPrimaryColor}" />
	</CheckBox.Resources>
</CheckBox>

The code is pretty heavy though.
So like you mentioned, having recipes to make the code more lightweight would truly bring value.

Should I open issues about this? (Or perhaps upvote or comment existing issues?)

[kazo0]

@jeanplevesque yeah I agree this is a bit much for customizing, CheckBox is a bit of a special case with the way the template is built but there will still be other cases where this sort of thing is needed.

The issue for tracking a Resources attached property to be used in something like a Style.Setter is here: https://github.com/unoplatform/Uno.Themes/issues/1116, maybe this should be moved to Toolkit eventually

The issue for having a way to basically re-init the MateralTheme with a different color override is here: #938, this needs some more info but basically we want to achieve "scoped" color overrides where you can simply say that within a specific resource scope: primary/surface/etc. color should be X and all of the brushes will properly adjust to the new base color properly