WPF【11_5】WPF实战-重构与美化(MVVM 实战)

11-10 【重构】创建视图模型，显示客户列表

正式进入 MVVM 架构的代码实战。在之前的课程中， Model 和 View 这部分的代码重构实际上已经完成了。 Model 就是在 Models 文件夹中看到的两个文件， Customer 和 Appointment。 而 View 则是所有与 UI相关的 xaml 页面。接下来，我们将会把主要精力集中在 ViewModel 视图模型的实现上，并通过视图模型来绑定 UI 界面与数据模型。

右击“WPF_CMS”项目，新建一文件夹 ViewModels 。根据 MVVM 的设计原则，理论上，每一个页面都会对应一个 ViewModel。 而我们只有这个 MainWindow.xaml 页面，所以我们给这个 MainWindow 创建视图模型，新建文件 MainViewModel.cs。

左侧导航栏的客户列表，对应 Customer 客户模型，封装为 List<Customer>类型并初始化为空列表。
接下来我们需要从数据库中获得数据，创建方法， LoadCustomers，为了获取到更多的数据，我们可以使用一个 Include 语句，把预约列表也一起装进来。
--\ViewModels\MainViewModel.cs

public List<Customer> Customers { get; set; } = new();

public void LoadCustomers()
{
    using (var db = new AppDbContext())
    {
        Customers = db.Customers.Include(c => c.Appointments).ToList();
    }
}

现在我们就可以在主界面中使用这个视图模型了。
首先声明一个私有的视图模型 _viewModel，类型为 MainViewModel.。
第二步，在 MainWindow 的构造方法中，初始化这个视图模型。
第三步，向这个视图模型中加载数据。调用 LoadCustomers 这个方法，现在客户数据就从数据库中加载到客户列表了。
最后一步也是最重要的，我们需要把视图模型绑定在页面的数据上下文中，使用 DataContext， 让它等于 _viewModel。

--\MainWindow.xaml.cs

public partial class MainWindow : Window
{
    private MainViewModel _viewModel;
    public MainWindow()
    {
        InitializeComponent();
        _viewModel = new MainViewModel();

        _viewModel.LoadCustomers();

        DataContext = _viewModel;
    }
    ……
}

MainWindow.xaml 页面中，再进行相应的绑定
--\MainWindow.xaml
<ListView ItemsSource="{Binding Customers, Mode=OneWay}" DisplayMemberPath="Name" />

11-11 【实战】双向绑定，选择客户

接下来，我们还需要选择客户，并且在客户的详情页面中显示，甚至更改当前的客户信息。对于选择客户的过程我们同样可以通过视图模型来完成，但这次我们不但需要显示当前的客户选择，还需要通过 UI 的变化来操纵选择数据。所以对于客户选择来说，视图模型的绑定是双向的。

--\ViewModels\MainViewModel.cs
添加一个新的数据，用来对应当前的选择客户

private Customer _selectedCustomer;
public Customer SelectedCustomer
{
    get => _selectedCustomer; 
    set
    {
        if (value != _selectedCustomer)
        {
            _selectedCustomer = value;
        }
    }
}

OK，视图模型我们处理完毕，其实就是配置了选择客户的数据读取和操作的方法。
--\MainWindow.xaml
接下来回到 xaml 文件，给客户列表 ListView 绑定一个 SelectedItem 属性。
<ListView ItemsSource="{Binding Customers, Mode=OneWay}" DisplayMemberPath="Name" SelectedItem="{Binding SelectedCustomer, Mode=TwoWay}" />

接下来我们还需要更新客户的详情，以及客户的预约列表的 UI。
这里我们不仅需要显示客户的数据，还需要处理客户数据的更新。所以绑定同样也是双向的，Mode=TwoWay。
我们希望在更改客户名称的时候，客户名称可以同步反映在客户列表中，使用 UpdateSourceTrigger=PropertyChanged。
<StackPanel Grid.Row="1" Grid.Column="1">
    <TextBlock Text="姓名" Margin="10 10 10 0"/>
    <TextBox Margin="10" Text="{Binding SelectedCustomer.Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
    <TextBlock Text="身份证" Margin="10 10 10 0"/>
    <TextBox Margin="10" Text="{Binding SelectedCustomer.IdNnumber, Mode=TwoWay}" />
    <TextBlock Text="地址" Margin="10 10 10 0"/>
    <TextBox Margin="10" Text="{Binding SelectedCustomer.Address, Mode=TwoWay}" />
    <Button Content="保存" Margin="10 10 10 30" VerticalAlignment="Bottom" HorizontalAlignment="Left" />
</StackPanel>

<StackPanel Grid.Row="1" Grid.Column="2">
    <ListView ItemsSource="{Binding SelectedCustomer.Appointments, Mode=TwoWay}" />
    <TextBlock Text="添加新预约" />
    <DatePicker Margin="10" />
    <Button Content="预约" />
</StackPanel>