Are QueryProperties supposed to work with [ObservableProperty]?

[DonThompson]

I'm working through learning .NET MAUI and using the MVVM toolkit. As I'm reaching the navigation stage and parameter passing, I'm running into issues where I have to manually call OnPropertyChanged, and it doesn't seem like this should be required. It also negates the possibility of using [QueryProperty].

I can build a new project to repro this if it's not obvious from the description below.

I have a simple 2-page app. The primary page is a list using a CollectionView. When you tap a cell, it navigates (Shell.Current.GoToAsync) to a detail page, passing along a custom object Character that has a property Name. I'm using the new Dictionary<string, object> approach to pass the parameter.

All pages are setup using MVVM/DI, and the detail page should simply display the name.
<Label Text="{Binding Path=Character.Name}" />

The VM has the property

[ObservableProperty]
public Character character;

So when the VM is instantiated, character is null. I'm assuming (haven't found a good lifecycle diagram yet), things are hooked up first, and the query attribute values happen later in the lifecycle. Ideally, I'd just set [QueryProperty("character", "character")] and magic would happen. Unfortunately, nothing happens here. My detail page loads, no name is displayed.

After some digging, I implemented IQueryAttributable and manually set it, but still no name displayed. In the end, I had to do the following manual notification to make the name display in the UI.

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

This doesn't seem intentional -- but I'm having a hard time finding any documentation hinting why this is happening. Am I misunderstanding some part of one or the other of these features? Is there something special that needs to be done in the lifecycle when the ObservableProperty values changes during page init?

[bijington]

I can see two potential issues which may be both causing your overall problem.

1. In QueryProperty or the ApplyQueryAttributes method you want to refer to the property and not the backing field. Basically you want to refer to Character and not character. This is because it's the setter on Character that automatically raises OnPropertyChanged for you.

As an added piece of advice I would use nameof(Character) instead of "Character" as it avoids the risk of typos and helps if you ever change the name.

And a further hopefully bit of helpful information is that this:

[ObservableProperty]
public Character character;

Is not actually the property it's the backing field, the MVVM toolkit will generate you a public Character Character property for you. I would also recommend changing your example above to be private to avoid any confusion on who needs to access it, e.g.

[ObservableProperty]
private Character character;

2. If you are binding to Character.Name then your Character class will also need to implement INotifyPropertyChanged or inherit from ObservableObject and add the relevant attribute to the name field as before

Also please let me know if this helps or if some of my assumptions are wrong 🙂

[DonThompson]

