将一组相同类型的 ViewModel 绑定到 MVVM / WPF 中的 TabControl 的最佳方法

Question

我在 MVVM 项目中有一个现有的 ViewModel 和 View。实际上，此视图以特定样式的方式呈现项目集合。我将把这个现有的 ViewModel 称为“CollectionPresenter”。

到目前为止，这在 XAML 中已呈现如下：

<Grid>
    <ns:CollectionPresenter />
</Grid>

现在，我希望在选项卡视图中理想地提供这些“CollectionPresenter”视图模型的动态集合。

我的方法是定义这些“CollectionPresenters”的可观察集合，首先在构建父视图模型时创建它们。上面的 XAML 然后更改为如下所示：

<TabControl ItemsSource="{TemplateBinding CollectionPresenters}">
    <TabControl.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding CollectionPresenterTitle}">
        </DataTemplate>
    <TabControl.ItemTemplate>
    <TabControl.ContentTemplate>
         ... this is where things get confusing
    </TabControl.ContentTemplate>
<TabControl>

您可以在上面看到我的问题是 ContentTemplate。

当我加载它时，我得到一个选项卡控件，它的选项卡数量与我可观察的“CollectionPresenter”对象集合一样多。

但是，选项卡控件的内容始终为空。

这种方法正确吗？还有更好的方法吗？

编辑：添加一些额外的东西以使其更清晰

我尝试了以下方法，但它不起作用。带有选项卡控件的 XAML（绑定到“事物”工作正常）：

<TabControl ItemsSource="{TemplateBinding Things}">
    <TabControl.ItemTemplate>
        <DataTemplate DataType="{x:Type viewModels:Thing}">
                <TextBlock Text="{Binding ThingName}" Width="200" Background="Blue" Foreground="White"/>
        </DataTemplate>
    </TabControl.ItemTemplate>    
    <TabControl.ContentTemplate>
        <DataTemplate DataType="{x:Type viewModels:Thing}">
                <TextBlock Text="{Binding ThingName}" Width="500" Height="500" Background="Blue" Foreground="White"/>
        </DataTemplate>
    </TabControl.ContentTemplate>  
</TabControl>

“事物”可观察集合的定义（位于带有选项卡控件的 XAML 的模板化父对象 (ParentObject) 内）：

public static readonly DependencyProperty ThingsProperty =
DependencyProperty.Register("Things", typeof(ObservableCollection<Thing>), typeof(ParentObject), new PropertyMetadata(null));

public ObservableCollection<Thing> Things
{
    get { return (ObservableCollection<Thing>)GetValue(ThingsProperty); }
    set { SetValue(ThingsProperty, value); }
}   

“事物”视图模型的精简版：

public class Thing : ViewModelBase
{       
    public Thing()
    {
    }

    public void Initialise(ObservableCollection<Thing> things, string thingName)
    {            
        Things = things;
        ThingName = thingName;
    }

    public static readonly DependencyProperty ThingNameProperty =
    DependencyProperty.Register("ThingName", typeof(string), typeof(Thing), new PropertyMetadata(null));

    public string ThingName
    {
        get { return (string)GetValue(ThingNameProperty); }
        set { SetValue(ThingNameProperty, value); }
    }
}

Answer 1

看看我对WPF MVVM navigate views问题的回答，你可以看到：

<DataTemplate DataType="{x:Type ViewModels:MainViewModel}">
    <Views:MainView />
</DataTemplate>
<DataTemplate DataType="{x:Type ViewModels:PersonViewModel}">
    <Views:PersonView />
</DataTemplate>
<DataTemplate DataType="{x:Type ViewModels:CompanyViewModel}">
    <Views:CompanyView />
</DataTemplate>

现在，无论我们在应用程序中使用这些类型之一的实例，这些DataTemplates 都会告诉框架改为显示相关视图。

因此，您的解决方案是不将一个DataTemplate 硬编码到TabControl.ItemTemplate 属性，而是将其留空。如果您使用多个DataTemplates 而不提供x:Key 值，那么当每个数据对象要在TabControl 中呈现时，它们将被隐式应用。

---

更新>>>

使用这些DataTemplates 应该让您的TabControl 看起来像这样：

<TabControl ItemsSource="{TemplateBinding Things}" />

我不知道你为什么在那里使用TemplateBinding，因为你不需要定义任何新模板来让它工作......因此，你应该使用普通的旧Binding .

您需要做的另一件事是为您希望以不同方式显示的集合中的每个项目使用不同的数据类型。您可以从 Thing 类派生自定义类，因此该集合仍然可以是 ObservableCollection<Thing> 类型。