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

Rahul Bansal
8y
49.9k
0
1

Article

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.

application

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

folders

Step 3: Create pages in all folders

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

View

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

PopUpWindow

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

TestModel

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.

ViewModels

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"/>

label

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();
}
}
}

code

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"/>

code

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();
}
}
}

code

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

TestView

Run the page and See the Output:

Output

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

PopUp