Post
Ask Question

How To Fire Button Click Event In MVVM Pattern Using Prism Library In WPF

If you are the new in 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 following link:

Now, I will show you a demo to fire the click event of a button from the view in view model.

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

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

project

Step 2:

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

solution

Step 3: Create pages in all folders,
  • Create a View Named ‘TestView.xaml’ in the Views folder.

    folder

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

    Models

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

    folder

Step 4:

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.     class TestModel: BindableBase  
  6.     {  
  7.         private string _Message;  
  8.         public string Message  
  9.         {  
  10.             get   
  11.             {  
  12.                 return _Message;  
  13.             }  
  14.             set  
  15.             {  
  16.                 SetProperty(ref _Message, value);  
  17.             }  
  18.         }  
  19.     }  
  20. }  

code

Step 5:

a. Add the following namespaces on the TestViewModel page,
  • ‘Prism.MVVM’ - To inherit the class named ‘Bindable Base’.
  • ‘PrismMVVMTestProject.Models’ - To accessing TestModel in this page.
  • System.Windows.Input - To add ICommand
  • Prism.Commands - To Use DelegateCommand

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

c. Attach command to the method which will act like event.

d. Set the message value ‘You Have Clicked the button’ as string in that method.

  1. using PrismMVVMTestProject.Models;  
  2. using Prism.Mvvm;  
  3. using System.Windows.Input;  
  4. using Prism.Commands;  
  5.   
  6. namespace PrismMVVMTestProject.ViewModels  
  7. {  
  8.     class TestViewModel: BindableBase  
  9.     {  
  10.         private TestModel testModel;  
  11.         public ICommand ClickCommand   
  12.         {  
  13.             get;  
  14.             private set;  
  15.         }  
  16.   
  17.         public TestViewModel()  
  18.         {  
  19.             testModel = new TestModel();  
  20.             ClickCommand = new DelegateCommand(ClickedMethod);  
  21.         }  
  22.         public TestModel TestModel  
  23.         {  
  24.             get  
  25.             {  
  26.                 return testModel;  
  27.             }  
  28.             set  
  29.             {  
  30.                 SetProperty(ref testModel, value);  
  31.             }  
  32.         }  
  33.         private void ClickedMethod()  
  34.         {  
  35.             TestModel.Message = "You Have Clicked the button";  
  36.         }  
  37.     }  
  38. }  

code

Step 6:
  • 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, NotifyOnSourceUpdated and UpdateSourceTrigger.

  • Add a button with command property and bind it that command which we have created in view model,
    1. <Label x:Name="lblMessage" HorizontalAlignment="Left"  
    2. Content="{Binding TestModel.Message,Mode=TwoWay,NotifyOnSourceUpdated=True,UpdateSourceTrigger=PropertyChanged}"   
    3. VerticalAlignment="Top"/>  
    4. <Button x:Name="button" Content="Click ME" Command="{Binding ClickCommand}"  
    5. HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="59,108,0,0"/>  

    code

Step 7:

Add PrismMVVMTestProject.ViewModels namespace and bind Data Context of TestView Page to the ViewModel,

  1. named‘ TestViewModel’.  
  2. using System.Windows;  
  3. using PrismMVVMTestProject.ViewModels;  
  4. namespace PrismMVVMTestProject.Views  
  5. {  
  6.     /// <summary>  
  7.     /// Interaction logic for TestView.xaml  
  8.     /// </summary>  
  9.     public partial class TestView: Window  
  10.     {  
  11.         public TestView()  
  12.         {  
  13.             InitializeComponent();  
  14.             this.DataContext = new TestViewModel();  
  15.         }  
  16.     }  
  17. }  

code

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

page

Run the page and see the output:

Output

After click on the button.

Output

Read more articles on WPF:


Similar Articles