【问题标题】:WPF: binding several views to a TabControl's itemsWPF:将多个视图绑定到 TabControl 的项目
【发布时间】:2011-10-05 14:25:25
【问题描述】:

在我们正在进行的当前项目中,我们有一个主窗口,其中包含多个视图(每个视图都有自己的视图模型),这些视图在选项卡控件中显示为项目。例如:一个选项卡项是一个编​​辑器,并包含如下编辑器视图:

<TabItem Header="Test Editor">
            <TestEditor:TestEditorView DataContext="{Binding TestEditorViewModel}"/>
</TabItem>

另一个显示结果:

<TabItem Header="Results Viewer">
     <ResultViewer:ResultViewer x:Name="resultViewer1" DataContext="{Binding Path=ResultViewModel}"  />
</TabItem>


我想让 TabItems 绑定到主窗口的视图模型中的某个东西,但我不知道如何在不破坏 MVVM 模式的情况下将视图的名称绑定到任何属性。我想要类似的东西:

 <TabControl.ContentTemplate>
     <DataTemplate>
         <TestEditor:TestEditorView DataContext ="{Binding TabDataContext}"/>
     </DataTemplate>
 </TabControl.ContentTemplate>

仅使用一些绑定,而不必在设计时知道将使用什么类型作为内容。
有什么想法吗?

【问题讨论】:

    标签: wpf data-binding tabcontrol


    【解决方案1】:

    通常我将 TabControl 的选项卡与SelectedIndex 一起存储在ViewModel 中,然后我使用DataTemplates 来确定要显示哪个View

    查看:

    <Window>
        <Window.Resources>
            <DataTemplate DataType="{x:Type ResultViewModel}">
                <ResultViewer:ResultViewer />
            </DataTemplate>
            <DataTemplate DataType="{x:Type EditorViewModel}">
                <TestEditor:TestEditorView />
            </DataTemplate>
        </Window.Resources>
    
        <TabControl ItemsSource="{Binding TabCollection}"
                    SelectedIndex="{Binding SelectedTabIndex}" />
    
    </Window>
    

    视图模型:

    public class MyViewModel : ViewModelBase
    {
    
        publicMyViewModel()
        {
            TabCollection.Add(new ResultsViewModel());
            TabCollection.Add(new EditorViewModel());
            SelectedTabIndex = 0;
        }
    
        private ObservableCollection<ViewModelBase> _tabCollection
            = new ObservableCollection<ViewModelBase>();
    
        public ObservableCollection<ViewModelBase> TabCollection
        {
            get { return _tabCollection };
        }
    
        private int _selectedTabIndex;
        public int SelectedTabIndex
        {
            get { return _selectedTabIndex; }
            set
            {
                if (value != _selectedTabIndex)
                {
                    _selectedTabIndex = value;
                    RaisePropertyChanged("SelectedTabIndex");
                }
            }
        }
    }
    

    【讨论】:

    • 我也想使用 TabItem 的子类,可以用您的解决方案来完成(除此之外看起来不错)吗?谢谢。
    • 你用子类做什么?是视图相关还是视图模型相关?无论哪种情况,我都相信可以做到
    • 只与原始问题有关,但这个答案帮助我解决了一个问题。在定义数据模板时不要忘记 {x:Type viewmodel...} 非常重要。我没有 x:Type 前缀,这让我抓狂。谢谢!
    • 这将显示空标签页眉。这可以通过将字符串 Header 属性添加到 ViewModelBase 或创建像 ITabItem 这样实现 header 属性的接口来解决。让每个选项卡视图模型实现这一点并将其绑定到视图中的标题。然后制作类型为 的 TabCollection 而不是 。一些重构技巧:删除 _tabCollection。这里不需要。删除 SelectedTabIndex。只需在 xaml 中设置 SelectedIndex=0。仍然赞成,因为它给了我正确的方向。
    猜你喜欢
    • 2018-10-25
    • 1970-01-01
    • 2011-02-09
    • 2014-08-25
    • 2010-11-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-04-21
    相关资源
    最近更新 更多