Winui3 NumberBox 宽度减小时裁剪

Question

我想减少数字框控件的宽度，因为值最多为 3 位数字，并且我不想让该框占用空白空间，因为我想为其右侧的滑块留出空间.

但是当数字框宽度减小时，它的视觉尺寸开始裁剪，最终左边是圆角，右边是方角：

控件中的某处可能有一些属性，但我找不到任何会产生任何效果的可访问属性。

我研究过制作自定义控件或其他东西。但现在对我来说太复杂了。我现在没有时间学习制作自定义控件只是为了使这些边缘看起来圆润。我宁愿在右侧有方角，或者只有滑块。

Answer 1

NumberBox

控件包含一个名为

InputBox

的 TextBox（检查 generic.xaml）。您需要访问它并更新它

MinWidth

。

例如：

<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;
}

由于您想使用多个

NumberBox

来执行此操作，因此您可能需要创建一个自定义的：

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;
        }
    }
}