Post
Ask Question

How To Add The Dynamic Control Into The View From View Model In MVVM Pattern Using Prism Library In WPF

In this article I will demonstrate how can you write the code to add the dynamic control on the view via the button click event in WPF with MVVM pattern using prism library.

If you are 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:

Getting Started: MVVM Pattern Using Prism Library in WPF

Now I will show you a demo to add the dynamic control 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 3 different folders in the project for Model, View and View model respectively.

project

Step 3: Create pages in all folders,

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

View

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

Model

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

ViewModel

Step 4:

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

  1. using Prism.Mvvm;  
  2. using System.Windows.Controls;  
  3. namespace PrismMVVMTestProject.Models  
  4. {  
  5.     class TestModel : BindableBase  
  6.     {  
  7.   
  8.         private StackPanel _stkPanel;  
  9.         public StackPanel stkPanel  
  10.         {  
  11.             get { return _stkPanel; }  
  12.             set { SetProperty(ref _stkPanel, value); }  
  13.         }  
  14.     }  
  15. }  

code

Step 5:

a. Add the below 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.
  • ‘System.Windows.Controls’ for ‘StackPanel’.

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

c. Get the stackpanel from the TestView.cs and set it to the model property.

d. Attach a command to the method which will act like event where will add the dynamic label control to the stack panel.

e. Create a dynamic label control and add it to the model property of stackpanel which will reflect on the view.

  1. using PrismMVVMTestProject.Models;  
  2. using Prism.Mvvm;  
  3. using System.Windows.Controls;  
  4. using System.Windows.Input;  
  5. using Prism.Commands;  
  6.   
  7. namespace PrismMVVMTestProject.ViewModels  
  8. {  
  9.     class TestViewModel : BindableBase  
  10.     {  
  11.         private TestModel testModel;  
  12.   
  13.         public ICommand AddCommand { get; private set; }  
  14.         public TestViewModel(StackPanel stkpnlDynamicControls)  
  15.         {  
  16.             testModel = new TestModel();  
  17.             TestModel.stkPanel = stkpnlDynamicControls;  
  18.             AddCommand = new DelegateCommand(AddMethod);  
  19.         }  
  20.         public TestModel TestModel  
  21.         {  
  22.             get { return testModel; }  
  23.             set { SetProperty(ref testModel, value); }  
  24.         }  
  25.         private void AddMethod()  
  26.         {  
  27.             Label lblDynamic = new Label()  
  28.             {  
  29.                 Content = "This is Dynamic Label"  
  30.             };  
  31.             TestModel.stkPanel.Children.Add(lblDynamic);  
  32.         }  
  33.     }  
  34. }  

code

Step 6:

  • Add a button to add the dynamic label into the stack panel with add command property and bind that command which we have created in view model.

  • Add a stack panel in the TestView page.

  1. <Button Content="Add Label" Command="{Binding AddCommand}" HorizontalAlignment="Left"  
  2.   
  3. VerticalAlignment="Top" Width="75" Margin="31,21,0,0"/>  
  4.   
  5. <StackPanel Name="stkpnlDynamicControls" Margin="31,80,38,69"></StackPanel>  

code

Step 7:

Add ‘PrismMVVMTestProject.ViewModels’ namespace and bind Data Context of TestView Page to the ViewModel named  ‘TestViewModel’ constructor with a stack panel as a parameter.

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

code

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

TestView

Run the page and see the output:

Output

After clicking on the ‘Add Label’ button, it will add a dynamic label into the stackpanel

Add Label

Read more articles on WPF:


Similar Articles