TabControl with MVVM - accessing the ViewModels of Views nested within a TabControl's TabItems

[Benjamin]

Hello. I'm using a RadTabControl with statically declared RadTabItems in the XAML. Within a RadTabItem, I am using a RadTabItem.HeaderTemplate to define the item's header to include an image. Immediately following the HeaderTemplate, I put a reference to another View (a UserControl). I've included the XAML for the RadWindow which contains the TabControl I am referring to below.

Here's my question. I am looking to load data when a new TabItem is selected, instead of loading data in the constructors of my VIewModels (so that I am not loading a ton of data when the app launches). So, for example, I don't want to load the data within Manifests_Home_ViewModel until the user has selected the Manifests TabItem. But, as you can see in my XAML, a reference to my UserControl 

<mainWindow:Manifests_Home_View />

is nested within the first tab item of a TabControl on my MainWindow View.  But the Manifests_Home_View doesn't know anything about the parent View (MainWindow) that is is nested in. Since the TabControl is on the MainWindow, I don't know how to inform this child/nested view that its parent TabItem has been selected.

I'm fairly new to MVVM and am still converting parts of my app properly to MVVM. I found some stuff about hierarchies with Views/ViewModels and MVVM, but that was more about dynamically generated/injected Views. These aren't dynamic as such, as they are defined up front. They are simply split out into multiple views for organization and cleared code.

Thank you for your help.

<telerik:RadWindow x:Class="TheReplacementSystem.Modules._MainWindow.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                   xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" xmlns:navigation="clr-namespace:Telerik.Windows.Controls.Navigation;assembly=Telerik.Windows.Controls.Navigation"
                   navigation:RadWindowInteropHelper.ShowInTaskbar="True" navigation:RadWindowInteropHelper.AllowTransparency="True" navigation:RadWindowInteropHelper.Icon="/ImageResources/HeaderTab/export.png"
                   navigation:RadWindowInteropHelper.Title="The New System" Header="The New System" WindowState="Maximized" Width="1920" Height="1040" HorizontalAlignment="Stretch"
                   xmlns:delivery="clr-namespace:TheReplacementSystem.Views.Delivery"
                   xmlns:mainWindow="clr-namespace:TheReplacementSystem.Modules._MainWindow"
                   Closed="MainWindow_OnClosed">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <!--<RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />-->
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <!--main Tab Control for the entire app-->
        <telerik:RadTabControl x:Name="MainAppTabControl" Grid.Row="0" Grid.Column="0" Margin="5, 5, 5, 5" Loaded="MainAppTabControl_OnLoaded" TabClosed="MainAppTabControl_OnTabClosed" AllowDragReorder="False" AllowDragOverTab="False" SelectedItemRemoveBehaviour="SelectPrevious">
            
            <!--Manifests - home tab-->
            <telerik:RadTabItem x:Name="tabItem_Manifest" Header="Manifests" Loaded="ManifestTab_OnLoaded">
                <telerik:RadTabItem.HeaderTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Image Source="/ImageResources/HeaderTab/manifest.png" Width="30" />
                            <telerik:Label Content="Manifest" FontWeight="Bold" />
                        </StackPanel>
                    </DataTemplate>
                </telerik:RadTabItem.HeaderTemplate>
                <mainWindow:uc_Manifests_Home />
            </telerik:RadTabItem>
            <!--Exports - home tab-->
            <telerik:RadTabItem x:Name="tabItem_Exports" Header="Exports" Loaded="ExportsTab_OnLoaded">
                <telerik:RadTabItem.HeaderTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Image Source="/ImageResources/HeaderTab/export.png" Width="30" />
                            <telerik:Label Content="Export" FontWeight="Bold" />
                        </StackPanel>
                    </DataTemplate>
                </telerik:RadTabItem.HeaderTemplate>
                <mainWindow:uc_Exports_Home />
            </telerik:RadTabItem>
            <!--Declarations - home tab-->
            <telerik:RadTabItem x:Name="tabItem_Declarations" Header="Declarations">
                <telerik:RadTabItem.HeaderTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Image Source="\ImageResources/HeaderTab/declarations.jpg" Width="30" />
                            <telerik:Label Content="Declarations" FontWeight="Bold" />
                        </StackPanel>
                    </DataTemplate>
                </telerik:RadTabItem.HeaderTemplate>
                <mainWindow:uc_Declarations_Home />
            </telerik:RadTabItem>
            <!--Billing - home tab-->
            <telerik:RadTabItem x:Name="tabItem_Billing" Header="Billing">
                <telerik:RadTabItem.HeaderTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Image Source="\ImageResources/HeaderTab/billing.png" Width="30" />
                            <telerik:Label Content="Billing" FontWeight="Bold" />
                        </StackPanel>
                    </DataTemplate>
                </telerik:RadTabItem.HeaderTemplate>
                <mainWindow:uc_Billing_Home />
            </telerik:RadTabItem>
            <!--Delivery - home tab-->
            <telerik:RadTabItem x:Name="tabItem_Delivery" Header="Delivery">
                <telerik:RadTabItem.HeaderTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Image Source="\ImageResources/HeaderTab/delivery.png" Width="30" />
                            <telerik:Label Content="Delivery" FontWeight="Bold" />
                        </StackPanel>
                    </DataTemplate>
                </telerik:RadTabItem.HeaderTemplate>
                <delivery:uc_Delivery />
            </telerik:RadTabItem>
            <!--Logistics dispatch - home tab-->
            <telerik:RadTabItem x:Name="tabItem_LogisticsDispatch" Header="Dispatch">
                <telerik:RadTabItem.HeaderTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Image Source="\ImageResources/HeaderTab/dispatch.jpg" Width="30" />
                            <telerik:Label Content="Dispatch" FontWeight="Bold" />
                        </StackPanel>
                    </DataTemplate>
                </telerik:RadTabItem.HeaderTemplate>
            </telerik:RadTabItem>
            <!--Data Management - home tab-->
            <telerik:RadTabItem x:Name="tabItem_DataManagement" Header="Data Management" Loaded="DataMaintenance_OnLoaded">
                <telerik:RadTabItem.HeaderTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Image Source="/ImageResources/HeaderTab/datamangement.png" Width="30" />
                            <telerik:Label Content="Data Management" FontWeight="Bold" />
                        </StackPanel>
                    </DataTemplate>
                </telerik:RadTabItem.HeaderTemplate>
                <mainWindow:uc_DataManagement_Home />
            </telerik:RadTabItem>
        </telerik:RadTabControl>
    </Grid>
</telerik:RadWindow>

[Dilyan Traykov]

Hello Benjamin,

Thank you for the provided code snippets.

A similar requirement has been discussed in the following thread: Load Tab Item Content on Tab Select Change.

I've gone ahead and demonstrated this in a small sample project based on the code you provided. You can notice that a MessageBox (which you can replace with the loading of your viewmodel) is only shown when the DataManagement tab is selected.

Please have a look and let me know if a similar approach would work in your original application.

Regards,
Dilyan Traykov
Progress Telerik