如何使用 MVVM 通过命令正确实现 TextChanged 事件

Question

我正在使用 MVVM 模式学习 WPF。我的应用程序正在计算体重指数，所以它真的很简单 - 只是为了帮助我理解这种模式的基础。

我进行了一些试验，并决定通过命令实现 TextChanged 事件，以允许用户在输入身高或体重时看到整体 BMI 标签的变化。

我在其中使用 TextChanged 命令的文本框在 TwoWay 模式下绑定到 ViewModel 属性，因此我认为如果在发生 TextChanged 事件时在绑定到这些文本框的属性上引发 INotifyPropertyChanged 事件，它将自动更新视图，但它不会。

所以问题是，我做错了什么，我该如何正确实施？

附注。除了视图更新之外的所有其他工作都在工作（使用命令，我用断点检查它只是不会改变视图）

提前致谢

自定义命令类：

public class CustomCommand : ICommand
{

    Action<object> action;
    Predicate<object> predicate;

    public CustomCommand(Action<object> execute, Predicate<object> canExecute)
    {
        action = execute;
        predicate = canExecute;
    }

    public event EventHandler CanExecuteChanged
    {
        add
        {
            CommandManager.RequerySuggested += value;
        }
        remove
        {
            CommandManager.RequerySuggested -= value;
        }
    }

    public bool CanExecute(object parameter)
    {
        if (predicate(parameter))
            return true;
        else
            return false;
    }

    public void Execute(object parameter)
    {
        action(parameter);
    }
}

两个文本框之一：

<TextBox HorizontalAlignment="Left" Height="23" Margin="148,83,0,0" TextWrapping="Wrap" Text="{Binding Person.Weight, Mode=TwoWay}" VerticalAlignment="Top" Width="76">
        <i:Interaction.Triggers>
            <i:EventTrigger EventName="TextChanged">
                <i:InvokeCommandAction Command="{Binding Path=textChangedCommand}"></i:InvokeCommandAction>
            </i:EventTrigger>
        </i:Interaction.Triggers>
    </TextBox>

和 ViewModel，其中 TextChanged 方法传递给命令

public class MainWindowViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    public void OnPropertyChanged(string propertyName)
    {
        PropertyChangedEventHandler propertyChanged = PropertyChanged;

        if (propertyChanged != null)
            propertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }


    public ICommand textChangedCommand { get; set; }

    //public List<float> BMI_Changed;

    private PersonInfo person;


    public PersonInfo Person
    {
        get
        {
            return person;
        }
        set
        {
            person = value;
            OnPropertyChanged("Person");
        }
    }

    public MainWindowViewModel()
    {
        //BMI_Changed = new List<float>();
        textChangedCommand = new CustomCommand(TextChanged, CanBeChanged);
        person = Data.personInfo;
    }


    private void TextChanged(object obj)
    {
        OnPropertyChanged("BMI");
        OnPropertyChanged("Weight");
        OnPropertyChanged("Height");
    }

    private bool CanBeChanged(object obj)
    {
        return true;
    }
}

我的其余视图代码，用于一般概述：

<Window x:Class="SportCalculators_MVVM.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:SportCalculators_MVVM"
    xmlns:enum="clr-namespace:SportCalculators_MVVM.Model"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
    mc:Ignorable="d"
    Title="MainWindow" Height="340.278" Width="260.256" Loaded="Window_Loaded"
    DataContext="{Binding Source={StaticResource viewModelLocator}, Path=mainWindowViewModel}">

<Grid x:Name="grid">


    <Slider x:Name="mass" HorizontalAlignment="Right" Margin="0,128,58,0" VerticalAlignment="Top" Width="155" Value="{Binding Person.Weight, Mode=TwoWay}" Maximum="150" Minimum="20"/>
    <Slider x:Name="height" HorizontalAlignment="Left" Margin="40,210,0,0" VerticalAlignment="Top" Width="155" Minimum="100" Maximum="230" Value="{Binding Person.Height, Mode=TwoWay}"/>
    <RadioButton x:Name="sex" Content="Kobieta" HorizontalAlignment="Left" Margin="45,41,0,0" VerticalAlignment="Top" IsChecked="{Binding Person.Sex, Converter={StaticResource ResourceKey=genderConverter}, ConverterParameter={x:Static enum:Sex.Female}}"/>
    <RadioButton x:Name="sex1" Content="M??czyzna" HorizontalAlignment="Left" Margin="150,41,0,0" VerticalAlignment="Top" IsChecked="{Binding Person.Sex, Converter={StaticResource ResourceKey=genderConverter}, ConverterParameter={x:Static enum:Sex.Male}}"/>
    <Label x:Name="massLabel" Content="Waga" HorizontalAlignment="Left" Margin="40,80,0,0" VerticalAlignment="Top"/>
    <Label x:Name="heightLabel" Content="Wzrost" HorizontalAlignment="Left" Margin="39,167,0,0" VerticalAlignment="Top"/>
    <Label x:Name="label" Content="{Binding Person.BMI}" HorizontalAlignment="Left" Margin="39,274,0,0" VerticalAlignment="Top"/>
    <Button Content="Statystyki" HorizontalAlignment="Left" Margin="149,274,0,0" VerticalAlignment="Top" Width="75" RenderTransformOrigin="0.325,-0.438"/>
    <TextBox HorizontalAlignment="Left" Height="23" Margin="148,83,0,0" TextWrapping="Wrap" Text="{Binding Person.Weight, Mode=TwoWay}" VerticalAlignment="Top" Width="76">
        <i:Interaction.Triggers>
            <i:EventTrigger EventName="TextChanged">
                <i:InvokeCommandAction Command="{Binding Path=textChangedCommand}"></i:InvokeCommandAction>
            </i:EventTrigger>
        </i:Interaction.Triggers>
    </TextBox>

    <TextBox HorizontalAlignment="Left" Height="23" Margin="148,170,0,0" TextWrapping="Wrap" Text="{Binding Person.Height, Mode=TwoWay}" VerticalAlignment="Top" Width="76">
        <i:Interaction.Triggers>
            <i:EventTrigger EventName="TextChanged">
                <i:InvokeCommandAction Command="{Binding Path=textChangedCommand}"></i:InvokeCommandAction>
            </i:EventTrigger>
        </i:Interaction.Triggers>
    </TextBox>



</Grid>

Answer 1

Ed Plunkett给出了最简单的解决方案：

当 TextChanged 发生时，无需编写大量代码来实现命令，有一个 Binding 属性UpdateSourceTrigger可确定何时应该进行更新，默认情况下它设置为LostFocus，例如当您单击另一个控件时，如果您想在用户输入时更新它，您需要将值设置为PropertyChanged，就是这样！

<TextBox Text="{Binding Person.Weight, UpdateSourceTrigger=PropertyChanged}">