Saying that a view-model belongs to the Application layer, and the Application layer doesn’t references upper layers, and must not create or use visual objects, how can I open a Window, Dialog or any kind of Message Box on-the-fly, based on some logic triggered by the view or view-model?
Well, there are several options doing that, one is using kind of service which encapsulates that, providing an interface, so the view-model don’t really work directly with the upper layer or WPF.
This solution is somehow problematic since the service should be implemented in the Presentation layer and somehow should be exposed to the view-model.
Having DI container is possible but still a bit tricky.
What other options we’ve got?
Say that you have a view-model contains list of email messages and the view renders it as an ItemsControl. Now you want displaying the email message details in a separate window triggered by:
- The View – Double clicking or selecting an email and then press Enter same way as Outlook does.
- The View-model – Property of a view-model changes, for example: ShowMessageDetails.
Before discussing my solution, I would like to say something about these two options.
– Opening a window triggered by the view when Routed event is raised or Routed command is executed is quite simple, in that case you should have a OpenWindowAction, triggered by event or command.
– Opening a window triggered by the view or view-model based on property change may be trickier, since property is a state, and it may by synchronized with the window state: Opened or Closed. In that case, changing the property should open or close the window, also closing the window should update the property.
Considering the fact that the window may be opened by the view or the view-model, based on event, command or property change, I propose two options: Custom Action and Behavior.
In this post I’ll cover the custom Action solution, and in the next post I’ll cover the Behavior solution which is a bit trickier.
Say that you’ve got: MessageListViewModel, MessageListView for the email messages view and MessageDetailsViewModel, MessageDetailsView for the email details view should be presented inside a window, lets say MessageDetailsDialog.
Having a SelectedMessage property in MessageListViewModel, lets look at the MessageListView:
As you can see in line 30, I’ve attached the DataGrid with a Blend trigger, listening on MouseDoubleClick routed event. Whenever this event is raised, the custom OpenWindowAction is invoked which currently displays our window.
The OpenWindowAction action has the following properties:
- WindowUri – a simple Uri points to the XAML file defines our window.
- IsModal – true to open the window as modal, false as modeless.
- Owner – the owner of our window in case that we want opening it relative to the owner for example.
- DataContext – view-model to set in our new window data context, in our case the message details view-model retrieved by the MessageListViewModel.SelectedMessage.
- CloseCommand – a command notifying that the window is about to be closed, and also if it possible.
Of course you can add additional properties such as: The type of the window instead or in addition to the WindowUri, a property saying that the view-model should be displayed in a popup instead of a window, etc.
Running this sample and double clicking on the single email, you’ll notice the following:
Now lets look at the OpenWindowAction:
As you can see, the Invoke override checks the properties, creates a window from the given window URI, then displays the window.
Whenever the window is trying to close, the CloseCommand is queried by calling the CanExecute method. If everything fine, the window closes.
You can download the code from here.
Next time I’ll show how to implement the open window Behavior.