Search code examples
popupmauimaui-community-toolkit

How to pass objects to PopupPage using MAUI.Toolkit or Mopup plugins?


I have a Maui app where I use MVVM pattern with MAUI Toolkik and also trying with Mopup plugin but I haven't found how to pass objects to Popup pages combined with MVVM. At the moment, I have a page, which I use to navigate to the PopupPage successfully and also I am able to connect the PopupPage with its viewmodel. What I am unable to do is to pass any kind of object to the PopupPage.

I have tried to set the PopupPage constructor with parameters but the methods to navigate to the PopupPage only recognize parameters setted on the code behind.

Here is my code:

Popup

<mopup:PopupPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="NewScholarApp.Views.MessagePopup"
         xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
           xmlns:mopup="clr-namespace:Mopups.Pages;assembly=Mopups"
           xmlns:viewmodels="clr-namespace:NewScholarApp.ViewModels"
            x:DataType="viewmodels:MessagePopupViewModel">
<mopup:PopupPage.BindingContext>
    <viewmodels:MessagePopupViewModel/>
</mopup:PopupPage.BindingContext>

<VerticalStackLayout BackgroundColor="White" HorizontalOptions="Center" VerticalOptions="Center" HeightRequest="100" WidthRequest="100">
    <Label 
        Text="{Binding Message}"
        VerticalOptions="Center" 
        HorizontalOptions="Center" />
</VerticalStackLayout>
</mopup:PopupPage>

I use this to navigate from my page viewmodel

await _popupNavigation.PushAsync(new MessagePopup(string text = "tex"));

If I try to set a parameter, shows this error, even that in my PopupPage constructor I have setted a parameter

"MessagePopup does not contain a a constructor that contains 1 argument"

**MessagePopupViewModel **

public partial class MessagePopupViewModel : ObservableObject
{
    #region AnP
    [ObservableProperty]
    private string message;

    private readonly IApiService _apiService;
    #endregion

    public MessagePopupViewModel(string tex)
    {
        Message = tex;
    }
}

Solution

  • you are navigating using this code

    await _popupNavigation.PushAsync(new MessagePopup(string text = "tex"));
    

    so MessagePopup MUST have a constructor that accepts a parameter

    public MessagePopup(string somevalue)
    

    if you also want to pass that value to your VM, then you can add

    BindingContext = new MessagePopupViewModel(somevalue);
    

    if you do this, then you should remove the BindingContext property from the XAML