None of that seems to have had any impact. I had tried most of your first suggestion previously (some of the public/private and naming was just where I ended up trying various permutations).
The second suggestion was something I hadn't considered, but implementing that doesn't seem to be making any difference. I'm not directly changing the Name property at this point anyways -- I'm just assigning the whole object a value (so I'd assume the Character object would handle that notification).

I will try to spend some time and throw together a reproducible project next.

[bijington]

Thanks on the offer of a reproducible project, that would be my next question 🙂

[bijington]

Another quick thing to look out for is whether you have set the BindingContext property on your page

[DonThompson]

I took some time this morning and wrote up the reproduction - and am glad I did, it helped point me toward the actual problem... which is that the Character, when created via 'new', is actually a sub-class of Character. So the problem seems to be that if you have a collection view page with, let's say, a collection of Animal, but you add objects to that collection by, say, new Fish() (which derives from Animal), then when you pass the Animal (which is of type Fish), something goes haywire.

You can see the repository here: https://github.com/DonThompson/communitytoolkitrepro1

I've tried to document it as best I can in both the readme and with comments in DetailViewModel.cs.

Hope this helps!

[bijington]

Hey Don,

I have had a quick look at your reproduction, thank you for providing this as it has really helped to understand your issue. It appears you are not quite using it correctly. I will open a PR against your repository to show it can be used.

[bijington]

The PR is at DonThompson/communitytoolkitrepro1#1 I'll be happy to discuss any details that might not be clear

[DonThompson]

Thank you. I see what you're saying about setting the property, not the field - this explains why I'm having to use OnPropertyChanged manually. However, some clarification questions I still have on my first issue.

• Are you saying that IQueryAttributable is required if I want to use a complex object? (reading your comment in MainViewModel.cs)
  • The official docs (https://docs.microsoft.com/en-us/dotnet/maui/fundamentals/shell/navigation) seem to indicate that QueryProperty should work just fine for complex objects.
• I'm still confused about the parent class / sub class behavior. When I use new Character(), I CAN set the character field and not the Character property and it updates fine. When I use new SubCharacter(), it doesn't work. This inconsistency doesn't seem right.
• Why does the entire application crash when trying to use the subclass object and [QueryProperty]?

[bijington]

You are of course correct! Apologies I read the word primitive in the initial parts of the navigation docs and associated the QueryProperty part with that. Let me answer your Qs as best I can:

1. No I apologise you are correct as I mentioned above.
2. How are you setting these?
3. The crash occurs because .NET MAUI does not know how to convert your SubCharacter to a Character class. If you stick a try catch block around your GoToAsync call you will see why (see below)

try
{
    await Shell.Current.GoToAsync(nameof(DetailPage), true, new Dictionary<string, object>()
    {
        { "character", c }
    });
}
catch (Exception ex)
{
    // Breakpoint in here.
}

The exception states that there is an invalid cast happening. It does mention that you need to implement IConvertible however I am not convinced that will help here as it only provides the ability to convert to primitive types.

Please see my second PR that offers what I think you want aside from using your SubCharacter class:

DonThompson/communitytoolkitrepro1#2

[DonThompson]

Thank you so much for your time on this -- I appreciate it. I'm not convinced this behavior is "right", but at this point I'm guessing we're well outside the bounds of the CommunityToolkit and back into MAUI itself?

I think I may have found some relevant code (https://github.com/dotnet/maui/blob/7a0660c9e4e0eaf825aa904fa0301adc979ca85d/src/Controls/src/Core/BindableProperty.cs) that may explain how they're doing type conversion here, and why it requires something that can work with IConvertible. I won't say I agree with that (and it's pretty clearly undocumented), but at least it's an answer. I'll make another comment that can be marked as an answer with the "findings".

[DonThompson]

If anyone in the future is stuck here, the comments above led us to these conclusions:

• [QueryProperty] requires that you are using a somewhat (untested by me here) primitive type OR that your type implements IConvertible. If you're using derived classes and may pass those as parameters through the navigation system, I would just assume the [QueryProperty] is off limits.
• The backup method is to implement IQueryAttributable yourself. It is crucial that when assigning the values, if they are [ObservableProperty], you assign them to the Property (the capitalized one), not the Field (the lowercase one), otherwise change notification doesn't work.

[brminnick]

I recommend using IQueryAttributable.

We use it in the CommunityToolkit.Maui.Markup.Sample app:

https://github.com/CommunityToolkit/Maui.Markup/blob/35258f7d92f3a76012d62d7cc0f59cb305209c1f/samples/CommunityToolkit.Maui.Markup.Sample/ViewModels/NewsDetailViewModel.cs#L34-L42

Task NavigateToNewsDetailPage(StoryModel storyModel) => dispatcher.DispatchAsync(() =>
{
  var route = AppShell.GetRoute<NewsDetailPage, NewsDetailViewModel>();
  
  // Shell passes these parameters to NewsDetailViewModel.ApplyQueryAttributes
  var parameters = new Dictionary<string, object>
  {
    { nameof(NewsDetailViewModel.Uri), storyModel.Url },
    { nameof(NewsDetailViewModel.Title), storyModel.Title },
    { nameof(NewsDetailViewModel.ScoreDescription), storyModel.Description}
  };
  
  return Shell.Current.GoToAsync(route, parameters);
});

partial class NewsDetailViewModel : BaseViewModel, IQueryAttributable
{

  // ...

  void IQueryAttributable.ApplyQueryAttributes(IDictionary<string, object> query)
  {
    var url = (string)query[nameof(Uri)];
    var title = (string)query[nameof(Title)];
    var scoreDescription = (string)query[nameof(ScoreDescription)];
    
    Uri = new Uri(url);
    Title = title;
    ScoreDescription = scoreDescription;
  }
}

[CliffAgius]

Closed as answered