Handling Dialogs in WPF with MVVM

Ray_Booysen_42124 0
Viewed 127636

In the MVVM pattern for WPF, handling dialogs is one of the more complex operations. As your view model does not know anything about the view, dialog communication can be interesting. I can expose an ICommand that when the view invokes it, a dialog can appear.

Does anyone know of a good way to handle results from dialogs? I am speaking about windows dialogs such as MessageBox.

One of the ways we did this was have an event on the viewmodel that the view would subscribe to when a dialog was required.

public event EventHandler<MyDeleteArgs> RequiresDeleteDialog;

This is OK, but it means that the view requires code which is something I would like to stay away from.

dialog mvvm design-patterns wpf .net
24 Answers

I suggest forgoing the 1990's modal dialogs and instead implementing a control as an overlay (canvas+absolute positioning) with visibility tied to a boolean back in the VM. Closer to an ajax type control.

This is very useful:

<BooleanToVisibilityConverter x:Key="booltoVis" />

as in:

<my:ErrorControl Visibility="{Binding Path=ThereWasAnError, Mode=TwoWay, Converter={StaticResource booltoVis}, UpdateSourceTrigger=PropertyChanged}"/>

Here's how I have one implemented as a user control. Clicking on the 'x' closes the control in a line of code in the usercontrol's code behind. (Since I have my Views in an .exe and ViewModels in a dll, I don't feel bad about code that manipulates UI.)

Wpf dialog

user_834180

EDIT: More than 10 years after, I can tell that using a Mediator or any other messaging pattern is a really bad idea at so many levels. Don't do it, just implement Jeffrey's answer or a IDialogService injected in your view model.

You should use a mediator for this. Mediator is a common design pattern also known as Messenger in some of its implementations. It's a paradigm of type Register/Notify and enables your ViewModel and Views to communicate through a low-coupled messaging mecanism.

You should check out the google WPF Disciples group, and just search for Mediator. You will be much happy with the answers...

You can however start with this:

http://joshsmithonwpf.wordpress.com/2009/04/06/a-mediator-prototype-for-wpf-apps/

Enjoy !

Edit: you can see the answer to this problem with the MVVM Light Toolkit here:

http://mvvmlight.codeplex.com/Thread/View.aspx?ThreadId=209338

user_463070

A good MVVM dialog should:

  1. Be declared with only XAML.
  2. Get all of it's behavior from databinding.

Unfortunately, WPF doesn't provide these features. Showing a dialog requires a code-behind call to ShowDialog(). The Window class, which supports dialogs, can't be declared in XAML so it can't easily be databound to the DataContext.

To solve this, I wrote a XAML stub control that sits in the logical tree and relays databinding to a Window and handles showing and hiding the dialog. You can find it here: http://www.codeproject.com/KB/WPF/XAMLDialog.aspx

It's really simply to use and doesn't require any strange changes to your ViewModel and doesn't require events or messages. The basic call looks like this: 

<dialog:Dialog Content="{Binding Path=DialogViewModel}" Showing="True" />

You probably want to add a style that sets Showing. I explain it in my article. I hope this helps you.

user_925410

I use this approach for dialogs with MVVM.

All I have to do now is call the following from my view model.

var result = this.uiDialogService.ShowDialog("Dialogwindow title goes here", dialogwindowVM);
user_3552390

My current solution solves most of the issues you mentioned yet its completely abstracted from platform specific things and can be reused. Also i used no code-behind only binding with DelegateCommands that implement ICommand. Dialog is basically a View - a separate control that has its own ViewModel and it is shown from the ViewModel of the main screen but triggered from the UI via DelagateCommand binding.

See full Silverlight 4 solution here Modal dialogs with MVVM and Silverlight 4

user_1257180

I really struggled with this concept for a while when learning (still learning) MVVM. What I decided, and what I think others already decided but which wasn't clear to me is this:

My original thought was that a ViewModel should not be allowed to call a dialog box directly as it has no business deciding how a dialog should appear. Beacause of this I started thinking about how I could pass messages much like I would have in MVP (i.e. View.ShowSaveFileDialog()). However, I think this is the wrong approach.

It is OK for a ViewModel to call a dialog directly. However, when you are testing a ViewModel , that means that the dialog will either pop up during your test, or fail all together (never really tried this).

So, what needs to happen is while testing is to use a "test" version of your dialog. This means that for ever dialog you have, you need to create an Interface and either mock out the dialog response or create a testing mock that will have a default behaviour.

You should already be using some sort of Service Locator or IoC that you can configure to provide you the correct version depending on the context.

Using this approach, your ViewModel is still testable and depending on how you mock out your dialogs, you can control the behaviour.

Hope this helps.

user_2858740

I think that the handling of a dialog should be the responsibility of the view, and the view needs to have code to support that.

If you change the ViewModel - View interaction to handle dialogs then the ViewModel is dependant on that implementation. The simplest way to deal with this problem is to make the View responsible for performing the task. If that means showing a dialog then fine, but could also be a status message in the status bar etc.

My point is that the whole point of the MVVM pattern is to separate business logic from the GUI, so you shouldn't be mixing GUI logic (to display a dialog) in the business layer (the ViewModel).

Cameron_MacFarland_38200

An interesting alternative is to use Controllers which are responsible to show the views (dialogs).

How this works is shown by the WPF Application Framework (WAF).

user_1039880

Why not just raise an event in the VM and subscribe to the event in the view? This would keep the application logic and the view seperate and still allow you to use a child window for dialogs.

user_5951770
user_4654010

I think the view could have code to handle the event from the view model.

Depending on the event/scenario, it could also have an event trigger that subscribes to view model events, and one or more actions to invoke in response.

user_409990
user_2919090

The standard approach

After spending years dealing with this problem in WPF, I finally figured out the standard way of implementing dialogs in WPF. Here are the advantages of this approach:

  1. CLEAN
  2. Doesn't violate MVVM design pattern
  3. ViewModal never references any of the UI libraries (WindowBase, PresentationFramework etc.)
  4. Perfect for automated testing
  5. Dialogs can be replaced easily.

So what's the key. It is DI + IoC.

Here is how it works. I'm using MVVM Light, but this approach may be extended to other frameworks as well:

  1. Add a WPF Application project to your solution. Call it App.
  2. Add a ViewModal Class Library. Call it VM.
  3. App references VM project. VM project doesn't know anything about App.
  4. Add NuGet reference to MVVM Light to both projects. I'm using MVVM Light Standard these days, but you are okay with the full Framework version too.

  5. Add an interface IDialogService to VM project:

    public interface IDialogService
{
  void ShowMessage(string msg, bool isError);
  bool AskBooleanQuestion(string msg);
  string AskStringQuestion(string msg, string default_value);

  string ShowOpen(string filter, string initDir = "", string title = "");
  string ShowSave(string filter, string initDir = "", string title = "", string fileName = "");
  string ShowFolder(string initDir = "");

  bool ShowSettings();
}

  6. Expose a public static property of IDialogService type in your ViewModelLocator, but leave registration part for the View layer to perform. This is the key.:

    public static IDialogService DialogService => SimpleIoc.Default.GetInstance<IDialogService>();

  7. Add an implementation of this interface in the App project.

    public class DialogPresenter : IDialogService
{
    private static OpenFileDialog dlgOpen = new OpenFileDialog();
    private static SaveFileDialog dlgSave = new SaveFileDialog();
    private static FolderBrowserDialog dlgFolder = new FolderBrowserDialog();

    /// <summary>
    /// Displays a simple Information or Error message to the user.
    /// </summary>
    /// <param name="msg">String text that is to be displayed in the MessageBox</param>
    /// <param name="isError">If true, Error icon is displayed. If false, Information icon is displayed.</param>
    public void ShowMessage(string msg, bool isError)
    {
            if(isError)
                    System.Windows.MessageBox.Show(msg, "Your Project Title", MessageBoxButton.OK, MessageBoxImage.Error);
            else
                    System.Windows.MessageBox.Show(msg, "Your Project Title", MessageBoxButton.OK, MessageBoxImage.Information);
    }

    /// <summary>
    /// Displays a Yes/No MessageBox.Returns true if user clicks Yes, otherwise false.
    /// </summary>
    /// <param name="msg"></param>
    /// <returns></returns>
    public bool AskBooleanQuestion(string msg)
    {
            var Result = System.Windows.MessageBox.Show(msg, "Your Project Title", MessageBoxButton.YesNo, MessageBoxImage.Question) == MessageBoxResult.Yes;
            return Result;
    }

    /// <summary>
    /// Displays Save dialog. User can specify file filter, initial directory and dialog title. Returns full path of the selected file if
    /// user clicks Save button. Returns null if user clicks Cancel button.
    /// </summary>
    /// <param name="filter"></param>
    /// <param name="initDir"></param>
    /// <param name="title"></param>
    /// <param name="fileName"></param>
    /// <returns></returns>
    public string ShowSave(string filter, string initDir = "", string title = "", string fileName = "")
    {
            if (!string.IsNullOrEmpty(title))
                    dlgSave.Title = title;
            else
                    dlgSave.Title = "Save";

            if (!string.IsNullOrEmpty(fileName))
                    dlgSave.FileName = fileName;
            else
                    dlgSave.FileName = "";

            dlgSave.Filter = filter;
            if (!string.IsNullOrEmpty(initDir))
                    dlgSave.InitialDirectory = initDir;

            if (dlgSave.ShowDialog() == DialogResult.OK)
                    return dlgSave.FileName;
            else
                    return null;
    }


    public string ShowFolder(string initDir = "")
    {
            if (!string.IsNullOrEmpty(initDir))
                    dlgFolder.SelectedPath = initDir;

            if (dlgFolder.ShowDialog() == DialogResult.OK)
                    return dlgFolder.SelectedPath;
            else
                    return null;
    }


    /// <summary>
    /// Displays Open dialog. User can specify file filter, initial directory and dialog title. Returns full path of the selected file if
    /// user clicks Open button. Returns null if user clicks Cancel button.
    /// </summary>
    /// <param name="filter"></param>
    /// <param name="initDir"></param>
    /// <param name="title"></param>
    /// <returns></returns>
    public string ShowOpen(string filter, string initDir = "", string title = "")
    {
            if (!string.IsNullOrEmpty(title))
                    dlgOpen.Title = title;
            else
                    dlgOpen.Title = "Open";

            dlgOpen.Multiselect = false;
            dlgOpen.Filter = filter;
            if (!string.IsNullOrEmpty(initDir))
                    dlgOpen.InitialDirectory = initDir;

            if (dlgOpen.ShowDialog() == DialogResult.OK)
                    return dlgOpen.FileName;
            else
                    return null;
    }

    /// <summary>
    /// Shows Settings dialog.
    /// </summary>
    /// <returns>true if User clicks OK button, otherwise false.</returns>
    public bool ShowSettings()
    {
            var w = new SettingsWindow();
            MakeChild(w); //Show this dialog as child of Microsoft Word window.
            var Result = w.ShowDialog().Value;
            return Result;
    }

    /// <summary>
    /// Prompts user for a single value input. First parameter specifies the message to be displayed in the dialog 
    /// and the second string specifies the default value to be displayed in the input box.
    /// </summary>
    /// <param name="m"></param>
    public string AskStringQuestion(string msg, string default_value)
    {
            string Result = null;

            InputBox w = new InputBox();
            MakeChild(w);
            if (w.ShowDialog(msg, default_value).Value)
                    Result = w.Value;

            return Result;
    }

    /// <summary>
    /// Sets Word window as parent of the specified window.
    /// </summary>
    /// <param name="w"></param>
    private static void MakeChild(System.Windows.Window w)
    {
            IntPtr HWND = Process.GetCurrentProcess().MainWindowHandle;
            var helper = new WindowInteropHelper(w) { Owner = HWND };
    }
}
  8. While some of these functions are generic (ShowMessage, AskBooleanQuestion etc.), others are specific to this project and use custom Windows. You can add more custom windows in the same fashion. The key is to keep UI-specific elements in the View layer and just expose the returned data using POCOs in the VM layer.

  9. Perform IoC Registration your interface in the View layer using this class. You can do this in your main view's constructor (after InitializeComponent() call):

    SimpleIoc.Default.Register<IDialogService, DialogPresenter>();

  10. There you go. You now have access to all your dialog functionality at both VM and View layers. Your VM layer can call these functions like this:

    var NoTrump = ViewModelLocator.DialogService.AskBooleanQuestion("Really stop the trade war???", "");
  11. So clean you see. The VM layer doesn't know nothing about how a Yes/No question will be presented to the user by the UI layer and can still successfully work with the returned result from the dialog.

Other free perks

  1. For writing unit test, you can provide a custom implementation of IDialogService in your Test project and register that class in IoC in the constructor your test class.
  2. You'll need to import some namespaces such as Microsoft.Win32 to access Open and Save dialogs. I have left them out because there is also a WinForms version of these dialogs available, plus someone might want to create their own version. Also note that some of the identifier used in DialogPresenter are names of my own windows (e.g. SettingsWindow). You'll need to either remove them from both the interface and implementation or provide your own windows.
  3. If your VM performs multi-threading, call MVVM Light's DispatcherHelper.Initialize() early in your application's life cycle.

  4. Except for DialogPresenter which is injected in the View layer, other ViewModals should be registered in ViewModelLocator and then a public static property of that type should be exposed for the View layer to consume. Something like this:

    public static SettingsVM Settings => SimpleIoc.Default.GetInstance<SettingsVM>();

  5. For the most part, your dialogs should not have any code-behind for stuff like binding or setting DataContext etc. You shouldn't even pass things as constructor parameters. XAML can do that all for you, like this:

    <Window x:Class="YourViewNamespace.SettingsWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:local="clr-namespace:YourViewProject"
  xmlns:vm="clr-namespace:YourVMProject;assembly=YourVMProject"
  DataContext="{x:Static vm:ViewModelLocator.Settings}"
  d:DataContext="{d:DesignInstance Type=vm:SettingsVM}" />
  6. Setting DataContext this way gives you all kinds of design-time benefits such as Intellisense and auto-completion.

Hope that helps everyone.

user_11371990

I know it's an old question, but when I did this search, I find a lot of related question, but I did not find a really clear response. So I make my own implementation of a dialogbox/messagebox/popin, and I share it!
I think it is "MVVM proof", and I try to make it simple and proper, but I am new to WPF, so feel free to comment, or even make pull request.

https://github.com/Plasma-Paris/Plasma.WpfUtils

You can use it like this:

public RelayCommand YesNoMessageBoxCommand { get; private set; }
async void YesNoMessageBox()
{
    var result = await _Service.ShowMessage("This is the content of the message box", "This is the title", System.Windows.MessageBoxButton.YesNo);
    if (result == System.Windows.MessageBoxResult.Yes)
        // [...]
}

Or like this if you want more sophisticated popin :

var result = await _Service.ShowCustomMessageBox(new MyMessageBoxViewModel { /* What you want */ });

And it is showing things like this :

2

user_25467390

I was pondering a similar problem when asking how the view model for a task or dialog should look like.

My current solution looks like this:

public class SelectionTaskModel<TChoosable> : ViewModel
    where TChoosable : ViewModel
{
    public SelectionTaskModel(ICollection<TChoosable> choices);
    public ReadOnlyCollection<TChoosable> Choices { get; }
    public void Choose(TChoosable choosen);
    public void Abort();
}

When the view model decides that user input is required, it pulls up a instance of SelectionTaskModel with the possible choices for the user. The infrastructure takes care of bringing up the corresponding view, which in proper time will call the Choose() function with the user's choice.

David_Schmitt_49180

I struggled with the same problem. I have come up with a way to intercommunicate between the View and the ViewModel. You can initiate sending a message from the ViewModel to the View to tell it to show a messagebox and it will report back with the result. Then the ViewModel can respond to the result returned from the View.

I demonstrate this in my blog:

Admin1

Sorry, but I have to chime in. I have been through several of the suggested solutions, before finding the Prism.Wpf.Interactivity namespace in the Prism project. You can use interaction requests and popup window action to either roll a custom window or for simpler needs there are built in Notification and Confirmation popups. These create true windows and are managed as such. you can pass a context object with any dependencies you need in the dialog. We use this solution at my work since I found it. We have numerous senior devs here and noone has come up with anything better. Our previous solution was the dialog service into an overlay and using a presenter class to make it happen, but you had to have factories for all of the dialog viewmodels, etc.

This isn't trivial but it also isn't super complicated. And it is built in to Prism and is therefore best (or better) practice IMHO.

My 2 cents!

user_11364960

Simplest way: use HanumanInstitute.MvvmDialogs library

If you follow the documentation, you can use it as beautifully as this, with full decoupling from the UI

var presetName = await dialogService.ShowSavePresetViewAsync(this);
user_39602000
Related