MVVM Fabric: Using ModalViewPlacer

In yesterday’s post, I talked about how to do testable navigation with MVVM Fabric.  In that post I made mention of ModalViewPlacer as a stock implementation for IViewPlacer provided by MVVM Fabric.  I think ModalViewPlacer is worth explaining so that you can make effective use of it.

Overview

ModalViewPlacer is an implementation for IViewPlacer which displays views as a modal dialog.  It works with two interfaces provided by MVVM Fabric: IModalView and IModalViewModel.

IModalView must be implemented by the view and provides some hooks for ModalViewPlacer to do its thing.  MVVM Fabric provides an implementation of IModalView, called ModalView, to simplify things.  ModalView inherits from Window.  I will show how to use this shortly.

IModalViewModel must be implemented by the view model and provides a hook for view models to request that they be closed.  MVVM Fabric also provides an implementation of IModalViewModel, called ModalViewModelBase.  ModalViewModelBase inherits from ViewModelBase and provides implementations for the hooks.

When a modal view is shown, its view model needs a way to be able to request the view be closed.  IModalViewModel provides an event, RequestClose, which can be raised.  The view subscribes to that event and closes itself when the event is raised.  ModalViewModel provides several methods which can be used to initiate that close request.  The methods also provide the ability for the view model to indicate whether it was accepted (or cancelled) and give back some sort of result object.  ModalView then takes what was provided by the view model and exposes them as properties to be used by ModalViewPlacer.  ModalViewPlacer will use those properties to create a new message, called ModalViewClosedMessage, and publish it to the message bus to signal to the application that the view was closed.

Using ModalViewPlacer

The sample application provided with MVVM Fabric uses ModalViewPlacer in conjunction with its own custom implementation of IViewPlacer to have a combination of tabbed views and modal views.  This example will be more simple and will only leverage ModalViewPlacer.

First off, you need to have your view inherit from ModalView.

Next, you need to update your XAML to reflect this.

Notice that Window is replaced by nav:ModalView, with nav being the namespace I defined for MVVM Fabric.

Next you need to have your view model inherit from ModalViewModelBase.

Your view and view model are all set now.  You can have methods on your view model such as Accept and Cancel to react to the OK and Cancel buttons.

This illustrates two uses of the NotifyCloseRequest method provided by ModalViewModelBase.  The Accept method signals that the view was accepted and returns Keywords as a result.  Cancel signals that the view was not accepted (read cancelled).

To wire up and request a modal view is no different than I described in yesterday’s post. unless you care about the modal view being closed and possibly the results it provided.  If that is the case, then you must subscribe to the ModalViewClosedMessage from the message bus prior to making the request for the view.

With the ModalViewClosedMessage, you can determine which view just closed and act according to whether the view was accepted and optionally use the result.

Conclusion

Modal dialogs are a type of view that you don’t want to overuse in modern applications, but there usually is a need for at least a few of them.  Using the ModalViewPlacer, you can tap into the navigation functionality provided by MVVM Fabric and still show modal dialogs in a testable way.

Share