如何重写WinUI 3 NumberBox清除按钮的默认行为？

要修改NumberBox清除按钮默认重置为0的行为，实现点击时执行自定义命令或设置指定默认值，可通过以下两种方式实现：

方式一：MVVM风格（附加属性绑定命令） #

适合遵循MVVM模式的项目，将清除逻辑与UI分离。

1. 创建附加属性类 #

定义附加属性，用于绑定清除按钮触发的命令：

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using System.Windows.Input;

public static class NumberBoxExtensions
{
    public static readonly DependencyProperty ClearCommandProperty =
        DependencyProperty.RegisterAttached(
            "ClearCommand",
            typeof(ICommand),
            typeof(NumberBoxExtensions),
            new PropertyMetadata(null, OnClearCommandChanged));

    public static ICommand GetClearCommand(NumberBox numberBox)
    {
        return (ICommand)numberBox.GetValue(ClearCommandProperty);
    }

    public static void SetClearCommand(NumberBox numberBox, ICommand value)
    {
        numberBox.SetValue(ClearCommandProperty, value);
    }

    private static void OnClearCommandChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        if (d is NumberBox numberBox)
        {
            numberBox.ClearButtonClick -= NumberBox_ClearButtonClick;
            if (e.NewValue is ICommand command)
            {
                numberBox.ClearButtonClick += NumberBox_ClearButtonClick;
            }
        }
    }

    private static void NumberBox_ClearButtonClick(NumberBox sender, NumberBoxClearButtonClickEventArgs args)
    {
        // 阻止默认清除行为（默认会将值设为0）
        args.Handled = true;
        // 执行绑定的自定义命令
        var command = GetClearCommand(sender);
        command?.Execute(null);
    }
}

2. ViewModel中定义命令 #

在ViewModel里实现自定义重置逻辑，比如将值设为5：

using System.Windows.Input;

public class MainViewModel
{
    public double NumberValue { get; set; } = 0;

    public ICommand ResetNumberCommand { get; }

    public MainViewModel()
    {
        ResetNumberCommand = new RelayCommand(ResetToCustomDefault);
    }

    private void ResetToCustomDefault()
    {
        // 设置自定义默认值
        NumberValue = 5;
    }
}

// 基础RelayCommand实现
public class RelayCommand : ICommand
{
    private readonly Action _execute;
    private readonly Func<bool> _canExecute;

    public RelayCommand(Action execute, Func<bool> canExecute = null)
    {
        _execute = execute ?? throw new ArgumentNullException(nameof(execute));
        _canExecute = canExecute;
    }

    public event EventHandler CanExecuteChanged;

    public bool CanExecute(object parameter) => _canExecute?.Invoke() ?? true;

    public void Execute(object parameter) => _execute();

    public void RaiseCanExecuteChanged() => CanExecuteChanged?.Invoke(this, EventArgs.Empty);
}

3. XAML中绑定使用 #

将NumberBox的Value和附加属性ClearCommand绑定到ViewModel：

<Page
    x:Class="YourNamespace.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:YourNamespace">

    <Page.DataContext>
        <local:MainViewModel />
    </Page.DataContext>

    <StackPanel Padding="20">
        <NumberBox 
            Value="{x:Bind NumberValue, Mode=TwoWay}"
            local:NumberBoxExtensions.ClearCommand="{x:Bind ResetNumberCommand}"
            ClearButtonVisibility="Visible" />
    </StackPanel>
</Page>

方式二：代码后台直接处理（适合简单场景） #

无需MVVM模式时，可直接在页面后台处理清除按钮点击事件：

1. XAML中绑定事件 #

<NumberBox 
    x:Name="CustomNumberBox"
    ClearButtonVisibility="Visible"
    ClearButtonClick="CustomNumberBox_ClearButtonClick" />

2. 后台实现事件逻辑 #

private void CustomNumberBox_ClearButtonClick(NumberBox sender, NumberBoxClearButtonClickEventArgs args)
{
    // 阻止默认行为
    args.Handled = true;
    // 设置自定义默认值
    sender.Value = 5;
}

核心逻辑说明：

• 设置args.Handled = true可覆盖NumberBox清除按钮的默认行为（默认将值设为0）。
• 两种方式均可根据需求自定义清除后的数值或执行其他业务逻辑。

内容的提问来源于stack exchange，提问作者Patrik Valyon