Dynamically show\hide user controls in a DataWindow

Apr 1, 2012 at 8:26 PM

I am developing a WPF MVVM app using Catel 2.5

I have a single DataWindow (MainWindow with view model) with a menu (4 menu items). Each menu item should display a user control (view). Each user control has its’ own view model. Only one user control is displayed\active at a time. So when a menu item is clicked the IUIVisualizerService unregisters the current view model and registers the new view and view model. Then use the Show method to display the view.

I have 2 questions: Does the above logic\design sound correct? Or am I going about this in the wrong way. I can use the modal pop-up approach as an alternative.


And, in the DataWindow (MainWindow) what can I use as the place holder for the user control? Should I use a Control element bound to a MainWindow view model property? I had a look at MyMediaStuff sample and each user control (view) is defined in the Control.Resources as a ControlTemplate. Is this still the most efficient approach?

Lastly; I am using Catel 2.5 because I am still new to wpf & mvvm so I am sticking to what is most familiar but if upgrading to 3 provided a better solution then this would be fine.

Coordinator
Apr 2, 2012 at 8:57 AM

Don't use the UIVisualizerService for user controls, it's intended for dialogs. What I would do in such a case is create a list menu items with a tag or something like that, which is the model. Then, each user control in the tab control binds to the menu item tag as model and the view model will automatically be constructed.

The MyMediaStuff example indeed uses templates, but this can also be templates of something like that. However, templates can be an efficient approach.

It's always best to use the latest version. In the latest version (3.0.1), it is no longer required to define generic base classes which brings lots of advantages (such as design time support, etc).

Developer
Apr 3, 2012 at 9:36 PM

The feature that you are looking fore about  "how use a control that works as place holder for others controls", and then dynamically activate or deactivate the contained one,  is actually solved by Prism.

The version 3.1 of Catel will come with an extension for Prism. See: Catel.Extensions.Prism.

The beta package is not available yet. You can build the extension from it sources, and use the extension methods of the IUIVisualizerService, that help you  in order to reach your goal.

Coordinator
Apr 4, 2012 at 7:31 AM

And I just published a new beta release to nuget. To install the latest beta, use this command in the package manager shell:

install-package Catel.Extensions.Prism -includeprerelease

Apr 4, 2012 at 8:03 AM

Thank you for the feedback. I will give that a try (Catel.Extensions.Prism), although I am wondering if it is worth the effort\complexity. Bearing in mind my requirements are for a single user control to be active at one time; and not a mosaic of interdependent controls all active together (as shown in the stock trader sample).

The key question being does the Catel.Extensions.Prism solution offer any advantage over a templates based user controls solution, or (my original design) use multiple data windows and the standard dialogs\modal approach?

Coordinator
Apr 4, 2012 at 8:14 AM

No, it allows composite UI. If I understand you correctly, you are looking for some sort of tabcontrol?

Apr 4, 2012 at 10:25 AM

Yes, something like a tab control. The current ui design is a data window with a menu along the top with 4 menu items. When a menu item is clicked a set of controls (currently defined as a user control) is loaded. Think good old fashioned MDI parent form with a bunch of child forms.


There are no controls (or set of controls) that need to be reused in the app. Each "screen" has different functionality and layout requirements. The reason for putting each control set in a user control is single responsibility (SRP) and cleaner code (xaml). Reuse (DRY), at this point, is not a requirement.