c# - 如何在 WPF 中使用带有动态视图的选项卡控件创建动态选项卡
问题描述
我正在使用的软件是为一家印刷公司服务的。我总共有 5 个不同的视图/VM,我可能会在 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>
解决方案
这就是我找到的解决方案。我的大部分想法都是从这里的这篇文章中得到的。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>
推荐阅读
- java - 程序应在用户确认后循环回数据输入,并在用户确认后终止
- php - 仅在溢出时启用滚动条
- c# - System.ArgumentException:'不支持关键字:'attachdbfilename'。
- javascript - 在 JEST 和 vue-test-utils 中模拟 window.document
- botframework - 如何从 microsoft team sdk 读取标签信息?
- vba - 如果为真,使用 IF 语句推送 Next 语句
- scala - 在带有 Kafka 流的窗口中处理项目
- codeigniter - Codeigniter 表单验证在模式下不起作用
- terraform-provider-gcp - Terraform 将文件夹上传到 Google 存储
- amazon-web-services - 无服务器 AWS - 是否值得使用自定义授权器(作为 lambda)?