如何将 TabControl 的项目绑定到 wpf 中的可观察集合？

Posted 2023-02-22

【中文标题】如何将 TabControl 的项目绑定到 wpf 中的可观察集合？

【英文标题】：How to bind items of a TabControl to an observable collection in wpf?

【发布时间】：2010-11-18 16:01:50

【问题描述】：

将 TabControl 的项绑定到 ObservableCollection 的最简单示例是什么？

每个选项卡的内容都将具有唯一的数据，并且确实这些数据将具有自己绑定到项目组件的 observableCollections。

目前我有一个用户控件，我想在创建每个选项卡后立即将其设置为每个选项卡的内容。我还需要在创建选项卡时动态设置这个新用户控件的数据上下文。所以，本质上，我希望 tabcontrol 的 observablecollection 包含映射到每个选项卡中数据的模型视图。

最重要的是，我需要在不违反 WPF 中的 MVVM 的情况下完成这一切！有什么帮助吗？

非常感谢！

【参考方案1】：

基本示例：

<Window.Resources>

    <DataTemplate x:Key="templateForTheContent" DataType="x:Type vm:TheViewModelType">
        <v:YourUserControl/>
    </DataTemplate>

    <DataTemplate x:Key="templateForTheHeader" DataType="x:Type vm:TheViewModelType">
        <TextBlock Text="Binding ThePropertyToDisplayInTheHeader"/>
    </DataTemplate>

</Window.Resources>

...

<TabControl ItemsSource="Binding YourCollection"
            ContentTemplate="StaticResource templateForTheContent"
            ItemTemplate="StaticResource templateForTheHeader">
</TabControl>

【讨论】：

您知道，WPF + MVVM 的学习曲线如此陡峭，但是一旦您掌握了窍门，这些解决方案实际上非常优雅和干净。感谢您的帮助:)

我同意 WPF 有一个陡峭的学习曲线，但我不会说 MVVM 模式...实际上当你开始使用它时感觉很自然:)

只要数据模板只包含只读控件，这种方法就可以工作。否则，您必须小心：每次更改选项卡页时，TabControl 都会重新创建视图，即当您从一个选项卡切换到另一个选项卡然后再次切换回来时，您会失去视觉状态。

如果我在绑定集合中有多个 ViewModel 类型，这会起作用吗？

@Onur，是的。在这种情况下，不要在 DataTemplate 上放置x:Key 属性，并为每个项目类型创建不同的 DataTemplate