WPF MVVM 数据绑定——一种方法？答案

【问题标题】：WPF MVVM Data Binding - One Way?WPF MVVM 数据绑定——一种方法？
【发布时间】：2020-04-21 14:33:15
【问题描述】：

我是 WPF 新手，但对 MVVM 了解不多，到目前为止，这就是我实现的。

UpdateTableView - 视图（较大用户控件的短 sn-p）

<UserContol.DataContext>
    <local:UpdateTableViewModel />
</UserContol.DataContext>

<StackPanel>
    <TextBox Text="{Binding InputPath}"/>
    <TextBlock Content="Placeholder" />
</StackPanel>

UpdateTableModel - 模型

public class UpdateTableModel : ObservableObject
{
    private string _inputPath;

    public string InputPath
    {
        get
        {
            return _inputPath;
        }
        set
        {
            if (value != _inputPath)
            {
                _inputPath = value;
                OnPropertyChanged("InputPath");
            }
        }
    }
}

ObservableObject

public class ObservableObject : INotifyPropertyChanged 
{
    public event PropertyChangedEventHandler PropertyChanaged;

    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChangedEventHandler handler = this.PropertyChanaged;
        if (handler != null)
        {
            PropertyChangedEventArgs e = new PropertyChangedEventArgs(propertyName);
            handler(this, e);
        }
    }
}

还有一个空的 UpdateTableViewModel

class UpdateTableViewModel : ObservableObject { }

我的问题是我将如何使用数据绑定，以便作为用户，当我在文本框中输入 inputPath 时，首先我输入的任何内容都存储在属性 _inputPath 中，这样我就可以在后面的代码中使用它并另外反映在文本块。

我进行了一些研究，发现了一种和两种数据绑定方式，但我无法确定我还需要为我想要的功能添加什么。

提前致谢。

【问题讨论】：

TextBox.Text 自动绑定TwoWay。这是默认行为。因此，如果不明确指定Binding.Mode，输入TextBox 的文本将自动发送到绑定源。在您的情况下，输入将自动发送到 InputPath 属性。
为什么你的UpdateTableViewModel 是空的？它应该包含InputPath 属性。
@BionicCode。谢谢你的cmets。 UpdateTableViewModel 是空的，因为我不知道我需要什么。我试图找到教程或示例，但大多数都不清楚。谢谢
UpdateTableModel 是关于什么的，你想从视图模型中设置它吗？
@BionicCode 我一直在尝试实现 MVVM。在我的理解中，视图是 xaml，viewModel 公开模型，模型具有视图的属性等。这是不正确的吗？

标签： wpf mvvm data-binding

【解决方案1】：

您的视图模型必须包含您要绑定到的属性。

通常TextBox.Text 属性会自动绑定TwoWay。这是默认行为。因此，在不明确指定Binding.Mode 的情况下，输入TextBox 的文本将自动发送到绑定源。在您的情况下，输入将自动发送到 InputPath 属性。

UpdateTableModel.cs

public class UpdateTableModel
{
  public void SaveUserNameToFile(string filePath, string userName)
  {
    File.AppendAllText(filePath, userName, Encoding.UTF8);
  }
}

UpdateTableViewModel.cs
RelayCommand 的实现可以在
Microsoft Docs：模式 - 具有模型-视图-视图模型设计模式的 WPF 应用程序 - Relaying Command Logic

中找到

class UpdateTableViewModel : ObservableObject 
{ 
  private UpdateTableModel UpdateTableModel { get; }

  public ICommand SaveUserCommand => new RelayCommand(SaveUserName);

  private string _userName;
  public string UserName
  {
    get => _userName;
    set
    {
      if (value != _userName)
      {
        _userName = value;
        OnPropertyChanged(nameof(UserName));
      }
    }
  }

  private string _inputPath;
  public string InputPath
  {
    get => _inputPath;
    set
    {
      if (value != _inputPath)
      {
        _inputPath = value;
        OnPropertyChanged(nameof(InputPath));
      }
    }
  }

  public UpdateTableViewModel()
  {
    this.UpdateTableModel = new UpdateTableModel();
  }

  // Alternative constructor
  public UpdateTableViewModel(UpdateTableModel updateTableModel)
  {
    this.UpdateTableModel = updateTableModel;
  }

  private void SaveUserName(object param)
  {
    // Pass the data to the model
    this.UpdateTableModel.SaveUserNameToFile(this.InputPath, this.UserName);
  }
}

UpdateTableView.xaml

<UserControl>
  <UserContol.DataContext>
    <local:UpdateTableViewModel />
  </UserContol.DataContext>

  <StackPanel>
    <TextBox Text="{Binding UserName}" />
    <TextBox Text="{Binding InputPath}" />
    <Button Command="{Binding SaveUserCommand}" 
            Content="Save to File" />
  </StackPanel>
</UserControl>

【讨论】：