Xamarin Forms Using Messagingcenter For Communication Complete Guide

Understanding MessagingCenter

MessagingCenter is a part of Xamarin.Forms that facilitates communication between different parts of your application, such as Pages, ViewModels, and Services. It allows you to send messages with or without data from one component to another without needing a direct reference.

Step-by-Step Example

Let’s create a simple Xamarin Forms application that demonstrates the use of MessagingCenter. In this example, we will have two pages: MainPage and DetailPage. From DetailPage, we will send a message to MainPage when a button is clicked, and MainPage will handle this message and display an alert.

1. Create a New Xamarin Forms Project

• Open Visual Studio.
• Go to File > New > Project.
• Select Mobile App (Xamarin.Forms) and click Next.
• Name your project "MessagingCenterExample" and click Create.
• Choose the Blank template and ensure that .NET Standard code sharing strategy is selected.

2. Design the MainPage Layout

Replace the content of MainPage.xaml with the following:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MessagingCenterExample.MainPage">
    <ContentPage.Content>
        <StackLayout Padding="20">
            <Label Text="Welcome to MessagingCenter Example"
                   FontSize="Medium"
                   HorizontalTextAlignment="Center"
                   Margin="20"/>

            <Button Text="Navigate to Detail Page"
                    Clicked="Button_Clicked"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

In MainPage.xaml.cs, subscribe to a message that will be sent by DetailPage.

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace MessagingCenterExample
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            // Subscribe to a Message
            MessagingCenter.Subscribe<DetailPage, string>(this, "MessageFromDetail", (sender, arg) =>
            {
                DisplayAlert("Message Received", $"Received: {arg}", "OK");
            });
        }

        private void Button_Clicked(object sender, EventArgs e)
        {
            Navigation.PushAsync(new DetailPage());
        }
    }
}

Here we are subscribing to a message named "MessageFromDetail" in the constructor of MainPage. When this message is received, it will invoke the lambda function, which triggers a display alert.

3. Design the DetailPage Layout

Replace the content of DetailPage.xaml with the following:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MessagingCenterExample.DetailPage">
  <ContentPage.Content>
      <StackLayout Padding="20">
          <Label Text="Detail Page"
                 FontSize="Medium"
                 HorizontalTextAlignment="Center"
                 Margin="20"/>

          <Entry x:Name="entryMessage"
                 Placeholder="Enter your message"/>

          <Button Text="Send Message Back to Main Page"
                  Clicked="SendMessageBack_Clicked"/>
      </StackLayout>
  </ContentPage.Content>
</ContentPage>

In DetailPage.xaml.cs, when the user enters a message and clicks the button, we will send this message back to MainPage.

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace MessagingCenterExample
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class DetailPage : ContentPage
    {
        public DetailPage()
        {
            InitializeComponent();
        }

        private void SendMessageBack_Clicked(object sender, EventArgs e)
        {
            // Send a message with data
            MessagingCenter.Send(this, "MessageFromDetail", entryMessage.Text);
            Navigation.PopAsync();
        }
    }
}

In SendMessageBack_Clicked, we send the message using the method MessagingCenter.Send. We pass the current page instance (this) as the sender, specify the message name "MessageFromDetail", and include the text entered by the user as payload data.

4. Run Your Application

• Set the Android or iOS project as the startup project.
• Deploy the application to an emulator or physical device.
• Click the button on MainPage to navigate to DetailPage.
• Enter a message and press the button to send it back.
• Check if the message has been received and displayed in MainPage.

Summary of Important Points

1. Subscribing to Messages: Use MessagingCenter.Subscribe<TSender, TArgs> to listen for messages sent from specific senders with a certain type of data.

   MessagingCenter.Subscribe<TypeOfSender, DataType>(this, "messageName", HandleFunction);
   

2. Sending Messages: Use MessagingCenter.Send to broadcast a message.

   MessagingCenter.Send(senderInstance, "messageName", dataToSend);
   

3. Unsubscribing from Messages: To avoid memory leaks, especially in view-models that may be recreated multiple times, unsubscribe when no longer needed.

   MessagingCenter.Unsubscribe<TypeOfSender, DataType>(this, "messageName");
   

Advanced Example: Sending from ViewModel

To better illustrate how MessagingCenter can be used within MVVM architecture, let's update the previous example so that messaging occurs between pages through a ViewModel.

1. Add a ViewModel

Create a new class called DetailViewModel.cs:

public class DetailViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    private string _messageToSend;

    public string MessageToSend
    {
        get => _messageToSend;
        set
        {
            _messageToSend = value;
            OnPropertyChanged(nameof(MessageToSend));
        }
    }

    public ICommand SendMessageCommand { get; }

    public DetailViewModel()
    {
        SendMessageCommand = new Command(SendMessageBack);
    }

    private void SendMessageBack()
    {
        // Send a message from ViewModel
        MessagingCenter.Send(this, "MessageFromViewModel", MessageToSend);
    }
}

2. Update DetailPage to use ViewModel

In DetailPage.xaml.cs, set the binding context to the ViewModel and handle navigation:

using System.Windows.Input;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace MessagingCenterExample
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class DetailPage : ContentPage
    {
        public DetailViewModel ViewModel { get; set; }

        public DetailPage()
        {
            InitializeComponent();
            ViewModel = new DetailViewModel();
            BindingContext = ViewModel;

            // Subscribe to receive message from ViewModel
            MessagingCenter.Subscribe<DetailViewModel, string>(this, "MessageFromViewModel", (sender, arg) =>
            {
                DisplayAlert("Message from ViewModel", $"Received: {arg}", "OK");
                Navigation.PopAsync();
            });
        }
    }
}

In DetailPage.xaml, bind the entry to the MessageToSend property and set the button's command to SendMessageCommand:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MessagingCenterExample.DetailPage">
    <ContentPage.Content>
        <StackLayout Padding="20">
            <Label Text="Detail Page"
                   FontSize="Medium"
                   HorizontalTextAlignment="Center"
                   Margin="20"/>

            <Entry Text="{Binding MessageToSend}"
                   Placeholder="Enter your message"/>

            <Button Text="Send Message via ViewModel"
                    Command="{Binding SendMessageCommand}"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

3. Modify MainPage Subscription

Ensure that the message handler in MainPage is now subscribed to the ViewModel instead of DetailPage:

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace MessagingCenterExample
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            // Subscribe to a Message from ViewModel
            MessagingCenter.Subscribe<DetailViewModel, string>(this, "MessageFromViewModel", (sender, arg) =>
            {
                DisplayAlert("Message Received", $"Received: {arg}", "OK");
            });
        }

        private void Button_Clicked(object sender, EventArgs e)
        {
            Navigation.PushAsync(new DetailPage());
        }
    }
}

In this advanced example, the DetailPage uses a ViewModel to handle sending the message, promoting cleaner separation of concerns.

Conclusion

The MessagingCenter is a powerful tool in Xamarin Forms that simplifies communication between different components of an application. By following these examples, beginners should have a solid understanding of how to integrate MessagingCenter into their projects, whether in a straightforward manner or within the context of MVVM architecture.