DataContext in OnLoad event of view is wrong

[mrThirsty]

I have a View called settings that uses a tab navigation bar across the top that is configured for region navigation, and loads "child" views in for the user. I have an interface that defines some std operations for the models, like LoadData. I want to call these methods in the OnLoaded event of the child view, but I have found that the DataContext of the child view is always the Parent Settings view model.

What is the right way to set this up, because right now my app is calling the LoadData on the wrong ViewModel for every View that needs to do that.

All my views are UserControl based items, I have had a look at the Chefs example app in the repo and they seem to use Page for views and UserControl for components in the views, not sure if this my problem.

The Settings View is also a child of the MainView which hosts the main App Navigation.

In the example code below, when the user clicks on "Components" in the settings view tab navigation, the ComponentSettingsView OnLoaded fires, but its DataContext is SettingsModel not ComponentSettingsModel.

Routing Setup:

views.Register(
            new ViewMap(ViewModel: typeof(ShellModel)),
            new ViewMap<MainPage, MainModel>(),
            new ViewMap<DashboardView,  DashboardModel>(),
            new ViewMap<SettingsView, SettingsModel>(),
            new ViewMap<GeneralSettingsView, GeneralSettingsModel>(),
            new ViewMap<ComponentSettingsView, ComponentSettingsModel>()
        );

        routes.Register(
            new RouteMap("", View: views.FindByViewModel<ShellModel>(),
                Nested:
                [
                    new ("Main", View: views.FindByViewModel<MainModel>(), IsDefault:true, Nested:[
                        new ("Dashboard", View: views.FindByViewModel<DashboardModel>(), IsDefault: true),
                        new ("Settings", View: views.FindByViewModel<SettingsModel>(), Nested:[
                            new RouteMap("GeneralSettings", View: views.FindByViewModel<GeneralSettingsModel>(), IsDefault:true),
                            new RouteMap("ComponentSettings", View: views.FindByViewModel<ComponentSettingsModel>())
                        ])
                    ]),
                ]
            )
        );

Main View:

<Page x:Class="Brewhub.Controller.Presentation.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:Brewhub.Controller.Presentation"
      xmlns:uen="using:Uno.Extensions.Navigation.UI"
      xmlns:utu="using:Uno.Toolkit.UI"
      xmlns:um="using:Uno.Material"
      NavigationCacheMode="Required"
      Background="{ThemeResource BackgroundBrush}">
    <Grid uen:Region.Attached="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Grid Grid.Column="1"
              uen:Region.Attached="True"
              uen:Region.Navigator="Visibility" Padding="3">
        </Grid>

        <utu:TabBar
            Style="{StaticResource VerticalTabBarStyle}"
            uen:Region.Attached="True">
            <utu:TabBar.Items>
                <utu:TabBarItem uen:Region.Name="Dashboard" Content="Dashboard">
                    <utu:TabBarItem.Icon>
                        <PathIcon Data="{StaticResource Icon_Home}"/>
                    </utu:TabBarItem.Icon>
                </utu:TabBarItem>
                <utu:TabBarItem uen:Region.Name="Settings" Content="Settings">
                    <utu:TabBarItem.Icon>
                        <PathIcon Data="{StaticResource Icon_Settings}"/>
                    </utu:TabBarItem.Icon>
                </utu:TabBarItem>
            </utu:TabBar.Items>
        </utu:TabBar>
    </Grid>
</Page>

Settings View

<UserControl
    x:Class="Brewhub.Controller.Views.Settings.SettingsView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Brewhub.Controller.Views.Settings"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:uen="using:Uno.Extensions.Navigation.UI"
    xmlns:utu="using:Uno.Toolkit.UI"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">
    <Grid uen:Region.Attached="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Grid Grid.Row="1"
              uen:Region.Attached="True"
              uen:Region.Navigator="Visibility" Padding="10">
        </Grid>
        <utu:TabBar
            Style="{StaticResource HorizontalTabBarStyle}"
            uen:Region.Attached="True">
            <utu:TabBar.Items>
                <utu:TabBarItem uen:Region.Name="GeneralSettings" Content="General" ToolTipService.ToolTip="General Settings">
                    <utu:TabBarItem.Icon>
                        <PathIcon Data="{StaticResource Icon_Home}"/>
                    </utu:TabBarItem.Icon>
                </utu:TabBarItem>
                <utu:TabBarItem uen:Region.Name="ComponentSettings" Content="Components" ToolTipService.ToolTip="Controller Components">
                    <utu:TabBarItem.Icon>
                        <PathIcon Data="{StaticResource Icon_Settings_Components}"/>
                    </utu:TabBarItem.Icon>
                </utu:TabBarItem>
            </utu:TabBar.Items>
        </utu:TabBar>
    </Grid>
