UWP TabView ItemTemplateSelector 不工作

Question

我有一个带有 Pivot 控件的 UWP 页面，其中 ItemTemplateSelector 绑定到 DataTemplateSelector 派生类。代码按预期工作，这里是 XAML sn-p

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

我有一个资源字典，其中数据模板定义为：

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

代码按预期工作。当我将对象添加到 itemsource 时，会创建新的数据透视项目，并使用用户控件 Tabela_View 呈现它们的内容。

我将 Pivot 控件从 Microsoft.Toolkit.Uwp.UI.Controls 命名空间更改为 TabView。更改控件后，当我打开一个新选项卡时，将呈现类型名称而不是用户控件视图。 这是 TabView 的 XAML：

<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>

这是模拟此错误的项目project link 的链接。请注意，注释的枢轴控件 sn-p 按预期工作

任何帮助将不胜感激。 问候， 赛菲

Answer 1

UWP TabView ItemTemplateSelector 不工作

我已经测试过ItemTemplateSelector，在我这边运行良好，请参考以下代码检查是否遗漏了一些关键程序。

制作数据模型

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 };

使TabViewItemTemplateSelector 类继承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 代码

<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>

用法

<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 }
};