Как создать представление Master Detail с двумя пользовательскими элементами управления в MVVM?

Question

Меня немного смущает, как создать представление Master Detail с двумя различными пользовательскими элементами управления.

Есть три варианта,

Выбор 1

CustomerMasterView + CustomerMasterViewModel
CustomerDetailView + CustomerDetailViewModel

И держите обе модели просмотра в App.Resources

Но при этом привязка становится сложной со всем исходным кодом разметки статических ресурсов.

Выбор 2

CustomerViewModel
CustomerMasterView
CustomerDetailView

Оба представления совместно используют один и тот же ViewModel через App.Resources, хорошо, даже если в коде привязки слишком много элементов.

Выбор 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, поскольку она добавляет больше зависимости в мой код пользовательского интерфейса.

Какой из них является наиболее предпочтительным или есть другой способ? Должен ли я создавать вложенные модели просмотра?

Я также пытаюсь изучить Призму, и у меня нет путаницы в том, как сделать это правильно, любая помощь будет оценена.

Answer 1

На мой взгляд, самым простым способом было бы иметь одну модель представления с двумя пользовательскими элементами управления.

В вашей ViewModel будет список ваших клиентов, а также "ActiveCustomer" или "SelectedCustomer".Ваш MasterView (с DataContext, установленным для вас ViewModel) будет содержать ваш список, подключенный так:

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

Ваш MasterView также будет включать ваш DetailsView (еще один UserControl).Это выглядит так:

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

Answer 2

Вас может заинтересовать BookLibrary пример приложения WPF Application Framework (WAF) .В нем показано, как реализовать сценарий Master / Detail с двумя представлениями (отдельными элементами управления пользователя) и двумя моделями представления.