MVVM 将视图绑定到 TabControlItems - 视图不显示

Question

我想在我的 MainView 中以 TabControlItems 显示不同的视图。

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

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

我在 ViewModel 中调用 List：

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() });  
}

EDIT 然后显示在我的视图中：

<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>

问题在于它只显示标题而不显示内容（视图），而是显示 TabItem 类的路径。

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

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

Answer 1

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

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

另一种选择是为TabItem 添加一个DataTemplate，在其中粘贴一个ContentControl，然后将that 绑定到视图模型。下面是一些类似 xaml 的伪代码来说明这个想法：

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

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

第三个​​ 选项是实现自定义DataTemplateSelector 并在您的Tab 控件中使用that。在此选择器中，只需打开 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"/>

然后将其绑定到ContentTemplateSelector

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