How to use a Dialog with MVVM

[timunie]

This questions is transferred from #3446

How can we call a Dialog from the ViewModel?

[timunie]

Hi,

in the demo app you can see a sample how to use the DialogCoordinator:

MahApps.Metro/src/MahApps.Metro.Samples/MahApps.Metro.Demo/MainWindowViewModel.cs

Lines 428 to 440 in bbab412

	private async void RunCustomFromVm()
	{
	var customDialog = new CustomDialog() { Title = "Custom Dialog" };
	var dataContext = new CustomDialogExampleContent(instance =>
	{
	this._dialogCoordinator.HideMetroDialogAsync(this, customDialog);
	System.Diagnostics.Debug.WriteLine(instance.FirstName);
	});
	customDialog.Content = new CustomDialogExample { DataContext = dataContext };
	await this._dialogCoordinator.ShowMetroDialogAsync(this, customDialog);
	}

You can add a reference like this:

MahApps.Metro/src/MahApps.Metro.Samples/MahApps.Metro.Demo/MainWindowViewModel.cs

Line 62 in bbab412

private readonly IDialogCoordinator _dialogCoordinator;

MahApps.Metro/src/MahApps.Metro.Samples/MahApps.Metro.Demo/MainWindowViewModel.cs

Line 69 in bbab412

this._dialogCoordinator = dialogCoordinator;

And in your MainWindow:

MahApps.Metro/src/MahApps.Metro.Samples/MahApps.Metro.Demo/MainWindow.xaml.cs

Lines 23 to 33 in bbab412

	public MainWindow()
	{
	_viewModel = new MainWindowViewModel(DialogCoordinator.Instance);
	DataContext = _viewModel;
	InitializeComponent();
	flyoutDemo = new FlyoutDemo();
	flyoutDemo.ApplyTemplate();
	flyoutDemo.Closed += (o, e) => flyoutDemo = null;
	}

Last but not least in your MainWindow.xaml:

MahApps.Metro/src/MahApps.Metro.Samples/MahApps.Metro.Demo/MainWindow.xaml

Line 17 in bbab412

mah:DialogParticipation.Register="{Binding}"

---

More over here is the documentation: https://mahapps.com/docs/dialogs/mvvm-dialog

I hope this helps.

Happy coding
Tim

[msavazzi]

@timunie sorry for the question, maybe trivial, but I'm confused byt this:

// Set the DataContext for your View this.DataContext = new MainWindowViewModel(DialogCoordinator.Instance);

but in the app that is create the DataContext is set up automatically in the XAML with:

<Page.DataContext> <Binding Path="SettingsViewModel" Source="{StaticResource Locator}" /> </Page.DataContext>

In fact when I add the DialogCoordinator in the method of the view model the XAML binding gives me an error.
What am I doing wrong?

[timunie]

@msavazzi You can also access DialogCoordinator.Instance directly in your model as far as I remember. Nevertheless you need to register the model in the XAML

That means you can remove this Constructor MainWindowViewModel(DialogCoordinator.Instance);

Happy coding
Tim

[msavazzi]

I did this: In the ShellWindow.xaml I've put: Dialog:DialogParticipation.Register="{Binding}"
The shell window has several pages.
In the MasterDetailPage.xaml the data context is defined as: DataContext="{Binding MasterDetailViewModel, Source={StaticResource Locator}}"
Then in the MasterDetailViewModel the following:

        private readonly IDialogCoordinator _dialogCoordinator;
        public MasterDetailViewModel()
        {
            this._dialogCoordinator = DialogCoordinator.Instance;
        }

But when I write in the code:
var result = await this.ShowChildWindowAsync<CloseReason>(ChildWindowManager.OverlayFillBehavior.FullWindow);

I get this error:

Error CS1929 'MasterDetailViewModel' does not contain a definition for 'ShowChildWindowAsync' and the best extension method overload 'ChildWindowManager.ShowChildWindowAsync(Window, ChildWindow, ChildWindowManager.OverlayFillBehavior)' requires a receiver of type 'Window'

What am I doing wrong?
I'm very confused

[timunie]

ChildWindow is not a Dialog and therefor cannot be shown via DialogCoordinator.