Open Window, Dialog or Message Box from a ViewModel – Part 1

Saying that a view-model belongs to the Application layer, and the Application layer doesn't reference 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 doesn'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 have we got?

Say that you have a view-model that contains a 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:

1. The View - Double clicking or selecting an email and then press Enter same way as Outlook does.
2. 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, let's say MessageDetailsDialog.

Having a SelectedMessage property in MessageListViewModel, let's look at the MessageListView:

<UserControl x:Class="WPFOutlook.PresentationLayer.Views.MessageListView" 

             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

             xmlns:viewmodels="http://schemas.sela.co.il/advancedwpf" 

             xmlns:views="clr-namespace:WPFOutlook.PresentationLayer.Views" 

             xmlns:behaviors="clr-namespace:WPFOutlook.PresentationLayer.Behaviors" 

             xmlns:i="clr-namespace:System.Windows.Interactivity;
             assembly=System.Windows.Interactivity" 

             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 

             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 

             mc:Ignorable="d" 

             d:DesignHeight="300" d:DesignWidth="300"> 
  
    <UserControl.DataContext> 
        <viewmodels:MessageListViewModel /> 
    </UserControl.DataContext> 
  
    <Grid> 
        <DataGrid ItemsSource="{Binding Messages}" 

                  SelectedItem="{Binding SelectedMessage}" 

                  AutoGenerateColumns="False" 

                  CanUserAddRows="False" 

                  CanUserDeleteRows="False"> 
             
            <DataGrid.Columns> 
                <DataGridTextColumn Header="From" 

                Binding="{Binding From}" IsReadOnly="True" /> 
                <DataGridTextColumn Header="Subject" 

                Binding="{Binding Subject}" IsReadOnly="True" /> 
                <DataGridTextColumn Header="Received" 

                Binding="{Binding Received}" IsReadOnly="True" /> 
                <DataGridTextColumn Header="Size" 

                Binding="{Binding Size}" IsReadOnly="True" /> 
            </DataGrid.Columns> 
             
            <i:Interaction.Triggers> 
                <i:EventTrigger EventName="MouseDoubleClick"> 
                    <behaviors:OpenWindowAction WindowUri="/Dialogs/MessageDetailsDialog.xaml" 

                                                IsModal="True" 

                    Owner="{Binding RelativeSource={RelativeSource Mode=FindAncestor, 
                    AncestorType={x:Type Window}}}" 

                    DataContext="{Binding SelectedMessage}" 

                    CloseCommand="{Binding CloseMessageDetailsCommand}" /> 
                </i:EventTrigger> 
            </i:Interaction.Triggers> 
  
        </DataGrid> 
    </Grid> 
</UserControl>

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:

1. WindowUri – A simple Uri points to the XAML file defines our window
2. IsModal – true to open the window as modal, false as modeless
3. Owner – The owner of our window in case we want opening it relative to the owner for example
4. DataContext – view-model to set in our new window data context, in our case the message details view-model retrieved by the MessageListViewModel.SelectedMessage
5. CloseCommand – A command notifying that the window is about to be closed, and also if it is 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 let's look at the OpenWindowAction:

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Text; 
using System.Windows; 
using System.Windows.Interactivity; 
using System.ComponentModel; 
using System.Windows.Input; 
using WPFOutlook.ApplicationLayer.Common; 
using System.Windows.Threading; 
using System.Diagnostics; 
  
namespace WPFOutlook.PresentationLayer.Behaviors 
{ 
    public class OpenWindowAction : TriggerAction<DependencyObject> 
    {         
        protected override void Invoke(object parameter) 
        { 
            Assert(CloseCommandProperty.Name, CloseCommand, null); 
            Assert(WindowUriProperty.Name, WindowUri, null); 
  
            if (DataContext == null) 
            { 
                return; 
            } 
  
            if (_isOpen) 
            { 
                return; 
            } 
  
            var window = (Window)Application.LoadComponent(WindowUri); 
            window.Owner = Owner; 
            window.DataContext = DataContext; 
            window.Closing += window_Closing; 
  
            if (IsModal) 
            { 
                window.Show();                 
            } 
            else 
            { 
                window.ShowDialog(); 
            } 
  
            _isOpen = true; 
        } 
  
        private void window_Closing(object sender, CancelEventArgs e) 
        { 
            var window = sender as Window; 
            bool canClose = CloseCommand.CanExecute(window.DialogResult); 
            if (canClose) 
            { 
                CloseCommand.Execute(window.DialogResult); 
                _isOpen = false; 
            } 
  
            e.Cancel = !canClose; 
        } 
    } 
}

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 is fine, the window closes.

You can download the code from here.

Next time, I'll show how to implement the open window Behavior.