在 MVVM 中为 WPF 实现一个简单的 Master-Detail 场景答案

【问题标题】：Implementing a simple Master-Detail scenario for WPF in MVVM在 MVVM 中为 WPF 实现一个简单的 Master-Detail 场景
【发布时间】：2010-11-14 01:36:45
【问题描述】：

我有一个使用 MVVM 的 WPF 应用程序。我有一些用户控件应该使用简单的数据绑定在 3 个文本框控件中显示人名、姓氏和电子邮件。

用户控件有一个简单的组合框，用户可以在其中选择用户的 ID，因此应加载具有该 ID 的人员记录（其数据从数据库中获取），然后 FirstName、LastName 和 Email 将显示在文本框。

我有一个用户控件，其中包含 ID 的组合框和三个属性的 3 个文本框，一个 ViewModel 类和一个具有三个属性（FirstName、LastName 和 Email）的模型类（person 类）。

使用 MVVM 实现此行为的最简单方法是什么（最好）？有样品吗？

【问题讨论】：

我认为您需要进一步澄清您的问题，您说您使用的是 MVVM，那么您在示例中面临的限制是什么？

标签： wpf data-binding mvvm

【解决方案1】：

我在这里猜测，因为您的问题有点模糊，您不太确定如何将各个部分连接在一起。为简单起见，让我们将 ViewModel 直接挂钩到用户控件并对其进行绑定。

只要您的视图模型填充了正确的人员集，下面的所有绑定都会处理数据并显示正确的数据。记下组合框中所选项目的双向绑定。这允许 WPF 将新选定的项目发送回视图模型。

在UserControl的代码后面：

public MyUserControl()
{
  DataContext = new MyViewModel();
}

在 UserControl 的 XAML 中：

<ComboBox ItemsSource="{Binding AllPeople}" SelectedItem="{Binding SelectedItem, Mode=TwoWay}" />
<TextBox Text="{Binding SelectedItem.LastName}" />
<TextBox Text="{Binding SelectedItem.FirstName}" />
<TextBox Text="{Binding SelectedItem.EmailName}" />

您的视图模型：

private IEnumerable<Person> _allPeople;
    public IEnumerable<Person> AllPeople
    {
        get { return _allPeople; }
        set
        {
            if (_allPeople != value)
            {
                _allPeople = value;
                NotifyPropertyChanged("AllPeople");
            }
        }
    }

    private Person _selectedItem;
    public Person SelectedItem
    {
        get { return _selectedItem; }
        set
        {
            if (!_selectedItem != value)
            {
                _selectedItem = value;
                NotifyPropertyChanged("SelectedItem");
            }
        }
    }

    private void NotifyPropertyChanged(string propertyName)
    {
       if ( PropertyChanged != null)
       {
         PropertyChanged(this, new PropertyChangedEventArgs(propertyName);
       }
    }
}

public class Person
{
 public int PersonId { get; set; }
 public string FirstName { get; set; }
 public string LastName { get; set; }
 public string Email { get; set; }
}

【讨论】：

这段代码显示了一个正确的解决方案，但它不会编译，因为它可以互换使用 SelectedPerson 和 SelectedItem。为清楚起见，该属性应更改为 SelectedPerson。
已修复。更改了 XAML 以匹配 ViewModel。谢谢你捡起来。