TabControl 中的 WPF UI 持久性

Question

我遇到了一些问题，这些问题看起来应该很简单，但事实证明非常困难。

假设您有一个 TabControl 绑定到 ViewModel 的项目源，并且使用 DataTemplate 显示项目。现在假设 DataTemplate 由一个具有两列的网格和一个用于调整列大小的网格拆分器组成。

问题是，如果您在一个选项卡上调整列的大小，然后切换到另一选项卡，则列的大小也会调整。这是因为 TabControl 在所有选项卡之间共享 DataTemplate。这种 UI 持久性的缺乏适用于模板的所有元素，这在调整各种 UI 组件时可能会带来令人沮丧的体验。另一个示例是 DataGrid 中的滚动位置（在选项卡上）。如果具有更多行的 DataGrid 滚动到另一个选项卡的底部，则具有少量项目的 DataGrid 将滚动到视图之外（仅一行可见）。除此之外，如果 TabControl 在多个 DataTemplate 中定义了各种项目，则当您在不同类型的项目之间切换时，视图将重置。我可以理解这种方法可以节省资源，但最终的功能似乎与预期的 UI 行为非常矛盾。

所以我想知道是否有解决方案/解决方法，因为我确信其他人以前也遇到过这种情况。我在其他论坛上注意到了一些类似的问题，但没有真正的解决方案。一篇关于使用 AdornerDecorator 但与 DataTemplate 一起使用时似乎不起作用。我并不热衷于将所有 UI 属性（如列宽、滚动位置）绑定到我的 ViewModel，事实上，我在简单的 GridSplitter 示例中尝试过它，但没能使其工作。 ColumnDefinitions 的宽度不一定受网格分割器的影响。无论如何，如果有一个通用的解决方案就好了。有什么想法吗？

如果我放弃 TabControl 并使用 ItemsControl 我会遇到类似的问题吗？是否可以修改 TabControl 样式，使其不在选项卡之间共享 ContentPresenter？

Answer 1

我断断续续地搞乱这个已经有一段时间了。最后，我没有尝试修复/修改 TabControl，而是简单地重新创建了它的功能。事实上效果非常好。我用列表框（选项卡标题）和 ItemsControl 制作了一个“类似选项卡”的控件。关键是将 ItemsControl 的 ItemsPanelTemplate 设置为 Grid。一些样式和一个数据触发器来管理项目的可见性，瞧。它工作完美，每个“选项卡”都是一个唯一的对象，并保留其所有 UI 状态，如滚动位置、选择、列宽等。这种类型的解决方案可能会出现任何缺点或问题吗？

       <DockPanel>
            <ListBox
                DockPanel.Dock="Top"
                ItemsSource="{Binding Tabs}"
                SelectedItem="{Binding SelectedTab}"
                ItemContainerStyle="{StaticResource ImitateTabControlStyle}">
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel
                            Orientation="Horizontal">
                        </StackPanel>
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>

                <ListBox.ItemTemplate>
                    <DataTemplate>                            
                        <StackPanel 
                            Margin="2,2,2,0"
                            Orientation="Horizontal" >
                            <TextBlock 
                                Margin="4,0" FontWeight="Bold"
                                Padding="2"
                                VerticalAlignment="Center" HorizontalAlignment="Left"
                                Text="{Binding Name}" >
                            </TextBlock>
                            <Button
                                Margin="4,0"
                                Command="{Binding CloseCommand}">
                                <Image Source="/TERM;component/Images/Symbol-Delete.png" MaxHeight="20"/>
                            </Button>
                        </StackPanel>                            
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
            <ItemsControl    
                ItemsSource="{Binding Tabs}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Grid />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <ContentControl                                
                            Content="{Binding}">
                            <ContentControl.Style>
                                <Style>
                                    <Style.Triggers>
                                        <DataTrigger
                                            Binding="{Binding IsSelected}" Value="False">
                                            <Setter Property="ContentControl.Visibility" Value="Hidden" />                                                
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </ContentControl.Style>
                        </ContentControl>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>                
        </DockPanel>