MahApps.Metro 대화 상자를 사용해보기

개발 환경

Visual Studio 2017 (C#)

Visual Studio 확장의 "Prism Template Pack"

Prism.Core 6.3.0

Prism.Unity 6.3.0

Prism.Wpf 6.3.0

CommonServiceLocator 1.3.0

Unity 4.0.1

MahApps.Metro 1.5.0

처음에

WPF로 싱글 페이지 어플리케이션을 작성하고 있어도, 역시 다이얼로그 표시가 하고 싶다! 시간이 있니?

하지만, 입력계의 다이얼로그라면, 개인적으로는, 커스텀 다이얼로그가 아니고, 플라이아웃을 추천합니다만, 처리 종료 메세지는, 역시 다이얼로그로 하고 싶다고 때로는, MahApps.Metro에는, Metro풍 대화 상자가 있으므로 그것을 사용해 보는 것은 어떻습니까?

MahApps.Metro의 대화 컨트롤

※MahApps의 프로젝트에 NuGet 추가 등의 설명은 생략

MahApps.Metro Dialogs

MahApps.Metro에는 메시지 대화 상자와 진행 대화 상자가 있습니다.
사용법으로서는, 비동기 실행할 수 있으므로 async/await 를 붙인 다음에, 각각 기술은 이하와 같이 됩니다.

메시지 대화 상자의 경우

await this.ShowMessageAsync("This is the title", "Some message");

진행 대화상자의 경우

var controller = await this.ShowProgressAsync("Please wait...", "Progress message");

MVVM에서는 여전히 오류가 발생합니다.

코드 숨김으로 작성된 경우 그대로 사용할 수 있지만,
Prism + Unity를 사용한 MVVM 복합 애플리케이션의 경우 UserControl 또는 Page의 ViewModel에 처리를 설명하기 때문에 위의 쓰기에서는 오류가 발생합니다.

오류 화면

이것은 MetroWindow 확장 프로그램에서 각 메시지 대화 상자로 인해 UserControl 및 Page에서 오류가 발생합니다.

MVVM의 경우 공식 페이지에서 IDialogCoordinator를 사용하여 예제가 나와 있습니다.

Support for viewmodels
You can open dialogs from your viewmodel by using the IDialogCoordinator.
Add the following code to your Window.xaml or UserControl.xaml:

MVVM의 지굴에서 무너질 것입니다.

원래 M+V+VM에서는 역할을 나누자는 것으로 직접 View에 대한 지정은 하지 않습니다만,
단순히 대화 상자는 MetroWindow에서 호출되므로 다음과 같은 방법으로도 볼 수 있습니다.

public MetroWindow Metro { get; set; }에서 속성을 만들고 현재 MetroWindow를 저장합니다.

Metro.ShowMessageAsync("This is the title", "Some message"); 저장된 Metro의 ShowMessageAsync를 지정합니다.

MainUcViewModel.cs

/// <summary>
/// MetroWindow
/// </summary>
public MetroWindow Metro { get; set; } = System.Windows.Application.Current.MainWindow as MetroWindow;

메시지 대화 상자의 경우

MainUcViewModel.cs

/// <summary>
/// メッセージダイアログ　コマンド
/// </summary>
private DelegateCommand showMessageCommand;
public DelegateCommand ShowMessageCommand =>
    showMessageCommand ?? (showMessageCommand = new DelegateCommand(ShowMessageCommandExecute));

/// <summary>
/// メッセージダイアログ表示処理
/// </summary>
private async void ShowMessageCommandExecute()
{
    await Metro.ShowMessageAsync("This is the title", "Some message");
}

진행 대화 상자의 경우

MainUcViewModel.cs

/// <summary>
/// プログレスダイアログ　コマンド
/// </summary>
private DelegateCommand showProgressCommand;
public DelegateCommand ShowProgressCommand =>
    showProgressCommand ?? (showProgressCommand = new DelegateCommand(ShowProgressCommandExecute));

/// <summary>
/// プログレスダイアログ表示処理
/// </summary>
private async void ShowProgressCommandExecute()
{
    var controller = await Metro.ShowProgressAsync("Please wait...", "Progress message");

    for (var i = 0; i < 10; i++)
    {
        controller.SetProgress(1.0 / 10 * i);
        await Task.Delay(100);
    }
    await controller.CloseAsync();
}

실행 결과

요약

MVVM 복합 애플리케이션에서도 MahApps.Metro 대화 상자를 사용하는 경우 공식적으로 IDialogCoordinator 를 사용하는 것이 좋을 것입니다.
Window 자체는, 특히 고정으로 View명을 지정한 것은 아니기 때문에, 이 정도는 허용 범위일까라고 개인적으로는 생각합니다.

이미 Qiita 내에서도 ViewModel에서 표시하는 IDialogCoordinator를 사용한 방법을 게시된 분이 이미 계셨습니다.
soi 님의 게시물

WPF로 갈 수있는 대화 상자를 내는 방법

이쪽을 참고로 하는 편이 좋을지도?

보충 정보

확인 메시지의 경우 다음과 같이 옵션을 지정하여 가능합니다.

/// <summary>
/// メッセージダイアログ表示処理
/// </summary>
private async void ShowMessageCommandExecute()
{
    var metroDialogSettings = new MetroDialogSettings()
    {
        AffirmativeButtonText = "はい",
        NegativeButtonText = "いいえ",
        AnimateHide = true,
        AnimateShow = true,
        ColorScheme = MetroDialogColorScheme.Theme,
    };

    var diagResult = await Metro.ShowMessageAsync("This is the title", "Some message", MessageDialogStyle.AffirmativeAndNegative, metroDialogSettings);
    Console.WriteLine(diagResult);
}