How to update views when underlying model changes

[reelthymeos]

Hello,

I have a mainViewModel which instantiates a subViewModel. The subViewModel works with an underlying model. You can set the reference to the model through a public property of the subViewModel.

When the MainViewModel updates that public property of the subViewModel (it sets the model reference to a different model object), that SubViewModel's view doesn't get "triggered" to update all its bound properties. It's only when I click to another tab and then come back to that tab (view) again, that the subViewModel will call all its getters (which now refer to a different model object). How can I make that happen as soon as the public property is set on the subViewModel?

Here is some code to explain:

Main View Model:

public partial class MainViewModel : ReactiveObject
{
        private ModelType currentModel;
        private int selectedIndex; //the index of the selected model, from a List of models
	public ViewModel_A MyViewModel_A  { get; private set; }
	public ViewModel_B MyViewModel_B  { get; private set; }

       public int SelectedIndex  //there is a Listbox in the MainView, the user can select the specific model object here
	{
		get
		{
			return selectedIndex;
		}
		set
		{
			this.RaiseAndSetIfChanged(ref selectedIndex, value);
			currentModel = ModelList[selectedIndex];
			MyViewModel_A.Model = currentModel ; // here is where the public property is set, but it doesn't trigger all the getters to fire and the associated view to be updated
		}
	}

	public MainViewModel()
	{
		MyViewModel_A = new ViewModel_A();
		MyViewModel_B= new ViewModel_B();
	}
}

[StefanKoell]

Usually you set the DataContext to the correct sub view model (assuming they also implement INotifyPropertyChanged for the binding to work. For example:
MyViewModel_A has a Name property and MyViewModel_B has a Size property

Your view get's the MainViewModel as a DataContext.

The control which needs to bind to the Name property of MyViewModel_A should get as DataContext MyViewModel_A. Same for the Size property you need to set the DataContext of the control you want to bind to as MyViewModel_B.

In some situations you can't do that easily or if other properties of the control with the "sub" view model data context needs to be bound to the main view model, you may need to go up using $parent... to do the binding. Alternatively, you monitor changes in the main view model for the sub view model (using reactive or subscribing to NotifyPropertyChanged and update properties this way.

Unfortunately, AFAIK, there's no built-in/automatic way to deal with this more elegantly.

[LaurentInSeattle]

This is looking like the good old master-detail pattern.
Your design is imperfect and that creates difficulties.

See an example here for UWP but this should transfer easily to Avalonia.
https://learn.microsoft.com/en-us/samples/microsoft/windows-universal-samples/xamlmasterdetail/

[reelthymeos]

Hi, thanks for sharing the example. I am trying to make sense of the Microsoft sample. would you be able to distill the main aspects of the design pattern into a few points? I am trying to see how I can tweak my design.

[LaurentInSeattle]

There is another sample here with more code / functionality and details on the design :
https://xamlbrewer.wordpress.com/2022/02/07/building-a-master-detail-page-with-winui-3-and-mvvm/

[reelthymeos]

The following worked for me, if anyone is interested.

I used inversion of control to accomplish the task. Each sub-viewModel is passed an instance of the MainViewModel in its constructor. So in the MainViewModel constructor we have the following

public MainViewModel()
	{
	
		MyViewModelA = new ViewModelA(this);
		MyViewModelB = new ViewModelB(this);
	}

Then, inside each subviewmodel, we subscribe to the 'propertyChanged' event in the MainViewModel (in this case the event is that the Model changed). MainViewModel is a ReactiveObject.

public ViewModelA(MainViewModel mainViewModel)
		{
			// Subscribe to the ActiveModel change from MainViewModel
			mainViewModel.PropertyChanged += (sender, e) =>
			{
				if (e.PropertyName == nameof(MainViewModel.ActiveService))
				{
					model = mainViewModel.currentModel;
				}
			};
		}

Inside of each subviewmodule needs to be a property like this:

public ModelType Model
		{
			get { return model; }
			set
			{
				if (model!= value)
				{
					model= value;
					this.RaisePropertyChanged(nameof(Model));
					Method_to_update_any_bound_prorperties(); 
				}
			}
		}

Thus, when the underlying model is changed to refer to a different object, all the subviewModels that are subscribed to that event will receive notification. Then they can update all their bound properties and their respective Views will show the updates.