Proposal: NumberBox: Improve the lightweight styling experience

[Felix-Dev]

Proposal: NumberBox: Improve the lightweight styling experience

Summary

The lightweight styling experience of the NumberBox control currently is

• not coherent
• not isolated from the rest of the control system
• limited

Lightweight-styling experience is not coherent

• To set the foreground appearance of the Popup SpinButton, developers need to use the RepeatButtonForeground theme resource.
• To set the background of the Popup, developers need to use the SystemControlBackgroundAltHighBrush theme resource.
• To set the border thickness and the border color of the Popup, developers need to use the ToolTipBorderThemeThickness and ToolTipBorderBrush theme resources.

Lightweight-styling experience is not isolated from the rest of the control system

Since the NumberBox SpinButton Popup is a Popup control, the theme resources controlling its appearances need to be defined at the app level. Consequently, overriding theme resources like ToolTipBorderBrush will also affect the app's tooltips then. Since tooltips also can only be be lightweight-styled on the app level, developers here will have to create a new (implicit) ToolTip style even though all they wanted to do was style the NumberBox Popup.

Lightweight-styling experience is currently limited

It's not possible right now to individually change the foreground of the NumberBox SpinButtons with lightweight styling. As such, a design like the one below cannot currently be achieved without having to re-template the control or walk the visual tree:

Conclusion

I propose to create a fully-featured lightweight-styling experience for the NumberBox by introducing dedicated theme resources, like:

* NumberBoxPopupBackground
* NumberBoxPopupBorderBrush
* NumberBoxPopupBorderThickness

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

* NumberBoxSpinButtonUpBackground + ["", PointerOver, Pressed, Disabled]
* NumberBoxSpinButtonUpForeground + ["", PointerOver, Pressed, Disabled]
* NumberBoxSpinButtonUpBorderBrush + ["", PointerOver, Pressed, Disabled]
* NumberBoxSpinButtonDownBackground + ["", PointerOver, Pressed, Disabled]
* NumberBoxSpinButtonDownForeground + ["", PointerOver, Pressed, Disabled]
* NumberBoxSpinButtonDownBorderBrush + ["", PointerOver, Pressed, Disabled]

[StephenLPeters]

@SavoySchuler FYI