Show a specific image in a window (page, contentpage) when pressing a button from another window (page, contentpage) in C# XMAL NET MAUI

Question

I need help. I would like a code (C# XMAL NET MAUI) so that when a button is pressed in a window (page or contentpage), a specific image is displayed in another window (page or contentpage), I have already searched many forums and YouTube and I can't find anything =(

I show you a part of the code to give you an idea

code page 13

<ScrollView>
        <VerticalStackLayout BackgroundColor="White">
            <Button x:Name="Cambiarimagen" Text="cambiar imagen" BackgroundColor="Aqua" Clicked="Cambiarimagen_Clicked" ></Button>
            <Image></Image>
        </VerticalStackLayout>
    </ScrollView>

code page 12

public partial class Pagina12 : ContentPage
{
    public Pagina12()
    {
        InitializeComponent();
        
    }

    private void Cambiarimagen_Clicked(object sender, EventArgs e)
    {

    }
}

Thank you very much in advance

Answer 1

Yes, a simple method is to use Publish and subscribe to messages to achieve this.

The publish-subscribe pattern is a messaging pattern in which publishers send messages without having knowledge of any receivers, known as subscribers. Similarly, subscribers listen for specific messages, without having knowledge of any publishers.

Publish a message

MessagingCenter messages are strings. Publishers notify subscribers of a message with one of the MessagingCenter.Send overloads.

The following code example publishes a Hi message:

 MessagingCenter.Send<MainPage>(this, "Hi");

Subscribe to a message

Subscribers can register to receive a message using one of the MessagingCenter.Subscribe overloads.

The following code example shows an example of this:

MessagingCenter.Subscribe<MainPage> (this, "Hi", (sender) =>
{
    // Do something whenever the "Hi" message is received
});

Note：

MessagingCenter has been deprecated in .NET 7 and replaced with WeakReferenceMessenger in the CommunityToolkit.Mvvm NuGet package. For more information, see Messenger.

Update:

I created a simple demo to simulate this function. You can refer to the following code:

FirstPage.xaml.cs

public partial class FirstPage : ContentPage 
{
      public FirstPage()
      {
            InitializeComponent();

        MessagingCenter.Subscribe<object>(this, "Hi", (sender) =>
        {
            // Do something whenever the "Hi" message is received
            mImage.Source = "grass.png";

        });
    }

    private void Button_NavigateToSecondPage(object sender, EventArgs e)
    {
        Navigation.PushModalAsync(new SecondPage());
    }
}

FirstPage.xaml.cs

<?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="MauiPickerApp1121.FirstPage"
             Title="FirstPage">
    <VerticalStackLayout>
        <Label 
            Text="Welcome to First Page"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />

        <Image x:Name="mImage" Source="cherry.png"  Margin="20"/>

        <Button  Text="Navigate to next page" Clicked="Button_NavigateToSecondPage"/>
    </VerticalStackLayout>
</ContentPage>

SecondPage.xaml.cs

public partial class SecondPage : ContentPage 
{
      public SecondPage()
      {
            InitializeComponent();
      }

      private void Button_Clicked(object sender, EventArgs e)
      {
        MessagingCenter.Send<object>(this, "Hi");
    }
}

SecondPage.xaml

<?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="MauiPickerApp1121.SecondPage"
             Title="SecondPage">
    <VerticalStackLayout>
        <Label 
            Text="Welcome to Second Page"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />

        <Button   Text="send message" Clicked="Button_Clicked"  VerticalOptions="Center"/>
    </VerticalStackLayout>
</ContentPage>

Note:

Make sure to subscribe to message before sending message.