dynamic bottom of Dockpanel as function of chosen Ribbonpage using MVVM

Question

I currently have a Ribboncontrol on top of my main window. On the Ribboncontrol there are several RibbonPages and depending on which RibbonPage is selected I want to display below the RibbonControl a different IDE Layout that suits the need of the chosen RibbonPage.

Is my approach correct that I create different views/viewmodels for each IDE layout and that with each different RibbonPage that is selected a corresponding view/viewmodel is perused? I like to use this approach because then I would not need to communicate between views/viewmodels because the functionality in each RibbonPage is self-contained.

Each view would be a UserControl that encapsulates a DockLayoutManager. I included some screenshots below (SS1 = MainWindow onto which I want to load different views; SS2 = the view that represent a UserControl that in turn represents a DockLayoutManager with all associated LayoutPanels, DocumentPanels, ....)

Question: How would I go about implementing that and is that a workable solution to display different views as a function of the chosen RibbonPage?

Answer 1

It is common to display different view pages that relate to different functions and or tabs of a RibbonControl. Typically you'd have a base view model class that all of your view models extend and a property of that type in your parent view model... let's call it YourViewModelProperty. To change the view, you'd just need to set a new view model to that property:

YourViewModelProperty = new SomeDerivedViewModel()

You can link each UserControl to its related view model in DataTemplates declared in App.xaml. In this way, they'll all be available to every view in the application. You can find out more information regarding this method in my answer to the WPF - automatic view resolving for view model question here on Stack Overflow.

---

UPDATE >>>

There is a much better explanation available in my answer to the WPF MVVM navigate views question.