Winui TabView change tab view model (and layout) depending on tab type

I have a tab view and multiple viewmodels which the tab view can display, each tab can be a type of say ViewModel1 and ViewModel2, they will also have their own layout depending on the type of model it is. The issue I am facing is that I cannot get the view to change and load the correct model, it WPF this was fairly straight forward I could write something like the below for data template and it would render the correct view:

<TabControl.Resources><DataTemplate DataType="{x:Type tab:ViewModel}">

    </DataTemplate>
    
        <DataTemplate DataType="{x:Type tab:ViewModel2}">
    
    </DataTemplate>

</TabControl.Resources>

However, with winui I x:Type is no longer available, and I am struggling to figure out a way of dynamically changing the view and model.

Current I have an interface called ITab, this interface stores the TabName and the TabType (Model1 or 2)

string Name { get; set; } 
TabType TabType { get; }

Any viewmodel which wants to be part of the tab collection, must implement this interface. In the parent viewmodel I then have an observable collection of ITab, this is bind to the Tabs ItemsSource.

In the XAML I have this code here, (some of this will copied from an old WPF project)

<TabView.Resources>
    <DataTemplate x:DataType="model:Model1" x:Key="model1">
        <Grid> <!--VIEW FOR MODEL 1--> </Grid>
    </DataTemplate>
    <DataTemplate x:DataType="model:Model1" x:Key="model2"> <!--VIEW FOR MODEL 2--> </DataTemplate>
</TabView.Resources>

<TabView.TabItemTemplate>
    <DataTemplate x:DataType="itab:ITab">
        <TabViewItem Header="{Binding Name}">
            <TextBlock>Text</TextBlock>
        </TabViewItem>
    </DataTemplate>
</TabView.TabItemTemplate>

This renders the tab and display the tab name, however, this only happens for one viewmodel, how do I specify to use Model2 if the tabtype is Model2 else Model1?

I did try making a custom TabItemTemplateSelector

<TabView.TabItems>
    <DataTemplate x:DataType="itab:ITab">
        <TabViewItem Header="{Binding Name}">
            <templates:TabItemTemplateSelector Model1="{StaticResource model1}" Model2="{StaticResource model2}" />
        </TabViewItem>
    </DataTemplate>
</TabView.TabItems>

public class TabItemTemplateSelector : DataTemplateSelector { private DataTemplate _model1; private DataTemplate _model2;

    public DataTemplate Model1
    {
        get { return _model1; }
        set { _model1 = value; }
    }
    
    public DataTemplate Model2
    {
        get { return _model2; }
        set { _model2 = value; }
    }
    
    protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
    {
        if (item != null)
        {
            var tab = (ITab)item;
    
            switch (tab.TabType)
            {
                case TabType.Model1:
                    return _model1;
                case TabType.Model2:
                    return _model2;
                default:
                    throw new InvalidOperationException("Uknown tab type");
            }
        }
    
        return base.SelectTemplateCore(item, container);
    }
    
    } 

However, when this is rendered it displays the class name e.g. MyApp.Models.TabItemSelector

You can refer to this thread. <templates:TabItemTemplateSelector Model1="{S... should be used as TabView Property TabView.TabItemTemplateSelector, instead of in DataTemplate.

So you need to define DataTemplateSelector resources in the upper level container of TabView, use TabItemTemplateSelector to use the DataTemplateSelector.

<Grid>
    <Grid.Resources>
        <DataTemplate x:DataType="model:Model1" x:Key="model1">
            <Grid>
                <!--VIEW FOR MODEL 1-->
            </Grid>
        </DataTemplate>
        <DataTemplate x:DataType="model:Model1" x:Key="model2">
            <!--VIEW FOR MODEL 2-->
        </DataTemplate>

        <local:TabItemTemplateSelector x:Key="MyDataTemplateSelector" Model1="{StaticResource model1}" Model2="{StaticResource model2}" />
    </Grid.Resources>

    <TabView TabItemsSource="{x:Bind TabList}" TabItemTemplateSelector="{StaticResource MyDataTemplateSelector}">
        
    </TabView>
    
</Grid>