将TabControl ItemsSource和Headers绑定在一起

Question

我有一个TabControl，它正在显示我想要的方式，使用以下内容：

<TabControl Grid.Row="1" Background="{x:Null}" ItemsSource="{Binding TabPanels}">
    <TabControl.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Content.DataContext.BreadcrumbEnd}" />
        </DataTemplate>
    </TabControl.ItemTemplate>
    <TabControl.ContentTemplate>
        <DataTemplate>
            <ContentControl Content="{Binding Content}" />
        </DataTemplate>
    </TabControl.ContentTemplate>
</TabControl>

这会在每个选项卡上显示正确的标题，以及其中的内容。 items源绑定到ObservableCollection，其中ContentAreaHolder如下：

public ContentAreaHolder(UserControl content)
{
    this.Content = content;
}

private UserControl _Content;
public UserControl Content
{
    get
    {
        return _Content;
    }
    set
    {
        _Content = value;
        OnPropertyChanged("Content");
    }
}

它看起来非常凌乱，完全没必要。但是，我开始使用ObservableCollection并且无法获得相同的效果。我使用了略有改变的xaml：

<TabControl Grid.Row="1" Background="{x:Null}" ItemsSource="{Binding TabPanels}">
    <TabControl.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding DataContext.BreadcrumbEnd}" />
        </DataTemplate>
    </TabControl.ItemTemplate>
    <TabControl.ContentTemplate>
        <DataTemplate>
            <ContentControl Content="{Binding .}" />
        </DataTemplate>
    </TabControl.ContentTemplate>
</TabControl>

并且内容显示正确，但标题仍为空白。

我已经尝试通过DisplayMemberPath设置标题，没有绑定，但只是将其设置为DataContext.BreadcrumbEnd无济于事。

为什么我的标题显示不正确？

Answer 1

您不应将UI元素添加到视图模型的源集合中。 TabPanels应该是ObservableCollection<YourType>而不是ObservableCollection<UserControl>。 YourType是定义BreadcrumbEnd属性的类。你可以这样：

<TabControl ItemsSource="{Binding TabPanels}">
    <TabControl.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding BreadcrumbEnd}" />
        </DataTemplate>
    </TabControl.ItemTemplate>
    <TabControl.ContentTemplate>
        <DataTemplate>
            <local:UserControl />
        </DataTemplate>
    </TabControl.ContentTemplate>
</TabControl>