Proposal: Provide lightweight styling resources for the glyphs of the NumberBox's spin buttons

[Felix-Dev]

Proposal: Provide lightweight styling resources for the glyphs of the NumberBox's spin buttons

Summary

Currently, the glyphs used for the spin buttons of the NumberBox control cannot be easily changed:

microsoft-ui-xaml/dev/NumberBox/NumberBox.xaml

Line 152 in 865e4fc

Content=""

In order to avoid having to re-template the control or walk the visual tree to change the appearance of these spin buttons, I propose the following theme resources to be added:

• NumberBoxSpinButtonUpGlyph
• NumberBoxSpinButtonDownGlyph
• NumberBoxPopupIndicatorGlyph
• NumberBoxPopupIndicatorFontSize

See the XAML markup below for an example:

<Application.Resources>
    <x:String x:Key="NumberBoxSpinButtonUpGlyph">&#xE948;</x:String>
    <x:String x:Key="NumberBoxSpinButtonDownGlyph">&#xE949;</x:String>
    <x:String x:Key="NumberBoxPopupIndicatorGlyph">&#xECE8;</x:String>
    <x:Double x:Key="NumberBoxPopupIndicatorFontSize">17</x:Double>
</Application.Resources>

This gives us the following resulting UI:

NumberBox SpinButtonPlacementMode - Inline

NumberBox SpinButtonPlacementMode - Compact

The theme resource NumberBoxPopupIndicatorFontSize is needed here because the custom popup indicator glyph would be too small to identify comfortably with the default FontSize of 12:

Rationale

Enable developers to easily style the glyphs of the spin buttons without having to re-template the control.

Important Notes

The theme resources NumberBoxSpinButtonUpGlyph and NumberBoxSpinButtonDownGlyph would have to be set on the app level to take effect in SpinButtonPlacementMode::Compact as they are inside a popup control then.

[StephenLPeters]

@SavoySchuler and @teaP FYI. I think these make sense :)

[Felix-Dev]

@StephenLPeters Should I wait for more input here or can I create a PR?

[StephenLPeters]

My vote is we do it, @SavoySchuler @chigy might want to input. Should we also consider adding resources for the glyph foreground?

[Felix-Dev]

Should we also consider adding resources for the glyph foreground?

I am currently tracking those theme resources in issue #2844
I.e.:

* NumberBoxPopupSpinButtonUpBackground + ["", PointerOver, Pressed, Disabled]
* NumberBoxPopupSpinButtonUpForeground + ["", PointerOver, Pressed, Disabled]
* NumberBoxPopupSpinButtonUpBorderBrush + ["", PointerOver, Pressed, Disabled]
* NumberBoxPopupSpinButtonDownBackground + ["", PointerOver, Pressed, Disabled]
* NumberBoxPopupSpinButtonDownForeground + ["", PointerOver, Pressed, Disabled]
* NumberBoxPopupSpinButtonDownBorderBrush + ["", PointerOver, Pressed, Disabled]

We could "merge" both issues and create a single PR covering them or just tackle them one-by-one (so no issue would be blocked by the other potentially waiting for the resolve of open questions).

[chigy]

I do not quite understand the benefit of suggestion to update the glyph from up/down button to +/-?

[Felix-Dev]

@chigy This proposal is not about changing the default glyphs used for the NumberBox spin buttons. This proposal is merely about providing developers an easy way to customize the appearance of the spin buttons, if they so wish. I don't think having +/- glyphs in a scenario like this is all that uncommen. The NumberBox proposal itself used +/- in the intial mockups.

[chigy]

@Felix-Dev , we need to make sure our platform is predictable to our users. I am not sure making these glyph easily changeable would cause more user pain by having many different variations that user has to learn every time they encounter this control. I do believe the glyph should be customization but not sure if I feel compelled to make it easier because of the concern to add to our user's cognitive load.