WinUI 3 MVVM模式下表单录入后清空控件的实现方案咨询

是的，**结合「控件双向绑定到ViewModel字段」+「命令绑定」**的方式，是WinUI3 MVVM模式下处理表单录入、数据验证并重置控件的最佳实践。

你当前的实现是把TextBox的文本作为CommandParameter一次性传递给ViewModel，这种模式下ViewModel只拿到了参数值，和UI控件没有持续的绑定关系，自然无法直接控制控件的内容清空。

1. 修改ViewModel，添加表单绑定字段 #

利用CommunityToolkit.Mvvm的[ObservableProperty]特性，在ViewModel中添加对应表单输入的可观察属性，同时修改AddSupplier命令逻辑，直接使用这些属性值，完成后重置字段：

public partial class SupplierViewModel: ObservableObject
{
    RecipeDBContext context;

    [ObservableProperty]
    private ObservableCollection<Supplier> _suppliers;

    // 添加表单输入的绑定字段
    [ObservableProperty]
    private string _name = string.Empty;
    [ObservableProperty]
    private string _address = string.Empty;
    [ObservableProperty]
    private string _phoneNumber = string.Empty;
    [ObservableProperty]
    private string _website = string.Empty;

    public SupplierViewModel()
    {
        context = new RecipeDBContext();
        _suppliers = new ObservableCollection<Supplier>();
        UpdateSuppliers(context.Suppliers.ToList());
        _suppliers.CollectionChanged += this.OnCollectionChanged;
    }

    public void UpdateSuppliers(List<Supplier> suppliers)
    {
        Suppliers.Clear();        
        foreach (Supplier supplier in suppliers)
        {            
            Suppliers.Add(supplier);
        }
    }

    [RelayCommand]
    private void AddSupplier()
    {        
        // 数据验证示例
        if (string.IsNullOrWhiteSpace(Name))
        {
            // 这里可以添加验证提示逻辑（比如弹窗、绑定错误提示）
            return;
        }

        // 创建Supplier并入库
        var newSupplier = new Supplier(Name, Address, PhoneNumber, Website);
        Suppliers.Add(newSupplier);

        // 重置表单字段，UI会自动同步清空
        Name = string.Empty;
        Address = string.Empty;
        PhoneNumber = string.Empty;
        Website = string.Empty;
    }

    void OnCollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
    {        
        if (e.NewItems != null)
        {            
            foreach (Supplier newItem in e.NewItems)
            {                                              
                context.Suppliers.Add(newItem);                
            }            
        }

        if (e.OldItems != null)
        {
            foreach (Supplier oldItem in e.OldItems)
            {                
                context.Suppliers.Remove(oldItem);
            }
        }
        context.SaveChanges();
    }
}

2. 修改XAML，绑定控件到ViewModel字段 #

把每个TextBox的Text属性双向绑定到ViewModel的对应字段，按钮去掉CommandParameter：

<Grid Loaded="OnRootGridLoaded">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

<TextBlock Text="Name" Grid.Row="0" Grid.Column="0" />
<TextBox x:Name="NameTextBox" Grid.Row="0" Grid.Column="1" 
         Text="{x:Bind ViewModel.Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>

<TextBlock Text="Address (Optional)" Grid.Row="1" Grid.Column="0" />
<TextBox x:Name="AddressTextBox" Grid.Row="1" Grid.Column="1"
         Text="{x:Bind ViewModel.Address, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>

<TextBlock Text="PhoneNumber (Optional)" Grid.Row="2" Grid.Column="0" />
<TextBox x:Name="PhoneNumberTextBox" Grid.Row="2" Grid.Column="1"
         Text="{x:Bind ViewModel.PhoneNumber, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>

<TextBlock Text="Website" Grid.Row="3" Grid.Column="0" />
<TextBox x:Name="WebsiteTextBox" Grid.Row="3" Grid.Column="1"
         Text="{x:Bind ViewModel.Website, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>

<Button x:Name="AddSupplierBtn" Content="Add Supplier" Grid.Row="4" Grid.Column="1"
        Command="{x:Bind ViewModel.AddSupplierCommand}"/>
</Grid>

• 完全符合MVVM规范：ViewModel不依赖任何UI控件，只处理数据逻辑，View只负责展示和绑定
• 自动同步数据：双向绑定让UI输入实时同步到ViewModel字段，ViewModel修改字段也会自动更新UI
• 轻松重置控件：只需在命令中把绑定字段设为空字符串，UI文本框就会自动清空
• 便于数据验证：可以在ViewModel中集中处理验证逻辑，无需在View的事件中写代码

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