C++/WinRT: Hosting TabViewItem content in a dedicated/seperate Frame

[michelgerritse]

I was wondering if there is an (easy) way to host the UI content of a TabViewItem into a dedicated Frame ?

Let me explain the situation:
I have a TabView control as the main UI navigation element in my app. All TabVIewItems are created programmatically; some are built into the app, for example a "Home" and a "Settings" item. Other tabs will eventually come from runtime components. All tabs will have their own specific UI content. I have a dedicated Frame in the app, which purpose is to host the UI content from the TabViewItems. The XAML looks something like this:

<triton:WindowEx
   ...>

    <Grid x:Name="AppRootContainer">
        <Grid.RowDefinitions>
            <RowDefinition x:Name="CaptionRow" Height="Auto"/>
            <RowDefinition x:Name="ContentRow" Height="*"/>
            <RowDefinition x:Name="ControlRow" Height="Auto"/>
        </Grid.RowDefinitions>

        <Grid x:Name="AppCaptionContainer" Grid.Row="0">
            <TabView x:Name="AppTabView"
                     CloseButtonOverlayMode="OnPointerOver"
                     IsAddTabButtonVisible="False"
                     TabWidthMode="Equal"
                     Loaded="OnTabViewLoaded"
                     LayoutUpdated="OnTabViewUpdated"
                     SelectionChanged="OnTabViewSelectionChanged"
                     TabCloseRequested="OnTabViewTabCloseRequested">
                <TabView.TabStripHeader>
                    <!-- Removed for readability -->
                </TabView.TabStripHeader>

                <TabView.TabItems>
                    <!-- TabItems are created in code -->
                </TabView.TabItems>

                <TabView.TabStripFooter>
                    <!-- Removed for readability -->
                </TabView.TabStripFooter>
            </TabView>
        </Grid>

        <Frame x:Name="AppContentContainer" Grid.Row="1"/>

        <Grid x:Name="AppControlContainer" Grid.Row="2" Height="32">
            <!-- Removed for readability -->
        </Grid>
    </Grid>
</triton:WindowEx>

The reason for this design, among some other reasons, is to have a single Frame (without any other UI elements) to display content when in a fullscreen presentation mode. Think about each TabViewItem hosting a video, and when the item is selected the video will be visible in the Frame.

How can I assign UI content to a TabViewItem, without using the Content property? I think a possible candidate is the DataContext property, but I'm not sure how I could use this. The second part of the question would be how to display the content into the dedicated Frame when handling the OnTabViewSelectionChanged event:

void MainWindow::OnTabViewSelectionChanged(IInspectable const& /* Sender */, SelectionChangedEventArgs const& Args)
{
	//TODO
}

It is essential that UI content stays valid during the lifetime of the TabViewItem, and not getting re-created every time we navigate to a TabViewItem.

I'm still new to the Windows App SDK / WinUI3 / WinRT (coming from native Win32), so this "problem" might be obvious to some, but I'm having a hard time figuring it out.

[michelgerritse]

Let me answer my own question:

The DataContext property of a TabViewItem appears to be the way to go. When programmatically creating the tab item(s), I'm assigning the the desired page to the property like this:

TabItem.DataContext(MyApp::Views::MyPage());

All I need to do is handling the SelectionChanged event like this:

void MainWindow::OnTabViewSelectionChanged(IInspectable const& /* Sender */, SelectionChangedEventArgs const& Args)
{
	if (Args.AddedItems().Size() != 0)
	{
		auto SelectedTabItem = AppTabView().SelectedItem().as<TabViewItem>();
		AppContentContainer().Content(SelectedTabItem.DataContext());
	}
}

Just a reminder: you need to set AppContentContainer().Content(nullptr); when you are about to delete / close the currently active tab item.

Now a follow-up question pops to mind: Would it be possible to bind the DataContext property of the active tab to the Content of my dedicated Frame ?