WinUI 3 NumberBox Cropping when width decreased

Question

I want to reduce the width of a nubmer box control, because the values are max 3 digits, and I don't want to have the box take up empty space, because I want to leave space for a slider to the right of it.

But when the nubmer box width is reduced,the visual size of it starts to crop and you end up with rounded corners on the left, and square corners on the right:

There might be some property in the control somewhere, but I couldn't find any accessible property that would have any effect.

I looked into making custom controls or something. But that's too complicated for me right now. I don't have time for learning to make custom controls just to make those edges look rounded right now. I'd rather have square corners on the right, or just have the slider.

Answer 1

The NumberBox control contains a TextBox named InputBox (Check the generic.xaml). You need to access it and update its MinWidth.

For example:

<NumberBox Loaded="NumberBox_Loaded" />

private void NumberBox_Loaded(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)
{
    if (sender is not NumberBox numberBox ||
        VisualTreeHelper.GetChild(numberBox, 0) is not Grid grid ||
        VisualTreeHelper.GetChild(grid, 0) is not TextBox inputBox)
    {
        return;
    }

    inputBox.MinWidth = numberBox.ActualWidth;
}

Since you want to do this with several NumberBoxes, you might want to create a custom one:

public class NumberBoxEx : NumberBox
{
    private TextBox? InputBox { get; set; }

    public NumberBoxEx() : base()
    {
        SizeChanged += (_, _) => UpdateInputBoxWidth();
    }

    protected override void OnApplyTemplate()
    {
        base.OnApplyTemplate();

        InputBox = GetTemplateChild(nameof(InputBox)) as TextBox;
        UpdateInputBoxWidth();
    }

    private void UpdateInputBoxWidth()
    {
        if (InputBox is not null)
        {
            InputBox.MinWidth = ActualWidth;
        }
    }
}