How To Display And Hide A Control 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:

Getting Started: MVVM Pattern Using Prism Library in WPF

Now I will show you a demo to make visible and hide a label 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 3 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’ in the Views folder.

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

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

Step 4:

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

using Prism.Mvvm;
using System.Windows;
namespace PrismMVVMTestProject.Models
{
    class TestModel : BindableBase
    {

        private Visibility _MessageVisibilty;
        public Visibility MessageVisibilty { get { return _MessageVisibilty; } set { SetProperty(ref _MessageVisibilty, value); } }
    }
}

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’ for ‘Visibility’.

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

c. Attach 2 commands to the both methods which will act like event for visible and hide the label control.

d. Show the label in Show Method and Hide the label in HideMethod.

using PrismMVVMTestProject.Models;
using Prism.Mvvm;
using System.Windows;
using System.Windows.Input;
using Prism.Commands;

namespace PrismMVVMTestProject.ViewModels
{
    class TestViewModel : BindableBase
    {
        private TestModel testModel;
        public ICommand ShowCommand { get; private set; }
        public ICommand HideCommand { get; private set; }

        public TestViewModel()
        {
            testModel = new TestModel();
            ShowCommand = new DelegateCommand(ShowMethod);
            HideCommand = new DelegateCommand(HideMethod);
        }

        public TestModel TestModel
        {
            get { return testModel; }
            set { SetProperty(ref testModel, value); }
        }
        private void ShowMethod()
        {
            TestModel.MessageVisibilty = Visibility.Visible;
        }
        private void HideMethod()
        {
            TestModel.MessageVisibilty = Visibility.Hidden;
        }

    }
}

Step 6:

• Add a button for shoing the label with command property and bind that command which we have created in view model.
  
  
• Add another button for hiding the label with command property and bind that command which we have created in view model.
  
  
• Add a label in the TestView page and bind its visibility with the model property name with some other properties of binding like Mode, NotifyOnSourceUpdated and UpdateSourceTrigger.

<Button Content="Show Me" Command="{Binding ShowCommand}" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="31,60,0,0"/>

<Button Content="Hide Me" Command="{Binding HideCommand}" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="148,60,0,0"/>

<Label Visibility="{Binding TestModel.MessageVisibilty,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"

Content="I am Here" Margin="89,124,-89,-124"/>

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 ‘Hide Me’ button, it will hide the label,

And when you click on the ‘Hide Me’ button, it will hide the label,

Tip: You can also use ‘Visibility.Collapsed’ in place of ‘Visibility.Hidden’. In the hidden space of control will remain of the hidden control but in collapsed the space of control will not remain.

Read more articles on WPF:

• Create a C# Code Editor Using WPF
• Simple WPF TreeView Control Programmatically