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.

WPF

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

model

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.

ViewModels

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

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’ 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;
}
}
}

code

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

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

Hide Me

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

Hide Me

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.