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

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 属性。

接下来我们还需要更新客户的详情，以及客户的预约列表的 UI。

这里我们不仅需要显示客户的数据，还需要处理客户数据的更新。所以绑定同样也是双向的，Mode=TwoWay。

我们希望在更改客户名称的时候，客户名称可以同步反映在客户列表中，使用 UpdateSourceTrigger=PropertyChanged。

</StackPanel>

</StackPanel>