Error window show modal in MVVM WPF

Question

Hi guys

I have implemented my MVVM error message as a message dialog that subscribes to error messages via a mediator class, so that other viewmodels can notify it if any errors occur.

When an error occurs, I set the visibility attribute in the viewmodel to Visible, to display the error window. This is all bound in the Error window from the viewmodel.

However, this window is NOT modal! I need to show it as a dialog and not just set the visibility to true - is there any kind of binding I can do, even if I have to extend the functionality of the window? I'd rather not break MVVM if I can avoid it.

Thanks!

Answer 1

The View/ViewModel split is meant to divide look from functionality. I firmly believe the Window is functionality and look rolled into one. For instance, what if in your ErrorMessageViewModel, you had this code that executes when there are errors:

class WindowViewModel : Window
{
}

.
.
.

WindowViewModel newDialog = new WindowViewModel();
newDialog.Content = myErrorListViewModel;
newDialog.Parent = mainWindowViewModel;
newDialog.ShowDialog();

So the contents of the dialog is the ViewModel for your error list. Define your View as a data template that automatically applies itself to the error list ViewModel.

Doesn't that look like MVVM?

The fact is, the Window class is a ViewModel for the Window you see on the screen. By changing the properties of the Window object, it affects the "view" just like if the properties of the WindowView were bound to a WindowViewModel. The only thing missing is the ability to "restyle" the Window using WPF, and it doesn't matter how hard you try to implement it, you're not going to be able to do that. The user can restyle a Window by modifying their desktop theme, but you're not in control of it. The best you can do is turn off the chrome and/or make it full screen.

Answer 2

You find an example how windows (don't matter if they are modal or not) are shown, in the ViewModel example of this project:

WPF Application Framework (WAF)

http://waf.codeplex.com

Answer 3

In my recent blog post you can find simple solution for Modal Dialogs and Message Boxes in MVVM for Silverlight but this can be simply reused in WPF:

Modal dialogs with MVVM and Silverlight 4

Answer 4

I am also working on a MVVM project where I need modal dialogboxes or messageboxes. I have found the following way of solving it:

The software uses only one window. The layout root element is a Grid with no row- or columndefinitions. The grid has three children:

1. A dockpanel that contains all the usual stuff like menus, tabbed views, status bar and so on.
2. A grid that has a gray background and a 50% opacity. This is used as a veil to cover the dockpanel when a modal box is in effect. The veil grid is usually collapsed.
3. A grid holding modal views, this is usually collapsed.

The viewmodel for the main window has a member called Modal. If this is null, the two grids for modal use are collapsed through databinding and a converter for Visibility.Collapsed.

When the program wants to display for example a modal message box, a MessageBoxViewModel is instantiated and assigned to MainViewModel.Modal. The MessageBoxViewModel has a Command for an OK-button. This Command raises an event that sets the MainViewModel.Modal to null again.

The veil grid occludes the main DockPanel, so that no controls outside the Modal control accept input.

Your program can either run a messagepump until OK is pressed, or the OK-Command can trigger the next. There are many ways of solving different needs, but the Model-ModelView solution should support them.

I feel that this is as good a model of the view in the modal mode as one can hope for.

Answer 5

I made a behhavior to tie some modal dialogs to the command.

http://www.clr-namespace.com/post/MVVMModal-dialog-before-running-Command.aspx

<Confirm:Confirm IsConfirm="{Binding ElementName=checkBoxConfirm, Path=IsChecked}"
Command="{Binding Path=ButtonCommand}" 
CommandParameter="{Binding ElementName=textBoxParameter, Path=Text}" 
ConfirmMessage="Are you sure you want to fire the command?" 
ConfirmCaption="Question" >
</Confirm:Confirm>