WPF: TabControl & DataTemplates

Question

I just want to understand the following scenario. Where I am implementing a <TabControl> bound to a ObservableCollection<TabViewModel>

No Data Templates

When I don't have any DataTemplates, the text WpfApplication1.TabViewModel appears in the Tab Header and Content. Ok I understand this part.

Just ItemTemplate

When I just have

<TabControl.ItemTemplate>
    <DataTemplate>
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="{Binding TabTitle}" />
        </StackPanel>
    </DataTemplate>
</TabControl.ItemTemplate>

Then my tab header is filled. The tab content is still WpfApplication1.TabViewModel.

Just DataTemplate

When I just have the below in my <Window.Resources>

<DataTemplate DataType="{x:Type local:TabViewModel}">
    <TextBox Text="{Binding Text}" />
</DataTemplate>

That templates fills up the tab header.

Both

When I have both, the ItemTemplate fills up the Tab Header while the DataTemplate fills up the tab content. Why all this difference. ItemTemplate & DataTemplate fills up the tab header if the other is not present. If both are present, ItemTemplate fills up the header while DataTemplate fills the content.

Though I have things working, I am quite confused. Shouldn't something like <TabControl.HeaderTemplate> be what fills the header and <TabControl.ItemTemplate> fill up the content?

Answer 1

First of all, there are two templates involved here:

• TabControl.ItemTemplate, used to render the TabItem headers
• TabControl.ContentTemplate, used to render the TabItem contents

If you don't set these properties explicitly then WPF will attempt to resolve them elsewhere. It will walk up the logical tree looking for a resource telling it how to render your view model. If it finds a DataTemplate that has a matching DataType but no key, it will use it to render the view model. If it doesn't find one, it'll default to rendering the ToString value of the object.

So, if you want to be explicit, you want something like this:

<TabControl ItemsSource="{Binding Tabs}">
    <TabControl.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding TabTitle}"/>
        </DataTemplate>
    </TabControl.ItemTemplate>
    <TabControl.ContentTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Text}"/>
        </DataTemplate>
    </TabControl.ContentTemplate>
</TabControl>

Since you're not being specific, WPF is attempting to walk up your logical tree to find an appropriate DataTemplate. When it finds it, it uses it to render the view model. Where it doesn't find it, it calls ToString and renders that.

So to address your specific cases:

Just ItemTemplate

You've explicitly stated how to render tab headers but not tab contents. So the former is rendered using the provided DataTemplate, but the latter will default to ToString.

Just DataTemplate

You've not explicitly stated how to render either tab headers or tab contents. Therefore, WPF searches for an appropriate DataTemplate for both. Since both contain an instance of your view model (that's their DataContext) then the same DataTemplate will be used to render tab headers and their contents.

NOTE: you didn't explicitly state that this is what's happening in your question. Correct me if I'm wrong.

Both

In this case, you've explicitly stated how to render tab headers but not tab contents. Therefore, the explicit DataTemplate is used for tab headers and the implicit DataTemplate is used for tab contents.