Dialogs In WPF (MVVM)

• Dialogs In WPF (MVVM) - Part Two
• Dialogs In WPF (MVVM) - Part Three
  

Step 1. To start our work let’s create a new WPF application project and save it with name WpfApplication1.

Step 2. We will follow MVVM (Model - View - ViewModel) pattern to develop our simple project. At this step let’s organize project structure and add new folders: Models, ViewModels and Views.

Step 3. Move MainWindow.xaml to Views folder and edit namespaces in xaml and code behind files taking new placement into consideration:

• MainWindow.xaml: x:Class="WpfApplication1.Views.MainWindow";
• MainWindow.xaml.cs: namespace WpfApplication1.Views.

Step 4. Set StartupUri property in App.xaml to "Views/MainWindow.xaml" and run application to check it still works.

Step 5. To implement commands logic we have to use a RelayCommand class, you can download it and save in project root folder. Include RelayCommand.cs in project and change namespace to WpfApplication1.

Step 6. We will execute RelayCommand with parameter further, for this purpose make some changes:

• replace all instances of “Action execute” with “Action<object> execute”;
• replace “this.execute();” with “this.execute(parameter);” in public void Execute(object parameter) method.

or find any other implementation for RelayCommand with parameters.

Step 7. At Steps 7-11 we will create a view model for MainWindow of our project. Add new public class in ViewModels folder and name it MainWindowViewModel.

Step 8. Add using of System.Windows.Input namespace to MainWindowViewModel.cs:

Step 9. Add private field openDialogCommand and corresponding public property:

Step 10. Add private void method OnOpenDialog:

Step 11. Add parameterless constructor for MainWindowViewModel and initialize private field openDialogComand through RelayCommand instance:

Step 12. At steps 12-16 we will associate main window with its view model. Build project. Open App.xaml and add namespace for ViewModels folder:

Step 13. Add resource for MainWindowViewModel to Application.Resources section:

Step 14. Open MainWindow.xaml and declare DataContext property for Window node (along with Title, Height and Width properties):

Step 15. Add button to Grid node in markup of MainWindow.xaml and specify a Command property through binding to OpenDialogCommand property of data context:

Step 16. Put a breakpoint at the open curly brace of OnOpenDialog method in MainWindowViewModel and run the project. Click button and notice the project’s flow stopped at the breakpoint.

PART 2. DIALOG STRUCTURE

Step 17. In this part we will create a base for a modal dialog window. Add a new folder Dialogs to project tree and two subfolders - DialogService and DialogYesNo.

Step 18. All our dialogs must return a result of choice made by user. Add a new item DialogResultEnum.cs to DialogService folder, replace class with enum and define structure with possible dialog result values, for example:

Step 19. Add a new Window (WPF) to DialogService folder and name it DialogWindow.

Step 20. Add a property WindowStartupLocation to Window node and replace Grid section in DialogWindow markup with ContentPresenter node:

Step 21. Add a new public static class DialogService.cs to DialogService folder and define public static method OpenDialog which returns DialogResult:

Step 22. Get back to MainWindowViewModel, and modify OnOpenDialog method:

Step 23. Run project, put a breakpoint at closing curly brace in OnOpenDialog method and click button in main window. Dialog window should appear and result variable should have a DialogResult.Undefined value after closing the dialog.

PART 3. DIALOG VIEW

Step 24. In this part we will add a view for our modal dialog and define some logic. Add new public abstract class DialogViewModelBase to DialogService folder:

Step 25. Add new user control (WPF) to DialogYesNo folder and name it DialogYesNoView, place two buttons as a content of the control:

Step 26. Add a new class to DialogYesNo folder and name it DialogYesNoViewModel, make DialogYesNoViewModel derived from DialogViewModelBase.

Step 27. Add two commands to process Yes and No buttons click (similarly for button at main window, see Steps 8-9):

Step 28. Modify DialogYesNoView and add Command properties to Yes and No buttons. Pay attention to CommandParameter property - we will pass a reference to the hosting window as a parameter to commands:

Step 29. Get back to App.xaml and add namespace for DialogYesNo folder:

Step 30. Append an Application.Resources section with a resource for data template to associate DialogYesNoViewModel with DialogYesNoView:

Step 31. Get back to DialogWindow.xaml and add SizeToContent property to Window node along with WindowStartupLocation property:

Step 32. Modify signature of OpenDialog static method in DialogService, let the method accept a parameter of type DialogViewModelBase and define win variable’s DataContext property:

Step 33. Get back to MainWindowViewModel to modify call of DialogService.OpenDialog(). Create instance of DialogViewModelBase instantiated with DialogYesNoViewModel and pass it as an argument to DialogService.OpenDialog():

Now we have a modal YesNo dialog with empty commands to process buttons click, and the dialog still returns DialogResult.Undefined value after closing.

PART 4. DIALOG RESULT

Step 34. Get back to DialogViewModelBase, add public property UserDialogResult of type DialogResult: