Matias Bonaventura’s Blog

With the help of Damian Schenkelman and Julian Dominguez, we created some Visual Studio Item Templates that provides the basic assets for implementing a new view using the MVVM pattern in Prism. These templates create the necessary files and classes for the view and viewModel parts of the pattern.

I will explain in this post how to install and use the Prism MVVM templates. If you are not familiar with the MVVM pattern the following links are a good staring point:

• Model View ViewModel (MVVM) in the prism Knowledge Base.
• WPF Apps With The Model-View-ViewModel Design Pattern
• Model-View-ViewModel In Silverlight 2 Apps
• DataModel-View-ViewModel pattern: 1
• WPF patterns : MVC, MVP or MVVM or…?

These MVVM templates aim to help you facilitate the creation of views with presenters when developing prism applications. Then we disscuss briefly some implementation considetarions.
David Hill has recently posted the Prism Quick Start Kit which includes project templates for creating prism Modules and Shell, both for WPF and Silverlight. Damian has created code snippets for easing the creation of Commands with attached Behaviors.

How-To: Install the Prism MVVM Templates

Installing the templates it’s really simple!

1. Dowloand templates and unzip them into your Visual Studio templates folder. They are C# templates so they go here on my system:
       My Documents\Visual Studio 2008\Templates\ItemTemplates\Visual C#
2. To avoid getting a warning message the first time you use them, you can close Visual Studio and run the following command (as admin) in a Visual Studio Command Prompt window:
       devenv.exe /installvstemplates

That’s all! you should now be able see them in the New Items dialog.

How-To: Use the Prism MVVM Templates

Using the templates it’s also really simple (that’s the idea of using templates after all :-)).

1. Open any prism application in Visual Studio. (Templates will work in any kind of application, but you will have to reference CAL assemblies).
2. Right click on the project/folder where you want to place your new view and select Add / New Item…The New Item Dialog will appear.
3. Select Prism MVVM or Prism MVVM (with interfaces) from the My Templates category.
4. Click Add.  This will create the View with xaml and code behind, and the ViewModel. If you selected Prism MVVM (with interfaces) template, it will additionally create interfaces for the View and ViewModel (this is highly recommended as it will ease testing).

Great, we have now the new view with it’s corresponding ViewModel.  To show the view you should register it in the appropriate region as usual. For example, using view discovery (if you didn’t used interfaces, you won’t need the first line):

this._container.RegisterType<ICustomersViewModel, CustomersViewModel>();
this._regionManager.RegisterViewWithRegion(RegionNames.ButtomLeftRegion, () => this._container.Resolve<CustomersView>());

Using the above code in David’s Quickstart Solution, you can get the view shown:

Implementation considerations:

You will notice in the implementation of the view and viewModel that:

1. View-First approach is used.
2. Templates can be used in WPF and Silverlight prism applications.
3. The implementation relies on prism, as it inyects the EA to the ViewModel.
4. A property is created in the viewModel, to demostrate databinding in the view.

You can download the templates from here.

David Hill (patterns and practices architect) has been working recently on new Visual Studio Templates that provide an excellent starting point for WPF and Silverlight Prism-v2 applications.  This is an experiment on how p&p could provide some level of automation for next versions of prism, so don’t hesitate to post any comment on David’s post.

You can download and install these templates from David’s blog:

• Prism Quick Start Kit
• Prism Quick Start Kit Update

The Composite Application Guidance for WPF and Silverlight (a.k.a Prism) provides several Quickstarts that demonstrate key concepts of the library and the Stock Trader Reference Implementation which illustrate a real-world scenario. The Prism Quick Start Kit aims to provide the basic structure for prism projects and solutions, easy to understand and make use of the recommended practices.

The Prism Quick Start Kit comes with quick-start solutions, templates for the Shell and module projects and supports both WPF and Silvelright.

Hope you find them useful!

