TabControl 中的 WPF UI 持久性

Question

我遇到了一些看起来应该很简单但实际上已经证明非常困难的问题。

假设您有一个 TabControl 绑定(bind)到 ViewModel 的 itemsource 和使用 DataTemplate 显示的项目。现在假设 DataTemplate 由一个带有两列的 Grid 和一个用于调整列大小的 Grid 拆分器组成。

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

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

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

Answer 1

很长一段时间以来，我一直在搞乱这个。最后，我没有尝试修复/修改 TabControl，而是简单地重新创建了它的功能。它实际上工作得非常好。我从一个列表框(选项卡标题)和一个 ItemsControl 中制作了一个 Tab'like'Control。关键是将 ItemsControl 的 ItemsPanelTemplate 设置为 Grid。一点样式，和一个 DataTrigger 来管理项目的可见性，瞧。它运行完美，每个“选项卡”都是一个独特的对象，并保留了它的所有 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>