How to change whole views in MVVM without “grandparent” DataContext?

Question

All examples which I’ve seen on the Internet has two areas – one area is for buttons to change views and another area is for views which should be changed by that buttons. So it works until you try to access commands located in the "grand-parent" data-context. However, I would like to change an entire view to another view without dividing areas or any side bar and sending data from View1 to View2, then updating View1.

I am trying to change Views in an MVVM application. For example, I have “ApplicationView” ( a host which contains DataTemplates of Views1(UserControl1) and View2(UserControl2)). These user controls have its own datacontext. xaml Of ApplicationView is:

<Window ……..>    
<Window.Resources>
    <DataTemplate DataType="{x:Type localViewModel:VMMain}">
        <localView:MainView/>            
    </DataTemplate>
    <DataTemplate DataType="{x:Type localViewModel:VMEditStudent}">
        <localView:EditStudentView/>
    </DataTemplate>
</Window.Resources>    
<Grid>
    <ContentControl Content="{Binding CurrentPageViewModel}"/>
</Grid>

enter image description here

View 1(UserControl1) has own DataContext: enter image description here

And View 2(UserControl2) has own DataContext too:

enter image description here

What I want is select an item(Adam ) in the DataGrid, click a button “Edit”, then View1 should be replaced by View 2 with filled data from a datagrid. As I understand I should change View1 by handling command of button “Edit”, and then View 2 should be displayed, then I change data and then View1 should be updated. How to do it?

Some examples with code will be greatly appreciated! Thanks.

Did you had a look at Prism Framework and it's RegionManager? — Tseng
@Tseng, Yeah, I've seen this examples and these examples was wit sidebar. — StepUp
RegionManager works independently of the Sidebar. You define regions in XAML and name them, then navigate within them from code. The reference app shows best practices and such behavior as you suggest isn't considered best practice on Desktop and resembles more to Mobile Apps usability. Still the RegionManager should also cover your case — Tseng
@Tseng, thanks. However, I couldn't find a good example without sidebar navigation. Please, could you be kind to share some example or link to see the example. — StepUp

Sheridan Sheridan · Accepted Answer · 2015-03-02T13:45:54

Your example is similar to the typical example that you mentioned except that your view button is in one of the views. The solution is simply to data bind the Button.Command property to the command in the parent view model. That can be accomplished with a simple RelativeSource Binding:

In UserControl1 XAML:

<Button Content="Edit" Command="{Binding DataContext.EditCommand, 
    RelativeSource={RelativeSource AncestorType={x:Type YourPrefix:YourParentView}}}" />

In parent view model Edit Command, you'd need something like this:

CurrentPageViewModel = new ViewModelForUserControl2(UserControl1.SelectedDataObject);

Of course, you'd also have to expose the selected item as a DependencyProperty from UserControl1 so that you could pass it to UserControl2.

How to change whole views in MVVM without “grandparent” DataContext?

1 Answers