如何在 MVVM 中使用两个用户控件创建主详细信息视图？答案

【问题标题】：How to create Master Detail view with two user controls in MVVM?如何在 MVVM 中使用两个用户控件创建主详细信息视图？
【发布时间】：2023-03-27 00:18:01
【问题描述】：

我对如何使用两个不同的用户控件创建主从视图有点困惑。

一共有三种选择，

选择 1

CustomerMasterView + CustomerMasterViewModel
CustomerDetailView + CustomerDetailViewModel

并将两个视图模型保留在 App.Resources 中

但是这样做，所有静态资源源标记代码的绑定变得复杂。

选择 2

CustomerViewModel
CustomerMasterView
CustomerDetailView

两个视图通过 App.Resources 共享相同的 ViewModel，即使绑定代码有太多项目。

选择 3

CustomerMasterView + CustomerMasterViewModel
CustomerDetailView + CustomerDetailViewModel

两个视图都将 DataContext 设置为它们对应的 ViewModel。现在这是一个小问题， CustomerMasterView 有 Selector（ListBox 或 DataGrid 或其他），其 SelectedItem 需要作为双向绑定绑定到 CustomerDetailViewModel 的“Customer”属性。

好看吗？

<!-- CustomerMasterView -->

<ListBox
    ItemsSource="{Binding CustomerList}"
    SelectedItem="{Binding DataContext.Customer,ElementName=customerDetailView}"
    />

<local:CustomerDetailView
    x:Name="customerDetailView"
    />

但是这样做，我违背了 ViewModel 的目的，因为它在我的 UI 代码中添加了更多的依赖性。

哪一种是最首选的方式，或者还有其他方式吗？我应该创建嵌套视图模型吗？

我也在尝试学习 Prism，我对如何正确地做到这一点没有什么困惑，任何帮助都会得到帮助。

【问题讨论】：

标签： silverlight data-binding mvvm prism

【解决方案1】：

在我看来，最简单的方法是拥有一个具有两个 UserControl 的单一视图模型。

您的 ViewModel 将包含您的客户列表以及“ActiveCustomer”或“SelectedCustomer”。您的 MasterView（将 DataContext 设置为您的 ViewModel）将包含您的列表，如下所示：

<ListBox ItemsSource="{Binding Customers}" SelectedItem="{Binding ActiveItem, Mode=TwoWay}" />

您的 MasterView 还将包括您的 DetailsView（另一个 UserControl）。它看起来像这样：

<views:DetailsUserControl DataContext="{Binding ActiveItem}" />

【讨论】：

相反，我使用 ActiveItem 的嵌套视图模型，因为详细视图模型已经有很多东西了。

【解决方案2】：

您可能对 WPF Application Framework (WAF) 的 BookLibrary 示例应用程序感兴趣。它展示了如何使用两个视图（单独的用户控件）和两个视图模型来实现主/细节场景。

【讨论】：