How To Open A Child Window From View Model In MVVM In WPF

If you are new to MVVM pattern using Prism Library then you can follow my very first article to start the MVVM and add the dlls into the project from the below link,

• Getting Started: MVVM Pattern Using Prism Library in WPF

Now I will show you a demo to show a popup window on the view via the click event of a button from the view in view model.

Note: In this article I am using Visual Studio 2013 and ‘Prism.Unity’ via nugget Packages.

Step 1: Create a project named ‘PrismMVVMTestProject’ of WPF application.

Step 2: It’s a better approach to create the three different folders in the project for Model, View and View model respectively.

Step 3: Create pages in all folders

i. Create a View Named ‘TestView.xaml’ as a parent page in the Views folder.

ii. Also create a View Named ‘PopUpWindow.xaml’ as a child page in the Views folder.

iii. Create a Model Named ‘TestModel.cs’ in the Models folder.

Note: We don’t not need Model in this article, I have just created it for the best practices.

iv. Create a ViewModel Named ‘TestViewModel.cs’ in the ViewModels folder.

Step 4: Add a label on the child window page named ‘PopupWindow.xaml’

<Label Content="This is Pop Up window" HorizontalAlignment="Left" VerticalAlignment="Top"

Margin="67,113,0,0"/>

Step 5:

a. Add the below namespaces on the TestViewModel page,

• ‘Prism.MVVM’ To inherit the class named ‘Bindable Base’.
• ‘PrismMVVMTestProject.Views’ To accessing child window in this page.
• System.Windows.Input To add ICommand.
• Prism.Commands To Use DelegateCommand.

b. Create a command named ‘ShowCommand’

c. Attach that command to the method named ‘ShowMethod’ which will act like event where will add the show the child window from the view model.

d. Create a object of child window and show it,

using PrismMVVMTestProject.Views;
using Prism.Mvvm;
using System.Windows.Input;
using Prism.Commands;
using System.Windows.Data;
namespace PrismMVVMTestProject.ViewModels
{
    class TestViewModel: BindableBase
    {
        public ICommand ShowCommand
        {
            get;
            private set;
        }
        public TestViewModel() {
            ShowCommand = new DelegateCommand(ShowMethod);
        }
        private void ShowMethod() {
            PopUpWindow objPopupwindow = new PopUpWindow();
            objPopupwindow.Show();
        }
    }
}

Step 6:

· Add a button to show the child window with ShowCommand property and bind it that command which we have created in view model.

<Button Content="Show Popup" Command="{Binding ShowCommand}" HorizontalAlignment="Left"

VerticalAlignment="Top" Width="75" Margin="31,21,0,0"/>

Step 7: Add ‘PrismMVVMTestProject.ViewModels’ namespace and bind Data Context of TestView Page to the ViewModel named ‘TestViewModel’.

using System.Windows;
using PrismMVVMTestProject.ViewModels;
namespace PrismMVVMTestProject.Views
{
    /// <summary>
    /// Interaction logic for TestView.xaml
    /// </summary>
    public partial class TestView: Window
    {
        public TestView()
        {
            InitializeComponent();
            this.DataContext = new TestViewModel();
        }
    }
}

Step 8: Change the ‘StartupUri’ from default page ‘MainWindow’ to ‘TestView’ page,

Run the page and See the Output:

After click on the ‘Show PopUp’ button, it will show the child window.

Read more articles on WPF:

• Update UI With WPF Dispatcher And TPL
• Building Custom Email Client In WPF Using C#