如何在 TabControl 的选项卡项中保留控件状态 [英] How to preserve control state within tab items in a TabControl

问题描述

我是 WPF 的新手，正在尝试按照 Josh Smith 描述 模型-视图-视图模型设计模式.

I am a newcomer to WPF, attempting to build a project that follows the recommendations of Josh Smith's excellent article describing The Model-View-ViewModel Design Pattern.

使用 Josh 的示例代码作为基础，我创建了一个简单的应用程序，其中包含许多工作区"，每个工作区由 TabControl 中的一个选项卡表示.在我的应用程序中，工作区是一个文档编辑器，允许通过 TreeView 控件操作分层文档.

Using Josh's sample code as a base, I have created a simple application that contains a number of "workspaces", each represented by a tab in a TabControl. In my application, a workspace is a document editor that allows a hierarchical document to be manipulated via a TreeView control.

尽管我已成功打开多个工作区并在绑定的 TreeView 控件中查看其文档内容，但我发现 TreeView 在选项卡之间切换时忘记"了其状态.例如，如果Tab1中的TreeView部分展开，则切换到Tab2并返回Tab1后会显示为完全折叠.此行为似乎适用于所有控件的控件状态的所有方面.

Although I have succeeded in opening multiple workspaces and viewing their document content in the bound TreeView control, I find that the TreeView "forgets" its state when switching between tabs. For example, if the TreeView in Tab1 is partially expanded, it will be shown as fully collapsed after switching to Tab2 and returning to Tab1. This behaviour appears to apply to all aspects of control state for all controls.

经过一些实验，我意识到我可以通过将每个控件状态属性显式绑定到底层 ViewModel 上的专用属性来保留 TabItem 中的状态.然而，这似乎需要做很多额外的工作，因为我只是想让我的所有控件在工作区之间切换时记住它们的状态.

After some experimentation, I have realized that I can preserve state within a TabItem by explicitly binding each control state property to a dedicated property on the underlying ViewModel. However, this seems like a lot of additional work, when I simply want all my controls to remember their state when switching between workspaces.

我想我遗漏了一些简单的东西，但我不知道去哪里寻找答案.任何指导将不胜感激.

I assume I am missing something simple, but I am not sure where to look for the answer. Any guidance would be much appreciated.

谢谢，提姆

更新:

根据要求，我将尝试发布一些演示此问题的代码.但是，由于作为 TreeView 基础的数据很复杂，我将发布一个展示相同症状的简化示例.这是主窗口中的 XAML:

As requested, I will attempt to post some code that demonstrates this problem. However, since the data that underlies the TreeView is complex, I will post a simplified example that exhibits the same symtoms. Here is the XAML from the main window:

<TabControl IsSynchronizedWithCurrentItem="True" ItemsSource="{Binding Path=Docs}">
    <TabControl.ItemTemplate>
        <DataTemplate>
            <ContentPresenter Content="{Binding Path=Name}" />
        </DataTemplate>
    </TabControl.ItemTemplate>

    <TabControl.ContentTemplate>
        <DataTemplate>
            <view:DocumentView />
        </DataTemplate>
    </TabControl.ContentTemplate>
</TabControl>

上述 XAML 正确绑定到 DocumentViewModel 的 ObservableCollection，其中每个成员都通过 DocumentView 呈现.

The above XAML correctly binds to an ObservableCollection of DocumentViewModel, whereby each member is presented via a DocumentView.

为了简单起见，我从 DocumentView 中删除了 TreeView(上面提到的)，并用包含 3 个固定选项卡的 TabControl 替换它:

For the simplicity of this example, I have removed the TreeView (mentioned above) from the DocumentView and replaced it with a TabControl containing 3 fixed tabs:

<TabControl>
    <TabItem Header="A" />
    <TabItem Header="B" />
    <TabItem Header="C" />
</TabControl>

在这种情况下，DocumentView 和 DocumentViewModel 之间没有绑定.代码运行时，内层TabControl在外层TabControl切换时无法记住自己的选择.

In this scenario, there is no binding between the DocumentView and the DocumentViewModel. When the code is run, the inner TabControl is unable to remember its selection when the outer TabControl is switched.

但是，如果我明确绑定内部 TabControl 的 SelectedIndex 属性...

However, if I explicitly bind the inner TabControl's SelectedIndex property ...

<TabControl SelectedIndex="{Binding Path=SelectedDocumentIndex}">
    <TabItem Header="A" />
    <TabItem Header="B" />
    <TabItem Header="C" />
</TabControl>

... 到 DocumentViewModel 上相应的虚拟属性...

... to a corresponding dummy property on the DocumentViewModel ...

public int SelecteDocumentIndex { get; set; }

...内部标签能够记住它的选择.

... the inner tab is able to remember its selection.

我知道通过将这种技术应用于每个控件的每个视觉属性，我可以有效地解决我的问题，但我希望有一个更优雅的解决方案.

I understand that I can effectively solve my problem by applying this technique to every visual property of every control, but I am hoping there is a more elegant solution.

推荐答案

WPF 应用程序的 Writer 示例应用程序框架 (WAF) 展示了如何解决您的问题.它为每个 TabItem 创建一个新的 UserControl.因此，当用户更改活动 Tab 时，状态会保留.

The Writer sample application of the WPF Application Framework (WAF) shows how to solve your issue. It creates a new UserControl for every TabItem. So the state is preserved when the user changes the active Tab.

这篇关于如何在 TabControl 的选项卡项中保留控件状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！