Post
Ask Question

Dialogs In WPF (MVVM) - Part Two

This time, I decided to make some changes to the project I told you about in my article. The main idea is to implement the DialogFacade as a control and make the MainWindow to manage all dialog Windows as a part of the UI. Also, I made ShowDialog[Name] method, that depends on a viewmodel of a dialog view. Since I’m going to tell about the changes, please refer to the material of the previous article or you may download the attached source code.

Step 1: Make DialogFacade, derived from System.Windows.Controls.Control and remove the deriving from IDialogFacade:

  1. public class DialogFacade : Control  
  2. {  
  3.     ...  
  4. } 

Step 2: Add the auto property Owner of type System.Windows.Window to DialogFacade:

  1. public Window Owner { get; set; } 

Step 3: Delete “owner” parameter from ShowDialogYesNo and ShowDialog signatures.

Step 4: Access the Owner property in the ShowDialog method (instead “owner” parameter):

  1. private DialogResult ShowDialog(DialogViewModelBase vm)  
  2. {  
  3.     DialogWindow win = new DialogWindow();  
  4.     if (this.Owner != null)  
  5.         win.Owner = this.Owner;  
  6.     win.DataContext = vm;  
  7.     win.ShowDialog();  
  8.     DialogResult result =  
  9.         (win.DataContext as DialogViewModelBase).UserDialogResult;  
  10.     return result;  
  11. } 

Step 5: Make DialogYesNoViewModel class public and add ShowDialogYesNo2() method to the DialogFacade:

  1. public void ShowDialogYesNo2(DialogYesNo.DialogYesNoViewModel vm)  
  2. {  
  3.     this.ShowDialog(vm);  
  4. } 

Step 6: Delete old IDialogFacade, generate a new one for DialogFacade and inherit it

  1. public class DialogFacade : Control, IDialogFacade  
  2. {  
  3.     ...  
  4. } 

Step 7: Add the two events to the DialogYesNoViewModel:

  1. public class DialogYesNoViewModel : DialogViewModelBase  
  2. {  
  3.     public event EventHandler YesClicked = delegate { };  
  4.     public event EventHandler NoClicked = delegate { };  
  5.     ...  
  6. } 

Step 8: Add invoking of the events OnYesClicked and OnNoClicked methods:

  1. private void OnYesClicked(object parameter)  
  2. {  
  3.     this.YesClicked(this, EventArgs.Empty);  
  4.     this.CloseDialogWithResult(parameter as Window, DialogResult.Yes);  
  5. }  
  6.   
  7. private void OnNoClicked(object parameter)  
  8. {  
  9.     this.NoClicked(this, EventArgs.Empty);  
  10.     this.CloseDialogWithResult(parameter as Window, DialogResult.No);  
  11. } 

Step 9: Delete the IDialogFacade dialogFacade parameter from the constructor and remove the initialization of this.dialogFacade in the MainWindowViewModel:

  1. public MainWindowViewModel()  
  2. {  
  3.     this.openDialogCommand = new RelayCommand(OnOpenDialog);  
  4. } 

Step 10: Add the public property for the IDialogFacade dialogFacade field to the MainWindowViewModel:

  1. private IDialogFacade dialogFacade = null;  
  2. public IDialogFacade DialogFacade  
  3. {  
  4.     get { return this.dialogFacade; }  
  5.     set { this.dialogFacade = value; }  
  6. } 

Step 11: Add the methods to the MainWindowViewModel to invoke, after the Yes or No button was clicked:

  1. private void OptionYes(object sender, EventArgs e)  
  2. {  
  3.   
  4. }  
  5.   
  6. private void OptionNo(object sender, EventArgs e)  
  7. {  
  8.   
  9. } 

Step 12: Modify OnOpenDialog method in the MainWindowViewModel:

  1. private void OnOpenDialog(object parameter)  
  2. {  
  3.     var vm = new Dialogs.DialogYesNo.DialogYesNoViewModel("Question");  
  4.     vm.YesClicked += OptionYes;  
  5.     vm.NoClicked += OptionNo;  
  6.     this.dialogFacade.ShowDialogYesNo2(vm);  
  7. } 

Step 13: Build the project and add a namespace to the MainWindow:

  1. xmlns:df="clr-namespace:WpfApplication1.Dialogs.DialogFacade" 

Step 14: Add a DialogFacade control to the grid content in the MainWindow and give it a name:

  1. <Grid>  
  2.     <df:DialogFacade x:Name="df"></df:DialogFacade>  
  3.     ...  
  4. </Grid> 

Step 15: Open the code at the backend of the MainWindow and modify a constructor:

  1. public MainWindow()  
  2. {  
  3.     InitializeComponent();  
  4.   
  5.     this.df.Owner = this;  
  6.     (this.DataContext as ViewModels.MainWindowViewModel).DialogFacade = this.df;  
  7. } 

Step 16: Put the break points on open curly braces in OptionYes and OptionNo methods in the MainWindowViewModel, run the project and notice the program flow stops after Yes or No buttons were clicked.


Similar Articles