UWP TabView ItemTemplateSelector无法正常工作

时间:2020-01-23 20:37:55

标签: uwp windows-community-toolkit

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

<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的链接,它模拟了此错误。请注意,带注释的数据透视控制代码段按预期工作

任何帮助将不胜感激。 问候, 赛飞

1 个答案:

答案 0 :(得分:0)

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