How to create a Master Detail view with two user controls in MVVM?

Question

I'm a little confused about how to create a Master Detail view with two different user controls.

There are three options:

Choice 1

CustomerMasterView + CustomerMasterViewModel
CustomerDetailView + CustomerDetailViewModel

And save both models in App.Resources

But by doing this, the binding becomes complex with all the markup code of the original static resource.

Choice 2

CustomerViewModel
CustomerMasterView
CustomerDetailView

Both views use the same ViewModel through App.Resources, even if the binding code contains too many elements.

Choice 3

CustomerMasterView + CustomerMasterViewModel
CustomerDetailView + CustomerDetailViewModel

Both views have a DataContext for their respective ViewModel. Now here is a small problem, CustomerMasterView has a selector (ListBox or DataGrid or something else) whose SelectedItem should be bound to the CustomerDetailViewModel “Client” property as a two-way binding.

?

<!-- CustomerMasterView -->

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

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

, , ViewModel, .

? ?

, , , .

Answer 1

, , UserControls.

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). , "/" ( UserControls) .