Post
Ask Question

Getting Started: MVVM Pattern Using Prism Library in WPF

I hope you have some knowledge of WPF and XAML before starting.

MVVM pattern is called Model-View-ViewModel pattern where we have three major components named:-

  • Model
  • View
  • View Model

It’s basically developed to provide the functionality of data binding in WPF and separate the presentation layer from data layer and logic layer like in MVC (Model View Controller).

Whereas Prism is used to create the loosely coupled components which can work independently in an easy way. There are two main authors who are actively working on Prism library named Brian Lagunas and Brian Noyes.

You can read more about Prism and download/ add from the link directly.

Now I will show you a demo to set the value in view model and show that value in the view.

Note: In this article I am using Visual Studio 2015.

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

wpf

Step 2: Right Click on project and select ‘Manage NuGet Packages…’

Packages

Step 3:

  • Type ‘Prism.Unity‘ in browse section and select that package.
  • Click on Install button

Prism.Unity

Step 4: Accept the terms and conditions,

terms and Condition

Prism library has been installed successfully.

library

Now you can see the newly added dlls in the reference section of the project.

dlls

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

mvc

Step 7: Create pages in all folders,

  • Create a View Named ‘TestView.xaml’ in theViews folder.

    View

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

    Models

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

    ViewModel

Step 8:

Add the namespace named ‘Prism.MVVM’ in the TestModel page to inherit the class named ‘Bindable Base’. Create a property named Message where ‘ref‘ parameter allows you to update its value,

  1. using Prism.Mvvm;  
  2.   
  3. namespace PrismMVVMTestProject.Models   
  4. {  
  5.     classTestModel: BindableBase  
  6.     {  
  7.         privatestring _Message;  
  8.         publicstring Message  
  9.         {  
  10.             get   
  11.             {  
  12.                 return _Message;  
  13.             }  
  14.             set  
  15.             {  
  16.                 SetProperty(ref _Message, value);  
  17.             }  
  18.         }  
  19.     }  
  20. }  

code

Step 9:
  • Add the namespace named ‘Prism.MVVM’ and ‘PrismMVVMTestProject.Models’ in the TestViewModel page to inherit the class named ‘Bindable Base’ and accessing TestModel in this page.

  • Create a property of TestModel class object where ‘ref‘parameter allows you to update its value.

  • Set the message value "This Is Prism Example" as string.
    1. using PrismMVVMTestProject.Models;  
    2. using Prism.Mvvm;  
    3. namespace PrismMVVMTestProject.ViewModels  
    4. {  
    5.     classTestViewModel: BindableBase  
    6.     {  
    7.         privateTestModel testModel;  
    8.         public TestViewModel()  
    9.         {  
    10.             testModel = newTestModel();  
    11.             testModel.Message = "This Is Prism Example";  
    12.         }  
    13.         publicTestModel TestModel   
    14.         {  
    15.             get  
    16.             {  
    17.                 return testModel;  
    18.             }  
    19.             set   
    20.             {  
    21.                 SetProperty(ref testModel, value);  
    22.             }  
    23.         }  
    24.     }  
    25. }  

    code

Step 10:

Add a label named lblMessage in the TestView page and bind its content with the model property name with some other properties of binding like Mode and UpdateSourceTrigger,

  1. <Label x:Name="lblMessage" HorizontalAlignment="Left"  
  2. Content="{Binding TestModel.Message,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"  
  3. VerticalAlignment="Top"/>  
code

Step 11:

Add PrismMVVMTestProject.ViewModels namespace and bind DataContext of TestView Page to the ViewModel named ‘TestViewModel’.
  1. using System.Windows;  
  2. using PrismMVVMTestProject.ViewModels;  
  3. namespace PrismMVVMTestProject.Views  
  4. {  
  5.     ///<summary>  
  6.     /// Interaction logic for TestView.xaml  
  7.     ///</summary>  
  8.     publicpartialclassTestView: Window  
  9.     {  
  10.         public TestView()  
  11.         {  
  12.             InitializeComponent();  
  13.             this.DataContext = newTestViewModel();  
  14.         }  
  15.     }  
  16. }  

code

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

code

Run the page and see the output:

output

Read more articles on WPF:


Similar Articles