WinUI3中NumberBox触发ValueChanged后如何设置有效值？

在GridView的DataTemplate中为每个项配置了Image和NumberBox，图片展示逻辑正常，但在实现NumberBox值变更的有效性校验时遇到问题：当输入无效值后，尝试在ValueChanged回调中修改Text恢复为上一个有效值，回调结束后该值会被控件覆盖，导致UI停留在无效状态。

相关XAML代码 #

<DataTemplate
    x:Key="CardListView_ItemTemplate"
    x:DataType="local:CardItem">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="auto" />
        </Grid.ColumnDefinitions>
        <Image
            x:Name="EditorImage"
            MaxWidth="236"
            DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"
            FlyoutBase.AttachedFlyout="{StaticResource ImagePreviewFlyout}"
            Tapped="Image_Tapped" />
        <NumberBox
            x:Name="EditorNumberBox"
            Grid.Column="1"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            SmallChange="1"
            SpinButtonPlacementMode="Inline"
            Value="0" />
    </Grid>
</DataTemplate>

事件处理代码 #

private Dictionary<string, TypedEventHandler<NumberBox, NumberBoxValueChangedEventArgs>> handlers = new();
...
private void UpdateListView(ListViewBase sender, ContainerContentChangingEventArgs args)
{
    if (args.InRecycleQueue)
    {
        var templateRoot = args.ItemContainer.ContentTemplateRoot as Grid;
        var box = templateRoot.FindName("EditorNumberBox") as NumberBox;
        var item = args.Item as CardItem;
        if (handlers.ContainsKey(item.id))
        {
            box.ValueChanged -= handlers[item.id];
        }
        handlers.Remove(item.id);
    }

    if (args.Phase == 0)
    {
        args.RegisterUpdateCallback(ShowImage);
        args.Handled = true;
    }
}

private void ShowImage(ListViewBase sender, ContainerContentChangingEventArgs args)
{
    if (args.Phase == 1)
    {
        var templateRoot = args.ItemContainer.ContentTemplateRoot as Grid;
        var item = args.Item as CardItem;
        var box = templateRoot.FindName("EditorNumberBox") as NumberBox;
        if (item.Limit == -1)
        {
            box.Maximum = 60;
        }
        else
        {
            box.Maximum = item.Limit;
        }
        box.Minimum = 0;
        TypedEventHandler<NumberBox, NumberBoxValueChangedEventArgs> handler =
            (box, args) =>
            {
                int diff = (int)args.NewValue - (int)args.OldValue;
                int newCount = m_viewModel.getTotalCount() + diff;
                // Strangely, this is true when args.NewValue has value NaN in the debugger
                if (args.NewValue != double.NaN)
                {
                    if (newCount > 0 && newCount <= 60)
                    {
                        Debug.Assert(m_viewModel.ChangeCount(args, item));
                    }
                }
                // This is the Text that gets overwritten after the handler is finished
                box.Text = item.GetCount().ToString();
            };
        handlers[item.id] = handler;
        box.Text = item.GetCount().ToString();
        box.ValueChanged += handler;
    }
}

解决方案 #

1. 核心原因

NumberBox的Text属性与Value属性存在内部同步逻辑：当ValueChanged事件触发后，控件会自动根据新的Value更新Text。直接修改Text会被后续的内部同步操作覆盖，因此必须通过修改Value来同步UI。

2. 修改事件处理逻辑

将回调中修改Text的代码改为修改Value，确保控件能正确同步状态：

TypedEventHandler<NumberBox, NumberBoxValueChangedEventArgs> handler =
    (senderBox, valueArgs) =>
    {
        int diff = (int)valueArgs.NewValue - (int)valueArgs.OldValue;
        int newCount = m_viewModel.getTotalCount() + diff;
        bool isValid = false;
        // 修正NaN判断：用double.IsNaN更可靠
        if (!double.IsNaN(valueArgs.NewValue))
        {
            if (newCount > 0 && newCount <= 60)
            {
                isValid = m_viewModel.ChangeCount(valueArgs, item);
            }
        }
        // 验证不通过时恢复旧值
        if (!isValid)
        {
            // 修改Value而非Text，避免被控件内部逻辑覆盖
            senderBox.Value = item.GetCount();
        }
    };

3. 更优雅的MVVM双向绑定方案

手动处理事件容易出错，推荐改用双向绑定将NumberBox的Value与CardItem的属性关联，在数据模型层处理有效性校验：

• 修改XAML中NumberBox的绑定：

<NumberBox
    x:Name="EditorNumberBox"
    Grid.Column="1"
    HorizontalAlignment="Center"
    VerticalAlignment="Center"
    SmallChange="1"
    SpinButtonPlacementMode="Inline"
    Value="{x:Bind Count, Mode=TwoWay}" />

• 让CardItem实现INotifyPropertyChanged，在属性Setter中处理校验：

public class CardItem : INotifyPropertyChanged
{
    private int _count;
    public int Count
    {
        get => _count;
        set
        {
            // 计算新的总数
            int totalDelta = value - _count;
            int newTotal = ViewModel.Instance.getTotalCount() + totalDelta;
            // 校验规则：总数在1-60之间，当前值在0-上限之间
            int maxLimit = Limit == -1 ? 60 : Limit;
            if (newTotal > 0 && newTotal <= 60 && value >= 0 && value <= maxLimit)
            {
                _count = value;
                OnPropertyChanged();
                // 更新ViewModel总数
                ViewModel.Instance.ChangeCount(this);
            }
            else
            {
                // 验证失败，触发属性通知恢复UI显示
                OnPropertyChanged(nameof(Count));
            }
        }
    }

    // 其他属性（如Limit、id）...

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

• 移除原有的ValueChanged事件绑定逻辑，让双向绑定自动处理UI与数据的同步。

内容的提问来源于stack exchange，提问作者John Glen