Problem updating the interface under MAUI to MVVM

Question

I have 2 classes that build me a tree

 public partial class Noeud : ObservableValidator
{
    [ObservableProperty]
    [Required(ErrorMessage = "Le nom est obligatoire.")]
    [StringLength(maximumLength: 25, MinimumLength = 5, ErrorMessage = "Le nom ne doit avoir une longueur comprise entre 5 et 25 caractères.")]
    String name;

    [ObservableProperty]
    [StringLength(maximumLength:255, ErrorMessage = "La description ne doit pas dépasser 255 caractères.")]
    String? description;

    public Guid IdNoeud { get; }

    [ObservableProperty]
    Noeud? parent;

    public Ressource? Ressource { get; set; }

    //resultat obtenu sur 100 soit le résultat d'une ressource soit la somme des résultats des ressources des fils
    [Range(0, 100, ErrorMessage = "Le résultat ne doit être compris entre 0 et 100.")]
    public int? result { get; set; }
    public ObservableCollection<Noeud> Noeuds { get; } = new ObservableCollection<Noeud>();

    public Noeud(Guid guidnoeud, String name, string description, Noeud? parent = null,  Ressource? ressource=null)
    {
        Name = name;
        Description = description;
        Parent = parent;
        IdNoeud = guidnoeud;
        if (ressource != null)
        {
            Ressource = ressource;
        }
    }
}

and

public partial class Ressource : ObservableValidator
{
    
    public int? type { get; set; }

    [Url(ErrorMessage ="L'entrée doit être une URL valide.")]
    public String? ressource { get; set; }

    //description du coaching
    [StringLength(255, ErrorMessage = "La description de la méthode d'acquisition de la compétence ne doit pas dépasser 255 caractères.")]
    public String? coaching { get; set; }

    //description de la compétence recherchée

    [StringLength(50, ErrorMessage = "La description de la compétence ne doit pas dépasser 50 caractères.")]
    public String? competence { get; set; }
    //Code de la compétences suivant un référentiel propre
    [StringLength(15, ErrorMessage = "Le code de la référence à la compétence ne doit pas dépaser 15 caractères")]
    public  String? codeRefCompetence { get; set; }
    //code de l'objectif dans eda
    [StringLength(15, ErrorMessage = "Le code de l'objectif LMS ne doit pas dépasser 20 caractères.")]
    public  String? codeObjectif { get; set; }

    [Range(0,100, ErrorMessage ="Le score doit être compris entre 0 et 100.")]
    public int? Score { get; set; }
}

I have a page developed in MVVM which displays data based on this viewmodel

    public partial class TreeViewPageViewModel : ObservableObject
    {
        public ObservableCollection<Noeud> Noeuds { get; } = new ObservableCollection<Noeud>();
        ....
        [RelayCommand]
        public async Task AddItem()
        {
        ..
        if (action == "- Une Action")
        {
            Noeud NewNoeud = new Noeud(Guid.NewGuid(), "", "", SelectedItem, null);
            selectedItem.Noeuds.Add(NewNoeud);
    
            await Page.Navigation.PushAsync(new EditTreeAction(ref NewNoeud));
    
        }
        else
        {
            Noeud NewNoeud = new Noeud(Guid.NewGuid(), "", "", SelectedItem, new Ressource());
    
            await Page.Navigation.PushAsync(new EditTreeRessource(ref NewNoeud));
    
            selectedItem.Noeuds.Add(NewNoeud);
        }
...

When I update the Name and Node description my .xaml is updated with the correct values.

<Label Text="{Binding Description}"  LineBreakMode="WordWrap" Margin="0"/>
<Label Text="{Binding Parent.Name}"  LineBreakMode="WordWrap" Margin="0" TextColor="red"/>

When I update the Resource data, it is added to node but it is not displayed in .xaml

   <Label Text="Description de compétence à obtenir :"  LineBreakMode="WordWrap" Margin="0,6,0,0" FontAttributes="Bold" FontSize="Caption"/>
    <Label Text="{Binding Ressource.competence}"  LineBreakMode="WordWrap" Margin="0"/>

On the other hand, if in debug mode I comment out these lines and uncomment them then the values appear.

I tried lots of things: put Resource as observable => this is no longer displayed even in debug set the properties of the resource class as observable => this does not work

Do you have any idea what to do?

Thanks in advance

Answer 1

The Ressource and the Ressource.competence should be both observable.

So change the code in the class Noeud:

public Ressource? Ressource { get; set; }

to

[ObservableProperty]
Ressource? ressource;

And change the code in class Ressource:

[StringLength(50, ErrorMessage = "La description de la compétence ne doit pas dépasser 50 caractères.")]
public String? competence { get; set; }

to

[ObservableProperty]
[StringLength(50, ErrorMessage = "La description de la compétence ne doit pas dépasser 50 caractères.")]
String? competence;

And in the xaml:

<Label Text="{Binding Ressource.Competence}"  LineBreakMode="WordWrap" Margin="0"/>