c# - MVVM 将 View 绑定(bind)到 TabControlItems - View 不显示

Question

我想在 TabControlItems 中显示不同的 View 在我的主视图中。

为此，我创建了一个这样的类:

public sealed class TabItem
{
    public string Header { get; set; }
    public ViewModelBase Content { get; set; }
}

我调用 List在我的 View 模型中:

private ObservableCollection<TabItem> _views;
public ObservableCollection<TabItem> Views
{
    get { return _views; }
    set
    {
        _views = value;
        RaisePropertyChanged(() => Views);
    }
}

public IndexMainViewModel()
{
    Views = new ObservableCollection<TabItem>();
    Views.Add(new TabItem { Header = "Export", Content = new ExportViewModel() });
    Views.Add(new TabItem { Header = "Import", Content = new ImportViewModel() });  
}

编辑 然后在我的 View 中显示:

<window xmlns:views="clr-namespace:EDICOT_Module_Import_Export_Articles.View"
xmlns:vm="clr-namespace:EDICOT_Module_Import_Export_Articles.ViewModel"
xmlns:model="clr-namespace:EDICOT_Module_Import_Export_Articles.Model.Classes"
DataContext="{Binding IndexMainVM, Source={StaticResource Locator}}">

   <TabControl ItemsSource="{Binding Views}">
    <TabControl.Resources>
        <DataTemplate DataType="{x:Type model:TabItem}">
            <DataTemplate.Resources>
                <DataTemplate DataType="{x:Type vm:ImportViewModel}">
                    <views:ImportView />
                </DataTemplate>
                <DataTemplate DataType="{x:Type vm:ExportViewModel}">
                    <views:ExportView />
                </DataTemplate>
            </DataTemplate.Resources>
            <ContentControl Content="{Binding Content}"/>
        </DataTemplate>
    </TabControl.Resources>

    <TabControl.ItemTemplate >
        <DataTemplate >
            <TextBlock Text="{Binding Header}"/>
        </DataTemplate>
    </TabControl.ItemTemplate>
</TabControl>

问题是它只显示标题而不显示内容( View )，而是显示 TabItem 类的路径。

提供更多信息:我已经截断了代码以仅保留主题需要的内容，并且我使用了 MVVM Light。

我真的不明白我在这里想念什么!谢谢你的帮助。

Answer 1

问题是每个选项卡都绑定(bind)到 TabItem 的实例。 .您有 vm:ExportViewModel 的数据模板和 vm:ImportViewModel .你现在看到你的错误了吗？

有很多解决方案。最简单的是将 Header 文本移动到基本 View 模型中，并将 Tab 控件绑定(bind)到 ViewModel 集合。

另一种选择是为 TabItem 添加一个 DataTemplate ，在其中粘贴一个 ContentControl，并将其绑定(bind)到 View 模型。下面是一些类似 xaml 的伪代码来说明这个想法:

<DataTemplate DataType="{x:Type vm:TabItem}">
    <ContentControl Content={Binding Content}" />
</DataTemplate>

您可能必须将 View 模型的模板移动到 ContentControl 的资源中，但我认为这没有必要。您可能需要调整 TabItem 数据模板，以便它也填充选项卡窗口。

一个 第三选项是实现自定义 DataTemplateSelector并在您的选项卡控件中使用它。在此选择器中，只需打开 TabItem 并查看类型的 Content 属性。您可以浏览默认 DataTemplateSelector 的源代码以了解如何获取给定类型的正确模板。这种方法让您深入了解 WPF 的血腥，这是一次有趣的旅行。我做过一次，我不想再做一次。实际上，根据您的需要，这次旅行不会像我的那么糟糕。默认选择器不会蹲下，所以返回 base.SelectTemplate一文不值。我在框架中挖掘了一个应该如何实现的示例。

public class TabItemDataTemplateSelector : DataTemplateSelector
{
    public override DataTemplate
        SelectTemplate(object item, DependencyObject container)
    {
        var viewModel = item as TabItem;
        if (item == null)
            return null;
        else
            item = viewModel.Content;

        FrameworkElement fe = null;
        if (container is ContentPresenter)
            fe = (container as ContentPresenter)
                    .TemplatedParent as FrameworkElement;
        else
            fe = container as FrameworkElement;

        var key = new DataTemplateKey(item.GetType());
        return fe.TryFindResource(key) as DataTemplate;
    }
}

将其实例添加到某处的资源中

<derp:TabItemDataTemplateSelector x:Key="tidts"/>

然后将其绑定(bind)到 ContentTemplateSelector

<TabControl ItemsSource="{Binding Views}"
            ContentTemplateSelector={StaticResource tidts}>