如何在 WPF 中使用带有动态视图的选项卡控件创建动态选项卡答案

【问题标题】：How to create dynamic Tabs with Tab Control with Dynamic Views in WPF如何在 WPF 中使用带有动态视图的选项卡控件创建动态选项卡
【发布时间】：2019-01-23 14:50:58
【问题描述】：

我正在使用的软件是为一家印刷公司服务的。我总共有 5 个不同的视图/虚拟机，我可能会在 TabControl 内的单个 TabItem 中显示它们。我正在创建的 TabControlViewModel 上创建它们的列表。例如列表 - FormsViewModel、PlasticsViewModel、LabelsViewModel；此列表应生成 3 个包含其各自视图的动态选项卡。最重要的是，我希望能够实际开发它，以便我从这个列表中获得不同的视图作为第一个选项卡，然后最后一个选项卡也将具有与列表不同的视图。基本上 2 个选项卡将围绕动态选项卡列表。这是到目前为止我一直在搞乱的代码。

 <UserControl.Resources>
    <ResourceDictionary>
        <DataTemplate DataType="{x:Type jobDetails:JobProductionAddOnViewModel}">
            <jobDetails:JobProductionAddOnView />
        </DataTemplate>
        <DataTemplate DataType="{x:Type forms:FormsDetailViewModel}">
            <forms:FormsDetailView />
        </DataTemplate>
        <DataTemplate DataType="{x:Type labels:LabelsDetailViewModel}">
            <labels:LabelsDetailView />
        </DataTemplate>
        <DataTemplate DataType="{x:Type plastics:PlasticsDetailViewModel}">
            <plastics:PlasticsDetailView />
        </DataTemplate>
        <DataTemplate DataType="{x:Type specialtyCoatings:SpecialtyCoatingsDetailViewModel}">
            <specialtyCoatings:SpecialtyCoatingsDetailView />
        </DataTemplate>
        <DataTemplate DataType="{x:Type digitalLabels:DigitalLabelDetailViewModel}">
            <digitalLabels:DigitalLabelDetailView />
        </DataTemplate>
    </ResourceDictionary>
</UserControl.Resources>
<Grid>
    <TabControl ItemsSource="{Binding AdditionalDetailsViewModelList}"
                controls:TabControlHelper.IsUnderlined="True" 
                controls:TabControlHelper.Transition="Left"
                TabStripPlacement="Left"
                SelectedIndex="{Binding SelectedIndex}"
                ItemContainerStyle="{StaticResource ProductionTabItem}">
        <TabItem>
            <TabItem.Header>
                <Label Content="Primary"
                       Width="100"
                       HorizontalContentAlignment="Center"/>
            </TabItem.Header>
            <AdornerDecorator>
                <ContentControl Content="{Binding PrimaryDetailsViewModel}" />
            </AdornerDecorator>
        </TabItem>
        <!--I have tried adding an ItemsControl here, didn't work-->
        <!--I have also tried adding ItemsSource and binding it to the dynamic list-->
        <!--But can't figure out how to change the view based on the type of viewmodel like-->
        <!--you would with an itemscontrol-->
        <TabItem>
            <TabItem.Header>
                <Label Content="+"
                       Width="100"
                       HorizontalContentAlignment="Center"/>
            </TabItem.Header>
            <AdornerDecorator>
                <ContentControl Content="{Binding JobProductionAddOnViewModel}" />
            </AdornerDecorator>
        </TabItem>
    </TabControl>
</Grid>

【问题讨论】：

你设置TabControl.ItemsSource和TabControl.ItemTemplate
我实际上可能在这里找到了答案。 stackoverflow.com/questions/5650812/…
是的，我就是这个意思:)

标签： c# wpf mvvm tabcontrol

【解决方案1】：

这就是我的解决方案。我的大部分想法都来自这篇帖子here。 ViewModel 属性是我的 ViewModel 继承的名为 IBaseViewModel 的接口。

 <UserControl.Resources>
    <ResourceDictionary>
        <DataTemplate DataType="{x:Type jobDetails:JobProductionAddOnViewModel}">
            <jobDetails:JobProductionAddOnView />
        </DataTemplate>
        <DataTemplate DataType="{x:Type forms:FormsDetailViewModel}">
            <forms:FormsDetailView />
        </DataTemplate>
        <DataTemplate DataType="{x:Type labels:LabelsDetailViewModel}">
            <labels:LabelsDetailView />
        </DataTemplate>
        <DataTemplate DataType="{x:Type plastics:PlasticsDetailViewModel}">
            <plastics:PlasticsDetailView />
        </DataTemplate>
        <DataTemplate DataType="{x:Type specialtyCoatings:SpecialtyCoatingsDetailViewModel}">
            <specialtyCoatings:SpecialtyCoatingsDetailView />
        </DataTemplate>
        <DataTemplate DataType="{x:Type digitalLabels:DigitalLabelDetailViewModel}">
            <digitalLabels:DigitalLabelDetailView />
        </DataTemplate>
    </ResourceDictionary>
</UserControl.Resources>
<Grid>
    <TabControl ItemsSource="{Binding TabItems}"
                controls:TabControlHelper.IsUnderlined="True" 
                controls:TabControlHelper.Transition="Left"
                TabStripPlacement="Left"
                SelectedIndex="{Binding SelectedIndex}"
                ItemContainerStyle="{StaticResource ProductionTabItem}">
        <TabControl.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Header}"
                           Width="150"/>
            </DataTemplate>
        </TabControl.ItemTemplate>
        <TabControl.ContentTemplate>
            <DataTemplate>
                <ContentControl Content="{Binding ViewModel}" />
            </DataTemplate>
        </TabControl.ContentTemplate>
    </TabControl>
</Grid>

【讨论】：