Skip to content

Modal and non‐modal dialogs

FantasticFiasco edited this page Oct 31, 2021 · 4 revisions

A dialog can be shown either as modal or non-modal. A modal dialog halts code execution and awaits the dialog result while a non-modal dialog continues code execution without waiting for any dialog result. Showing a dialog can be performed in either of two ways, either by explicit specifying the dialog type or by implicit using the dialog type locator. Both concepts and the difference in usage is described below.

Explicit dialog type syntax

The most straight forward syntax to use is the explicit syntax where the generic methods IDialogService.ShowDialog<T> and IDialogService.Show<T> shows a modal respectively non-modal dialog of the type T. The MVVM purists are most certainly appalled by the fact that the view type is defined in the view model. For them there is the implicit syntax and the dialog type locator.

Implicit dialog type syntax and the dialog type locator

Specifying a dialog type in a view model might either be unwanted or impossible in certain situations, thus the library supports opening a dialog without specifying the dialog type. IDialogService.ShowDialog and IDialogService.Show are the non-generic methods where the dialog type isn't specified in the method call. However, IDialogService still has to know the dialog type in order to create and open the dialog. This is where the concept of a dialog type locator comes into play.

A dialog type locator is a function of type Func<INotifyPropertyChanged, Type> capable of resolving a dialog type based on a specified view model. The implementation of DialogService comes with a default dialog type locator that uses a common naming convention used in a multitude of articles and code samples regarding the MVVM pattern. The convention states that if the name of the view model is MyNamespace.ViewModels.MyDialogViewModel then the name of the dialog is MyNamespace.Views.MyDialog. If this convention doesn't fit your code structure the default locator can be overridden by specifying your own implementation in the constructor of DialogService.

Showing a modal dialog using explicit dialog type syntax

To show a modal dialog using explicit dialog type syntax start by registering the view by decorating the XAML with the attached property DialogServiceViews.IsRegistered.

<UserControl
    x:Class="DemoApplication.Features.Dialog.Modal.Views.ModalDialogTabContent"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:md="https://github.com/fantasticfiasco/mvvm-dialogs"
    md:DialogServiceViews.IsRegistered="True">
  
</UserControl>

In the view model, open the dialog by calling IDialogService.ShowDialog<T>.

public class ModalDialogTabContentViewModel : INotifyPropertyChanged
{
    private readonly IDialogService dialogService;
  
    public ModalDialogTabContentViewModel(IDialogService dialogService)
    {
        this.dialogService = dialogService;
    }
  
    private void ShowDialog()
    {
        var dialogViewModel = new AddTextDialogViewModel();

        bool? success = dialogService.ShowDialog<AddTextDialog>(this, dialogViewModel));
        if (success == true)
        {
            Texts.Add(dialogViewModel.Text);
        }
    }
}

Showing a modal dialog using implicit dialog type syntax

To show a modal dialog using implicit dialog type syntax start by registering the view by decorating the XAML with the attached property DialogServiceViews.IsRegistered.

<UserControl
    x:Class="DemoApplication.Features.Dialog.Modal.Views.ModalDialogTabContent"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:md="https://github.com/fantasticfiasco/mvvm-dialogs"
    md:DialogServiceViews.IsRegistered="True">
  
</UserControl>

Make sure the dialog type locator can locate the dialog type, and then let the view model open the dialog by calling IDialogService.ShowDialog.

public class ModalDialogTabContentViewModel : INotifyPropertyChanged
{
    private readonly IDialogService dialogService;
  
    public ModalDialogTabContentViewModel(IDialogService dialogService)
    {
        this.dialogService = dialogService;
    }
  
    private void ShowDialog()
    {
        var dialogViewModel = new AddTextDialogViewModel();

        bool? success = dialogService.ShowDialog(this, dialogViewModel));
        if (success == true)
        {
            Texts.Add(dialogViewModel.Text);
        }
    }
}

Showing a non-modal dialog using explicit dialog type syntax

To show a non-modal dialog using explicit dialog type syntax start by registering the view by decorating the XAML with the attached property DialogServiceViews.IsRegistered.

<UserControl
    x:Class="DemoApplication.Features.Dialog.NonModal.Views.NonModalDialogTabContent"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:md="https://github.com/fantasticfiasco/mvvm-dialogs"
    md:DialogServiceViews.IsRegistered="True">
  
</UserControl>

In the view model, open the dialog by calling IDialogService.Show<T>.

public class NonModalDialogTabContentViewModel : INotifyPropertyChanged
{
    private readonly IDialogService dialogService;
  
    public NonModalDialogTabContentViewModel(IDialogService dialogService)
    {
        this.dialogService = dialogService;
    }
  
    private void Show()
    {
        var dialogViewModel = new CurrentTimeDialogViewModel();
        dialogService.Show<CurrentTimeDialog>(this, dialogViewModel));
    }
}

Showing a non-modal dialog using implicit dialog type syntax

To show a non-modal dialog using implicit dialog type syntax start by registering the view by decorating the XAML with the attached property DialogServiceViews.IsRegistered.

<UserControl
    x:Class="DemoApplication.Features.Dialog.NonModal.Views.NonModalDialogTabContent"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:md="https://github.com/fantasticfiasco/mvvm-dialogs"
    md:DialogServiceViews.IsRegistered="True">
  
</UserControl>

Make sure the dialog type locator can locate the dialog type, and then let the view model open the dialog by calling IDialogService.Show.

public class NonModalDialogTabContentViewModel : INotifyPropertyChanged
{
    private readonly IDialogService dialogService;
  
    public NonModalDialogTabContentViewModel(IDialogService dialogService)
    {
        this.dialogService = dialogService;
    }
  
    private void Show()
    {
        var dialogViewModel = new CurrentTimeDialogViewModel();
        dialogService.Show(this, dialogViewModel));
    }
}