</UserControl>

Settings View Model:

public record SettingsModel
{
    public SettingsModel()
    {
        
    }
}

Component Settings View

<UserControl
    x:Class="Brewhub.Controller.Views.Settings.Areas.ComponentSettingsView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Brewhub.Controller.Views.Settings.Areas"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:utu="using:Uno.Toolkit.UI"
    xmlns:bhc="using:Brewhub.Controller.Controls"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400"
    d:DataContext="{d:DesignInstance Type=local:ComponentSettingsModel}"
    Foreground="{StaticResource GeneralTextBrush}"
    Loaded="ComponentSettingsView_OnLoaded"
    >

    <utu:LoadingView HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <utu:LoadingView.Source>
            <utu:CompositeLoadableSource>
                <utu:LoadableSource Source="{Binding Save}"/>
            </utu:CompositeLoadableSource>
        </utu:LoadingView.Source>

        <utu:LoadingView.LoadingContent>
            <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                <ProgressRing IsActive="True" />
                <TextBlock Text="{Binding Path=BusyMessage, Mode=TwoWay}"/>
            </StackPanel>
        </utu:LoadingView.LoadingContent>

        <TabView VerticalAlignment="Stretch" HorizontalAlignment="Stretch" IsAddTabButtonVisible="False" >
            <TabViewItem Header="Sensors" IsClosable="False">
                <VariableSizedWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="4">
                    <Border Style="{StaticResource SettingsGridBox}">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <TextBlock Text="HLT" Style="{StaticResource SettingsGridBoxTitle}"/>
                                <bhc:SyncIndicator Grid.Column="2" IsSynced="{Binding HLTTempSensor.Synced, Mode=OneWay}"/>
                                <TextBox Grid.Row="1" Grid.ColumnSpan="2" Header="GPIO Pin" Margin="3" PlaceholderText="GPIO" Style="{StaticResource OutlinedTextBoxStyle}"/>
                                <ComboBox Grid.Row="2" Grid.ColumnSpan="2" Header="1-Wire Address" Style="{StaticResource ComboBoxStyle}" ItemsSource="{Binding OneWireDevices}"
                                          SelectedItem="{Binding HLTTempSensor.OneWireAddress, Mode=TwoWay}" DisplayMemberPath="Name" SelectedValuePath="Name"/>
                            </Grid>
                    </Border>
                    <Border Style="{StaticResource SettingsGridBox}">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <TextBlock Text="Mash-tun" Style="{StaticResource SettingsGridBoxTitle}"/>
                                <bhc:SyncIndicator Grid.Column="2" IsSynced="{Binding HLTTempSensor.Synced, Mode=OneWay}"/>
                                <TextBox  Grid.Row="1" Grid.ColumnSpan="2" Header="GPIO Pin" Margin="3" PlaceholderText="GPIO" Style="{StaticResource OutlinedTextBoxStyle}"/>
                            </Grid>
                    </Border>
                    <Border Style="{StaticResource SettingsGridBox}">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <TextBlock Text="Boil" Style="{StaticResource SettingsGridBoxTitle}"/>
                                <bhc:SyncIndicator Grid.Column="2" IsSynced="{Binding HLTTempSensor.Synced, Mode=OneWay}"/>
                                <TextBox  Grid.Row="1" Grid.ColumnSpan="2" Header="GPIO Pin" Margin="3" PlaceholderText="GPIO" Style="{StaticResource OutlinedTextBoxStyle}"/>
                            </Grid>
                    </Border>
                </VariableSizedWrapGrid>
            </TabViewItem>

            <TabViewItem Header="Actors" IsClosable="False">
            </TabViewItem>

            <TabViewItem Header="Kettles" IsClosable="False">
            </TabViewItem>
        </TabView>
    </utu:LoadingView>