The IRegion interface allows to Add/Remove and Activate/Deactivate the views contained in the region. These two sets of actions let us manipulate the state of each view in regions. While the meaning of Add/Remove is clear, the semantics of Activate/Deactivate might be confusing as it greatly depends on the concrete implementation of IRegion.

Activate semantic by concrete region implementation (between brackets is the type of control attached to by default):

• SingleActiveRegion (ContentControl): There is a maximum of one active region at a time. This means that activating a view might trigger a deactivation of another view.
  If the region is created with the default adapter (ContentControlRegionAdapter) the active view will also be only one visible, as it is set as the content of the ContentControl.
• AllActiveRegion (ItemsControl): All views that are kept in the region are active. Calling Deactivate on a view will throw an InvalidOperationException. All views are usually visible.
• Region (Selector): This region allows for multiple active and deactive views.
  If created with the default adapter (SelectorRegionAdapter) the active views will be kept in sync with the SelectedItem/SelectedItems of the control. So when calling Activate on a view, you can only select a single active view at a time. By setting the SelectedItems property of a listbox, you can set multiple views to active. All views (active and deactive) are visible.

The RegionActiveAwareBehavior and the IActiveAware interface are very close related to the activate semantic. So for example, even if the IActiveAware interface is implemented in a view, if it is contained in an AllActiveRegion, the view will only be notified of the active state change only once (when added to the region).

Hiding views

Activating and deactivating views is usually confused with it’s visibility. If you deactivate a view, it will only hide it if the region is a SingleActiveRegion. It will throw an exception in AllActiveRegions and it will not hide the view in Regions.

The posibility of hiding views while keeping the view in the region is not implemented out-of-the-box in prism-v2. Hiding view only makes sense in ItemsControl containers, as in other containers views are automatically hidden when they are not active. Hiding views might be particularly helpful, for example if there is a requirement to hide certain TabItems (as deactivating the view won’t hide the tab, and setting Visibility=Hidden in the view won’t hide the tab).

With Damian Schenkelman, we created the following two classes (one for Silverlight and one for WPF) that add extension methods to allow hide/show views in prism-v2 regions (Download links below). WPF methods implements hide/show for all ItemsControl containers while Silverlight methods are only implemented for the TabControl.

· SilverlightRegionExtensions (allow hide views in TabControl regions)

· WPFRegionExtensions (allow hide views in ItemsControl regions)

The aforementioned classes expose the following extension methods for the IRegion interface:

· Hide(string viewName): Hides a view registered with a particular name in the region.

· Hide(object view): Hides the view passed as a parameter.

· Show(string viewName): Shows a view registered with a particular name in the region.

· Show(object view): Shows the view passed as a parameter.

We also created a sample application to show it’s usage and to highlight the difference betwen Add/Remove, Activate/Deactivate, Hide/Show.

You can play with it selecting the tab checkboxes and pressing the action buttons.

Download

We uploaded the WPF and silverlight region extension method to the Prism codeplex site. You can get these classes from RegionExtensions.zip.

You can also downloaded the sample application from Hide Views Sample .

The Problem

I had a WCF service in place. It was working fine with a ASP.NET web app, but when I tried to cunsume it from a Prism-v2 module I got the following exception:

‘System.InvalidOperationException: Could not find default endpoint element that references contract ‘CustomerService.ICustomerService’ in the ServiceModel client configuration section. This might be because no configuration file was found for your application, or because no endpoint element matching this contract could be found in the client element.

I was using the app.config that was generated by the WCF “add service reference” wizard. I checked it’s content but everything was fine.

The solution

Move the app.confing to the Shell project!
In prism modules are loaded dynamically, so they all run in the Shell project context. WCF was not finding my app.config because it was not in the right place.

This will do for simple applications, but most general application already have an app.config with settings. On the other hand, modules should be completely decoupled from the shell. A good way to resolve these issues is to set WCF configuration within the module programatically.

I hope this is useful when consuming WCF Services from Prism Modules.