UWP TabView ItemTemplateSelector not working

Question

I have a UWP page with a Pivot control, where ItemTemplateSelector is bounded to a DataTemplateSelector derived class. The code works as expected, and here is the XAML snippet

<Pivot IsHeaderItemsCarouselEnabled="False" 
ItemsSource ="{x:Bind MainPageViewModel.EditViewModels}"  
ItemTemplateSelector="{StaticResource DetailViewTemplateSelector}"  >
<Pivot.HeaderTemplate>
<DataTemplate >
<TextBlock Text="New Item"/>
</DataTemplate>
</Pivot.HeaderTemplate>
</Pivot>

I have a resource dictionary where the data template is defined as:

<DataTemplate x:Key="Tabela_DetailViewModel" >
<detailView:Tabela_View />
</DataTemplate>   

The code works as expected. As I add objects to the itemsource, new pivot items are created and their contents are rendered with the user control Tabela_View.

I changed the Pivot control to TabView from the Microsoft.Toolkit.Uwp.UI.Controls nampespace. After changing the control, when I open a new tab, the type name is rendered instead of the user control view. Here is XAML of the TabView:

<muxc:TabView x:Name="Tabs" Grid.Column="1" Grid.Row="0"   
ItemsSource ="{x:Bind MainPageViewModel.EditViewModels}"          
SelectedItem="{x:Bind MainPageViewModel.SelectedEntityViewModel,Mode=TwoWay}"
ItemTemplateSelector="{StaticResource DetailViewTemplateSelector}"    >
<muxc:TabView.ItemHeaderTemplate>
<DataTemplate >
<TextBlock Text="New Item"/>
</DataTemplate>
</muxc:TabView.ItemHeaderTemplate>
</muxc:TabView>

Here is a link for the project project link that simulates this error. Note that the commented pivot control snippet works as expected

Any help will be greatly appreciated. Regards, Saifi

Answer 1

UWP TabView ItemTemplateSelector not working

I have tested ItemTemplateSelector and it works well in my side, please refer the following code to check if you have missed some key procedures.

Make data model

public class TabItem
{
    public ItemType Type { get; set; }
    public string Header { get; set; }
    public Microsoft.UI.Xaml.Controls.IconSource Icon { get; set; }
}
public enum ItemType { TypeA, TypeB };

Make TabViewItemTemplateSelector class that inherit DataTemplateSelector.

public class TabViewItemTemplateSelector : DataTemplateSelector
{
    public DataTemplate TemplateOne { get; set; }
    public DataTemplate TemplateTwo { get; set; }

    protected override DataTemplate SelectTemplateCore(object item)
    {
        var tabItem = (TabItem)item;
        return tabItem.Type == ItemType.TypeA ? TemplateOne : TemplateTwo;
    }
}

Xaml Code

<Page.Resources>
    <local:TabViewItemTemplateSelector
        x:Key="TabViewItemTemplateselector"
        TemplateOne="{StaticResource Templateone}"
        TemplateTwo="{StaticResource Templatetwo}"
        />
    <DataTemplate x:Key="Templateone" x:DataType="local:TabItem">
        <muxc:TabViewItem Header="{x:Bind Header}" IconSource="{x:Bind Icon}" >
            <detailview:Tabela_View/>
        </muxc:TabViewItem>
    </DataTemplate>
    <DataTemplate x:Key="Templatetwo" x:DataType="local:TabItem" >
        <muxc:TabViewItem Header="{x:Bind Header}" IconSource="{x:Bind Icon}" >
            <detailview:NormalPage/>
        </muxc:TabViewItem>
    </DataTemplate>
</Page.Resources>

Usage

<muxc:TabView
    x:Name="MyTabView"
    Grid.Row="0"
    Grid.Column="1"
    TabItemTemplateSelector="{StaticResource TabViewItemTemplateselector}"
    />


MyTabView.TabItemsSource = new List<TabItem>() {
    new TabItem(){ Header="One", Icon = new Microsoft.UI.Xaml.Controls.SymbolIconSource(){ Symbol= Symbol.DockBottom},Type=ItemType.TypeA },
     new TabItem(){ Header="Two",  Icon = new Microsoft.UI.Xaml.Controls.SymbolIconSource(){ Symbol= Symbol.Document},Type=ItemType.TypeB },
      new TabItem(){ Header="Three",  Icon = new Microsoft.UI.Xaml.Controls.SymbolIconSource(){ Symbol= Symbol.Accept},Type=ItemType.TypeA }
};