RadioButtons: Fix header not having correct color when disabled

[Felix-Dev]

This PR fixes the RadioButtons' header not having the correct foreground color when the control is disabled. It now matches the foreground color seen for controls like the TextBox, ComboBox,....

This PR introduces the following new theme resources for the header foreground:

• RadioButtonsHeaderForeground
• RadioButtonsHeaderForegroundDisabled

These theme resources match the theme resources available for the TextBox header or the ComboBox header, for example.

In addition to the two theme resources above, I have also introduced the following new resources:

• RadioButtonsTopHeaderMargin

Both the TextBox (TextBoxTopHeaderMargin) and the ComboBox (ComboBoxTopHeaderMargin) expose such a resource, thus the RadioButtons control should likely have one as well. I'm not exactly sold on the "Top" term here as the resource names to style the header foreground don't use that additional term and they appear totally fine to me... but for naming consistency, I went along here.

Motivation and Context

Fixes #3350

How Has This Been Tested?

Tested visually and added API test.

Screenshots:

Light	Dark

Open Questions

The ComboBox' Header also exposes a ComboBoxHeaderThemeFontWeight theme resource so customers can individually style the font weight of the header. I think exposing such a resource for the RadioButtons control would make sense as well, since setting the FontWeight API on the RadioButtons control affects both the header and the content of its radio buttons:

<muxc:RadioButtonsHeader="RadioButtonsHeader"
                   FontWeight="Bold">
    <x:String>Option 1</x:String>
    <x:String>Option 2</x:String>
</muxc:RadioButtons>

As written above, the ComboBox names that resource ComboBoxHeaderThemeFontWeight so if I were to stay consistent with the naming here, then it would be RadioButtonsHeaderThemeFontWeight. Again, not really sure why the "Theme" term is needed here...

The TextBox does not expose such a resource today but instead hard-codes the font weight of the header in the template:

microsoft-ui-xaml/dev/CommonStyles/TextBox_themeresources.xaml

Line 287 in f4c811b

FontWeight="Normal"

Since the TextBox.FontWeight API already affects the TextBox's text, to allow individual customization of the header font weight, we should also introduce a theme resource here for the TextBox. Perhaps named TextControlHeaderThemeFontWeight (or TextBoxHeaderThemeFontWeight). Both the TextControl and the TextBox prefixes are used for for the TextBox's header resources.

Adding such a TextBox resource could also be done as part of this.

[StephenLPeters]

[StephenLPeters]

If we were to include font wieght why wouldn't we also include font family and font size?

[StephenLPeters]

@MikeHillberg can you weigh in about the font customizations?

[Felix-Dev]

If we were to include font wieght why wouldn't we also include font family and font size?

Yep, already thinking about them and writing a feature proposal as we speak since that would be a new addition for all the controls (TextBox/ComboBox/RadioButtons/...) using a header as far as I can tell on first look :) Didn't mention them in this PR because I viewed that slightly out of scope here.

[StephenLPeters]

I think a feature proposal is appropriate and can be done independently of this work.

[StephenLPeters]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).