CODEWITHSUNDEEP
c#mauicommunity-toolkit-mvvm
beeker
beeker

Reputation: 810

Maui Passing Navigation Parameter Community Toolkit ViewModel

I'm having trouble trying to figure out why I can't get a navigation property to pass to my page in Maui. I do understand that I shouldn't be able to see the property value in the constructor of the navigated to viewmodel but, even when I try to view the object in the actual navigated to page-behind code, it still appears null...

Passing the navigation property [MainViewModel.cs]

[RelayCommand]
async Task ShowPhotoDetails(PhotoDetailsFacade PhotoDetails)
{
    Dictionary<string, object> navigationParameter = new Dictionary<string, object>();
    navigationParameter.Add(nameof(PhotoDetailsFacade), PhotoDetails);
    await Shell.Current.GoToAsync($"PhotoDataPage", navigationParameter); //navigation parameter is filled here, can see properties when debugging         
}

PhotoDataPage is bound to a viewmodel... and has a binding to the viewmodel... [PhotoDataPage.xaml]

<ContentPage xmlns="[http://schemas.microsoft.com/dotnet/2021/maui](http://schemas.microsoft.com/dotnet/2021/maui)"
xmlns:x="[http://schemas.microsoft.com/winfx/2009/xaml](http://schemas.microsoft.com/winfx/2009/xaml)"
xmlns:viewmodel="clr-namespace:FishSnapData.ViewModel"
x:DataType="viewmodel:PhotoDataViewModel"
x:Class="MyProject.PhotoDataPage"
Title="PhotoDataPage">

...

<VerticalStackLayout BindingContext="{x:Type viewmodel:PhotoDataViewModel}"/><Image Source="{Binding PhotoDetails.FilePath}" HeightRequest="300" />

The viewmodel should receive the parameter... [PhotoDataViewModel.cs]

//[QueryProperty(nameOfPropertyThatWillRecieveTheData, parameterID (e.g. if there are multiple passed, this is the key in the dictionary))]
[QueryProperty("PhotoDetails", nameof(PhotoDetailsFacade))]
public partial class PhotoDataViewModel : ObservableObject
{
    [ObservableProperty] //adds all the inotifyproperty goo needed for databinding and onchanged events
    private PhotoDetailsFacade photoDetails;
        
    public PhotoDataViewModel()
    {           
    }...

Finally, the page hooks up the viewmodel. It is at this point that I think I should be able to view the properties of the PhotoDetails object but, they are still null [PhotoDataPage.xaml.cs]

public partial class PhotoDataPage : ContentPage
{
    public PhotoDataPage(PhotoDataViewModel Vm)
    {
        InitializeComponent();
        BindingContext = Vm; //browsing, the PhotoDetails object is still null here
    }

Any suggestions to help me figure this out will be very much appreciated. Thanks

Upvotes: 1

Views: 3175

Answers (1)

Liqun Shen-MSFT
Liqun Shen-MSFT

Reputation: 8220

There are two approaches to receiving navigation data:

  1. Process navigation data using query property attributes
  2. Process navigation data using a single method

You may use the second approach, as you want to pass the data to viewmodel (not code behind) which represents the BindingContext of the PhotoDataPage.

You may try the following code (for PhotoDataViewModel)

public partial class PhotoDataViewModel : ObservableObject,IQueryAttributable
{
    public PhotoDataViewModel()
    {

    }

    [ObservableProperty] //adds all the inotifyproperty goo needed for databinding and onchanged events
    private PhotoDetailsFacade photoDetails;

    public void ApplyQueryAttributes(IDictionary<string, object> query)
    {
        PhotoDetails = query["PhotoDetailsFacade"] as PhotoDetailsFacade;
    }
}

Hope it works.

Upvotes: 2

Related Questions