0

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?

enter image description here

enter image description here

Matt
  • 7,004
  • 11
  • 71
  • 117

1 Answers1

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.

Community
  • 1
  • 1
Sheridan
  • 68,826
  • 24
  • 143
  • 183
  • my problem is that although I have a "SelectedPageChanged" event I like to implement event handling (the loading and displaying of a different view) purely within xaml. How can I do that? – Matt Dec 23 '14 at 10:56
  • The above and linked answer shows you exactly how to do that. Once you have setup your `DataTemplate`s for your view models, then all you need to do is set the `YourViewModelProperty` to a new view model as I showed you above. That's it. – Sheridan Dec 23 '14 at 11:06
  • ok I admit I need to dig a little into this as I am very new to WPF. Thanks, your comments walkthrough will hopefully get me started. – Matt Dec 23 '14 at 11:14
  • this seems to be way more complicated than initially thought: (1) The event has to be captured via an EventToCommand EventTrigger [which in its own right involves either a third party library or a complex workaround], (2) the event args need to be converted via an explicit converter, (3) the view model is exchanged in the main view model [using explicit event args or strings that still couple the view model to the model], [4] the content in the main view needs to be bound to the new view model (view). All that in the name of testability? Makes me wonder...am I missing sth? – Matt Dec 23 '14 at 14:26
  • You are indeed missing something... there are no events utilised in this setup at all and actually, it's *very* simple. You need a base class, a base class property, some `DataTemplate`s and a `ContentControl`. That's it... perhaps you should read the answers again. – Sheridan Dec 23 '14 at 14:29
  • so how will my main view model know when and which view is to be loaded/displayed? I want to use the MvvMLight library and the only way I know which view is desired is by checking the event "PageSelectionChanged" of the RibbonControl (DevExpress). Otherwise how would my Main View Model know which viewmodel to change to? Also, as mentioned I work with a ViewModelLocator. – Matt Dec 23 '14 at 14:43
  • The main view model should have `ICommand` properties that are data bound to UI `Button`s and can be executed to change the base view model property which will change the view. However, if you're using a framework, then you might as well use that framework to do this. – Sheridan Dec 23 '14 at 14:45
  • Its not as easy as you claim it to be. Many third party libraries (such as RibbonControl of Devexpress only offers an event when RibbonPages are selected). Thanks for your input but so far I have to say I am stunned how many circles MVVM and in general xaml makes one run around the issue at hand. The same issue required 1-2 lines of code behind [handle the event and hooking up a part of the dockcontrol with the desired usercontrol]. Shocking!!! (but hey, maybe the lightbulb goes off at some later point...so far I see dependencies between view<->viewmodel everywhere) – Matt Dec 23 '14 at 14:51
  • I'm sorry you're struggling with this... but it really *is* that easy. Just use whatever you can understand. – Sheridan Dec 23 '14 at 15:00
  • would you know why when I use `` within ` that the only thing that shows is the textual name of the viewmodel. I am sure I wired up everything correctly because depending on choice I see the 2 different names of my view models. But only the name shows on my main window instead of having the usercontrol (view) rendered. – Matt Dec 23 '14 at 16:43
  • Ok I figured out I need a DataTemplate for the view to render. But I do not understand why. Why do I need a ViewModelLocator if I have a DataTemplate? And also would this mean I need to add each new view/viewmodel to both the ViewModelLocator AND setup a data template in app.xaml? Thanks a lot for your help and patience, I am sure this is my last question. – Matt Dec 23 '14 at 17:04
  • *Why do I need a ViewModelLocator if I have a DataTemplate?*... for my suggestion to work, you don't need any `ViewModelLocator`. The `DataTemplate` is just to tell WPF how to render your data type. – Sheridan Jan 05 '15 at 09:34