</UserControl>

public sealed partial class ComponentSettingsView : UserControl
{
    public ComponentSettingsView() : base()
    {
        this.InitializeComponent();
    }

    private async void ComponentSettingsView_OnLoaded(object sender, RoutedEventArgs e)
    {
        IBrewhubViewModel model = DataContext as IBrewhubViewModel;

        await model.LoadDataAsync();
    }
}

Component Settings View model:

public class ComponentSettingsModel : BaseViewModel
{
    public ComponentSettingsModel(ILogger<ComponentSettingsModel> logger, IComponentManager componentManager)
    {
        _logger = logger;
        _componentManager = componentManager;
    }

    private readonly ILogger<ComponentSettingsModel> _logger;
    private readonly IComponentManager _componentManager;

    private TemperatureSensor _hltTempSensor;
    private TemperatureSensor _mashTempSensor;
    private TemperatureSensor _boilTempSensor;

    private ObservableCollection<string> _oneWireDevices;
    
    
    public ICommand Save => Command.Create(b => b.Execute(SaveSettings));

    public TemperatureSensor HLTTempSensor 
    {
        get => _hltTempSensor;
        set => SetProperty(ref _hltTempSensor, value); 
    }
    
    public TemperatureSensor MashTempSensor 
    {
        get => _mashTempSensor;
        set => SetProperty(ref _mashTempSensor, value); 
    }
    
    public TemperatureSensor BoilTempSensor 
    {
        get => _boilTempSensor;
        set => SetProperty(ref _boilTempSensor, value); 
    }

    public ObservableCollection<string> OneWireDevices
    {
        get
        {
            return _oneWireDevices;
        } 
        set => SetProperty(ref _oneWireDevices, value);
    }
    
    public async ValueTask SaveSettings(CancellationToken ct)
    {
    }

    public override async Task LoadDataAsync()
    {
        try
        {
            OneWireDevices = new ObservableCollection<string>()
            {
                "Device 1","Device 2"
            };
        
            _componentManager.ValidateConfiguration();
            _componentManager.LoadComponents();
        
            HLTTempSensor = _componentManager.HLTTempSensor;
            MashTempSensor = _componentManager.MashtunTempSensor;
            BoilTempSensor = _componentManager.BoilTempSensor;
        }
        catch (Exception e)
        {
            _logger?.LogError(e, "Unable to load data");
        }
    }
}

Base View Model:

public interface IBrewhubViewModel
{
    Task LoadDataAsync();
}

public class BaseViewModel : INotifyPropertyChanged, IBrewhubViewModel
{
    private string _busyMessage;
    
    protected DispatcherQueue Dispatcher => DispatcherQueue.GetForCurrentThread();
    
    public event PropertyChangedEventHandler PropertyChanged;
    
    public string BusyMessage
    {
        get => _busyMessage;
        set => SetProperty(ref _busyMessage, value);
    }
    
    protected virtual bool SetProperty<T>(ref T backingVariable, T value, [CallerMemberName] string propertyName = null)
    {
        if (EqualityComparer<T>.Default.Equals(backingVariable, value)) return false;

        backingVariable = value;
        OnPropertyChange(propertyName);

        return true;
    }
    
    protected void OnPropertyChange([CallerMemberName] string propertyName = null)
    {
        #pragma warning disable CS4014 // Because this call is not awaited, execution of the current method continues before the call is completed
        DispatchAsync(() => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)));
        #pragma warning restore CS4014 // Because this call is not awaited, execution of the current method continues before the call is completed
    }
    
    protected async Task DispatchAsync(DispatcherQueueHandler callback)
    {
        var hasThreadAccess = Dispatcher.HasThreadAccess;

        if (hasThreadAccess)
        {
            callback.Invoke();
        }
        else
        {
            var completion = new TaskCompletionSource();
            Dispatcher.TryEnqueue(() =>
            {
                callback();
                completion.SetResult();
            });
            
            await completion.Task; 
        }
    }

    public virtual Task LoadDataAsync()
    {
        return Task.CompletedTask;
    }
}