Communicate Between Two View Models Using Messenger

Introduction

During complex application development, it is often required that we communicate between two view models. One straight forward way is to maintain a viewmodel single instance throughout the application and start accessing it from anywhere. However, this can cause maintenance difficulties when have dependencies. Even if we manage to handle the dependency issue, testing will become complicated.

In this kind of scenario, we can go with Messenger. Messenger is the MVVM Light framework. It will make exchanging data between two view models easy. Basically, Messenger will work like an Observer design pattern. For more information on the observer design pattern, refer to this article Observer Design Pattern

We will how we can communicate between 2 View Models using Messenger. Then, we will create 2 MVVM Controls by name ControlA, ControlB and try to call a method in which is there is one view model within another view model.

Prerequisites

The reader should know about MVVM

Steps

First, create WPF Project

Go to Nuget manager and install MVVM Light.

Create a Folder structure like below.

We will add 3 buttons in ControlA and when the button is clicked from ControlA, we will put a message in ControlB.

In Control B:

Under ViewModel, add the class ControlBViewModel then add the code shown below.

using System.ComponentModel;
using MSG = GalaSoft.MvvmLight.Messaging;
namespace MVVM.Messenger.Sample.Demo.ControlB.ViewModel
{
public class ControlBViewModel : INotifyPropertyChanged
{
public ControlBViewModel()
{
ContentA = "None of the button pressed";
MSG.Messenger.Default.Register<MessageName>(this, UpdateContent);
}
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged(string propertyName) => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
private string _contentA;
public string ContentA
{
get => _contentA;
set
{
_contentA = value;
OnPropertyChanged(nameof(ContentA));
}
}
public void UpdateContent(MessageName message)
{
ContentA = $"{message.Name} Pressed";
}
}
}

In the above class we can see that we have created a method called UpdateContent. From this, we will call from ControlA. In ControlB, using Messenger we are registering the method UpdateContent. Here, registering the method uniqueness depends on the parameter that we pass to that method. For instance, in the method UpdateContent, we are passing the parameter type MessageName. Basically, when we call any method using Messenger by passing parameter MessageName, Messenger will trigger UpdateContent Method.

That’s why I created a MessageName class specifically for UpdateContent in MessangerHelper file, as shown below.

namespace MVVM.Messenger.Sample.Demo
{
public class MessageName
{
public string Name { get; set; }
}
}

Under Vthe iewModel folder, create a UserControl with the name ControlBView

<UserControl x:Class="MVVM.Messenger.Sample.Demo.ControlB.View.ControlBView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:viewModel="clr-namespace:MVVM.Messenger.Sample.Demo.ControlB.ViewModel"
Width="400" Height="100">
<UserControl.Resources>
<viewModel:ControlBViewModel x:Key="vm"/>
</UserControl.Resources>
<UserControl.DataContext>
<Binding Source="{StaticResource vm}"/>
</UserControl.DataContext>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="Orange">
<Label Content="UserControlB" Height="30" Width="Auto" Foreground="White"/>
</Grid>
<Grid Grid.Row="1" Margin="15" HorizontalAlignment="Center" VerticalAlignment="Center">
<Label Height="100" Width="Auto" Content="{Binding ContentA}" FontSize="16"/>
</Grid>
</Grid>
</UserControl>

In the above code, we can see that ContentA Parameter was bounded to lable, which is actually defined in ViewModel using MVVM

In ControlA:

Under the ViewModel folder, add the class ControlAViewModel and then add the code shown below.

using System.ComponentModel;
using System.Windows.Input;
using MVVM.Messenger.Sample.Demo.ControlA.Business;
namespace MVVM.Messenger.Sample.Demo.ControlA.ViewModel
{
public class ControlAViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged(string propertyName) => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
private ICommand actionCommand;
public ICommand ActionCommand
{
get => actionCommand = actionCommand ?? new RelayCommand(this);
}
}
}

Under the View folder add UserControl ControlAView and add the below code:

<UserControl x:Class="MVVM.Messenger.Sample.Demo.ControlA.View.ControlAView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:viewModel="clr-namespace:MVVM.Messenger.Sample.Demo.ControlA.ViewModel"
Width="400" Height="150">
<UserControl.Resources>
<viewModel:ControlAViewModel x:Key="vm"/>
</UserControl.Resources>
<UserControl.DataContext>
<Binding Source="{StaticResource vm}"/>
</UserControl.DataContext>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="Orange">
<Label Content="UserControlA" Height="30" Width="Auto" Foreground="White"/>
</Grid>
<Grid Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center">
<StackPanel Orientation="Horizontal">
<Button Name="Button_A" Height="100" Width="100" Content="Button A" Command="{Binding ActionCommand}"
CommandParameter="{Binding ElementName=Button_A, Path=Content}"/>
<Button Name="Button_B" Height="100" Width="100" Content="Button B" Margin="5" Command="{Binding ActionCommand}"
CommandParameter="{Binding ElementName=Button_B, Path=Content}"/>
<Button Name="Button_C" Height="100" Width="100" Content="Button C" Margin="5" Command="{Binding ActionCommand}"
CommandParameter="{Binding ElementName=Button_C, Path=Content}"/>
</StackPanel>
</Grid>
</Grid>
</UserControl>

In the above UserControl, we can see that we bounded ActionCommnd to Buttons. This will redirect a click event to ViewModel, then from ViewModel to RelayCommand as per the MVVM pattern

Under the Business folder, add a class called RelayCommand, then add the code below.

using System;
using System.Windows.Input;
using MSG = GalaSoft.MvvmLight.Messaging;
using MVVM.Messenger.Sample.Demo.ControlA.ViewModel;
namespace MVVM.Messenger.Sample.Demo.ControlA.Business
{
public class RelayCommand : ICommand
{
private ControlAViewModel _controlAViewModel;
public RelayCommand(ControlAViewModel controlAViewModel)
{
_controlAViewModel = controlAViewModel;
}
public event EventHandler CanExecuteChanged;
public bool CanExecute(object parameter) => true;
public void Execute(object parameter)
{
if (parameter is null)
return;
MessageName messageName = new MessageName
{
Name = parameter.ToString()
};
MSG.Messenger.Default.Send(messageName);
}
}
}

In the above class, in the Execute method, we can see that whenever we click the button from ControlAView, it will redirect to the Execute method. The Button content uses the same content in MessageName.Name. We are sending it to ControlBViewModel using Messenger as Messenger.Default.Send(messageName).

Therefore, when build execute this syntax, the messenger starts looking for the method, which is registered with this parameter taken as the input, then it will trigger that method. In our case, it will be UpdateContent. So basically, Messenger will work like an Observer design pattern.

For your reference, I uploaded the solution.

Below is the output snap of all 3 buttons.

Summary

In this article, we learned about messenger and how to register a method and call it from another ViewModel.