Tuesday 15 September 2015

Close a WPF Window using MVVM

Close a WPF Window using MVVM

In MVVM (Model – View – ViewModel) design pattern, the ViewModel is a heart of View and this class that typically contains the values you want to display in your View  . ViewModel shouldn’t know anything about the View.

 In this article I will tell you different ways for closing form in WPF

1.   Using traditional Code Behind Close event

private void Close_Click(object sender, RoutedEventArgs e)

As you can see, it’s quite simple – only one line of code that I had to write

2.   Using MVVM design pattern

In the View of XAML my button:

<Button Content="Close" Command="{Binding CloseCommand}"/>

In the ViewModel:

public bool CanClose { get; set; }

private RelayCommand closeCommand;
public ICommand CloseCommand
        if(closeCommand == null)
            closeCommand = new RelayCommand(param => Close(), param => CanClose);

public void Close()

Problem with this solution

All we’ve done here is move the close button event handler from the code-behind file to the ViewModel. The problem we run into, As you may be aware, the this keyword refers to the class in which it exists. This was fine in the code-behind of the Window, as this then referred to the Window, and this.Close() would successfully call the window’s Close() method. But now that we’ve moved the method into the ViewModel, this no longer refers to the Window (View), but rather the ViewModel – which doesn’t have a Close method.

3.   The Action object.

We will add an Action property to the ViewModel, but define it from the View’s code-behind file. This will let us dynamically define a reference on the ViewModel that points to the View.

Creating Action

public Action CloseAction { get; set; }

public View()
    InitializeComponent() // this draws the View
    ViewModel vm = new ViewModel(); //this creates an instance of ViewModel
    this.DataContext = vm; // this sets the ViewModel as the DataContext for the View
    if ( vm.CloseAction == null )
        vm.CloseAction = new Action(() => this.Close());

we’ve assigned a delegate to the CloseAction Action property that we can simply invoke whenever we want to close the Window.

Calling in ViewModel

public void Save()
    CloseAction(); // Invoke the Action previously defined by the View

Using the method described here, we can define the Close method with a single line on the ViewModel, two lines of code on the View, and invoke the Close method with a single line making a call to CloseAction().

Happy Programming!!

Don’t forget to leave your feedback and comments below!

If you have any query mail me to Sujeet.bhujbal@gmail.com     

Sujeet Bhujbal

No comments:

Post a Comment