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

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: https://github.com/microsoft/microsoft-ui-xaml/blob/865e4fcc00e8649baeaec1ba7daeca398671aa72/dev/NumberBox/NumberBox.xaml#L152

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.

[Felix-Dev]

The added API to enable full glyph customization could resemble the TabViewItem.IconSource API and look like this:

public class NumberBox
{
    public IconSource IncrementIconSource { get; set; }
    public IconSource DecrementIconSource { get; set; }

    public static Windows.UI.Xaml.DependencyProperty IncrementIconSourceProperty { get; };
    public static Windows.UI.Xaml.DependencyProperty DecrementIconSourceProperty { get; };
}

to be used like this:

<NumberBox>
    <NumberBox.IncrementIconSource>
        <FontIconSource FontFamily="Segoe MDL2 Assets" Glyph="&#xE948;" />
    </NumberBox.IncrementIconSource>
    <NumberBox.DecrementIconSource>
        <FontIconSource FontFamily="Segoe MDL2 Assets" Glyph="&#xE949;" />
    </NumberBox.DecrementIconSource>
</controls:NumberBox>

If no Increment/DeccrementIconSource is specified, the NumberBox will fall back to the default glyph for the respective spin button - one of the the up/down glyphs used today.

This will also enable the scenario @maxkatz6 was mentioning where developers might want to specify a BitmapIconSource for the glyphs.

Both API proposals would effectively address my main concern here ensuring developers can swap out the up/down chevrons with +/- symbols if they prefer. Now, it seems to me as if @chigy, @StephenLPeters and the rest of the team have to decide if they also want to enable additional customization (free reign for the developer) or keeping it restricted so that the common UIs are supported but “exotic” UI configurations are made harder to achieve (by “forcing” developers to re-template the control).

That being said, both APIs would require some engineering thinking about finding a clean implementation solution to style the popup indicator symbol in the Compact spin button placement mode. That UI part is currently not directly exposed in the NumberBox control template but resides in a custom TextBox style and the NumberBox swaps out the used TextBox style depending on the spin button placement mode: https://github.com/microsoft/microsoft-ui-xaml/blob/0d08c3bff927776002c0ba8f3d08524fd60f1f92/dev/NumberBox/NumberBox.xaml#L457

Additionally, as already mentioned by @mdtauk, it should be decided if the Popup indicator should consist of two independent icons which are stacked above each other or whether only a single icon is used. Today, a single icon is used as Segoe MDLS 2 Assets provides a nice icon for the up/down chevrons:

The best icon I could find in Segoe MDL2 Assets for the +/- icons seems to be this one:

This icon is probably not the best possible icon UI we could come up here. This would mean that if we decide to stick with the current popup indicator icon implementation (where we only specify a single icon instead of stacking two small icons on top of each other), the MS Design team should perhaps design a new Segoe MDL2 Assets icon (or a new Fluent UI font icon) for this special case for us to use here.

[Fuahi]

I really want a number box Like this

please