Andrew Taylor
Andrew Taylor

Reputation: 155

How pass parameter when navigate to another page (Shell)

I've just started trying to use MAUI in Visual studio to develop a multiplatform app. I have managed to use shell navigation and this works well using the flyout.

What I want to do is have a button click which navigates to another page passing a varialbe with it.

What does work (kind of) is this:

await Navigation.PushModalAsync(new ResultListView(ordnum));

This does navigate to the page and passes the var ordnum as I want, however it breaks out of the shell navigation (I loose the flyout etc).

What I can't figure out is how to do it within Shell

await Shell.Current.GoToAsync

seems to be what I want, but when I use routings I can't specify the variable in the same way?

This seems such a basic question I'm sure it's been asked before, but I honestly can't find it. I've spent all morning searching for an answer! The answers I did find about passing variables through XAML were very confusing.

Thanks

Andrew

Upvotes: 4

Views: 4220

Answers (2)

Gratzy
Gratzy

Reputation: 2898

I wasn't able to get Leandro's answer to work in MVVM with communityToolkit (because of case sensitivity issues). This is what worked for me:

Pay close attention to the lower / upper case on the variables.

Parent viewModel

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;

....

    [ObservableProperty]
    public AirPlane selectedPlane;

    ....

    [RelayCommand]
    public async Task Tap(AirPlane sender)
    {
        SelectedPlane = sender;

        var navigationParameter = new Dictionary<string, object>
        {
            ["EditAirplane"] = SelectedPlane
        };

        await Shell.Current.GoToAsync($"{nameof(EditPlanePage)}", navigationParameter);

    }

Child viewModel

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
public partial class EditPlaneViewModel : ObservableObject
{
    [ObservableProperty]
    AirPlane editAirplane;

    public EditPlaneViewModel()
    { 
    
    }

    public void SetEditPlane(AirPlane incomingAirplane)
    { 
        EditAirplane = incomingAirplane;

        //reload list async here
    }
 .....

Childpage.cs

public partial class EditPlanePage : ContentPage, IQueryAttributable
{
    private AirPlane _editAirplane;

    public EditPlanePage(EditPlaneViewModel vm)
    {
        InitializeComponent();

        _vm = vm;

        BindingContext = vm;
    }

    public void ApplyQueryAttributes(IDictionary<string, object> query)
    {
        _editAirplane = query["EditAirplane"] as AirPlane;
        _vm.SetEditPlane(_editAirplane);
    }

 ....

Upvotes: 0

Leandro Toloza
Leandro Toloza

Reputation: 2020

Lest supose you want to send an object PRODUCT

private Product productToSend;
private Product anotherProductToSend;

await Shell.Current.GoToAsync($"{nameof(YourPageHere)}?",
                new Dictionary<string, object>
                {
                    ["Object1"] = productToSend,
                    ["Object2"] = anotherProductToSend
                });

Then in your pageViewModel:

[QueryProperty("Object1", "Object1")]
[QueryProperty("Object2", "Object2")]
public partial class YourPageHereViewModel : ObservableObject
{
    [ObservableProperty]
    Product Object1;

    [ObservableProperty]
    Product Object2;
}

Upvotes: 8

Related Questions