TabControl的每个选项卡上的不同视图/用户控件

Question

我正在尝试编写一个使用制表符来保存不同用户控件的程序.我目前想要发生的是用户单击查找按钮,创建新选项卡,并在其中显示查找屏幕.使用查找屏幕,用户可以选择客户端,然后在他们自己的新选项卡中打开,允许用户编辑它们.因此,如果用户进入并选择了三个客户端,则屏幕将有四个选项卡,一个用于查找屏幕,另一个用于客户端选项卡.当用户单击该选项卡中usercontrol上的退出按钮时,还需要关闭选项卡.

我的问题是我不确定如何在我的程序中设置它.我创建了一个TabControl并将ItemsSource绑定到一个viewmodels集合(我可以在用户添加新屏幕时添加).我可以使用DataTemplateSelector来选择包含正确视图的DataTemplate,但我不知道如何将视图资源设置为我的viewmodel.

我在WPF中这样做,我现在正在使用Bxf将我的视图模型放入视图中,这通常有效,但我不确定它是如何适应TabControl的.

我试图坚持使用MVVM,因此我的viewmodel中有一个视图列表.

以前有人做过类似的事吗？

Answer 1

我会让我的主ViewModel看起来像这样:

• ObservableCollection<ViewModelBase> OpenTabs
• ICommand AddTabCommand
• ICommand CloseTabCommand

在构造函数中,SearchViewModel创建并添加了一个new OpenTabs,并且它的Search方法可以连接到某个方法MainViewModel

在该方法MainViewModel处理该搜索命令将创建一个新的CustomerViewModel用指定的客户,设置它的CloseCommand,然后将其添加到OpenTabs

var vm = new CustomerViewModel(customer);
vm.CloseCommand = this.CloseTabCommand;
OpenTabs.Add(vm);

您还可以使用PRISM EventAggregator或Galasoft 等事件系统Messenger传递AddTab/CloseTab事件,而不是连接来自MainViewModel

当然,您将使用DataTemplates定义每个OpenTab对象在视图中的显示方式

<TabControl ItemsSource="{Binding OpenTabs}">
    <TabControl.Resources>
        <DataTemplate DataType="{x:Type local:SearchViewModel}">
            <local:SearchView />
        </DataTemplate>
        <DataTemplate DataType="{x:Type local:CustomerViewModel}">
            <local:CustomerView />
        </DataTemplate>
    </TabControl.Resources>
</TabControl>

Answer 2

我刚刚回答了我自己的问题。

动态创建的选项卡项是使用 tabcontrols itemsource 属性中单个项目的数据上下文进行设置的，在本例中是我的视图模型之一。

我正确使用的数据模板为视图模型类型选择正确的视图并显示它。

但是，我的视图将视图上网格的数据上下文设置为我的资源，因此没有显示任何内容。我已将其更改为使用数据上下文而不是资源，现在一切正常。

所以我的主要问题是我的视图耗尽了资源，而不是数据上下文。我仍然更喜欢使用资源，但随着数据上下文的工作，我将不得不这样做。