How to use both a ControlTemplate and a DataTemplate to specify a TabItem

Question

I need to use both a ControlTemplate and a DataTemplate at the same time - I think.

I have a TabControl who's TabItems are supplied by an ObservableCollection - I can design the ObservableCollection items anyway that I choose.

The TabItems need to use a ControlTemplate because they have a selected, not-selected, and disabled state so they need to have event triggers to switch states - the selected tab has an orange glass button and the non-selected tabs have a blue glass button. Each tab needs to have an icon (image) that is inside the respective glass button and also a tab label which are different for each tab and which are supplied by the ObservableCollection.

If I understand correctly, one can use either a ControlTemplate or a DataTemplate but not both at the same visual tree level.

The only potential solution that I can think of is to define a single ContentPresenter in a TabItem ControlTemplate - the ContentPresenter (with an image and label) would be defined by a DataTemplate which would receive data form the ObservableCollection.

Any pointers, suggestions, and/or corrections in my understanding would be appreciated.

Answer 1

Could you be more specific, what behavior you want to achieve? Generally, you can style tab-header and tab-content individually and both based on the bound data item. As you can easily deduce, the itemtemplate describes the header, whereas the contenttemplate defines its content. The sample below shows how: (include

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:sys="clr-namespace:System;assembly=mscorlib" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

in surrounding page/window)

<Grid>
  <Grid.Resources>
     <x:Array x:Key="data" Type="{x:Type sys:Type}">
        <x:Type TypeName="Visual"/>
        <x:Type TypeName="UIElement"/>
        <x:Type TypeName="FrameworkElement"/>
     </x:Array>
  </Grid.Resources>
  <TabControl ItemsSource="{StaticResource data}">
     <TabControl.ItemTemplate>
        <DataTemplate>
           <TextBlock Text="{Binding Name}">
              <TextBlock.Style>
                 <Style TargetType="{x:Type TextBlock}">
                    <Setter Property="Background" Value="DimGray"/>
                    <Setter Property="Foreground" Value="White"/>
                 </Style>
              </TextBlock.Style>
           </TextBlock>
        </DataTemplate>
     </TabControl.ItemTemplate>
     <TabControl.ContentTemplate>
        <DataTemplate>
           <TextBlock Text="{Binding FullName}">
           <TextBlock.Style>
              <Style TargetType="{x:Type TextBlock}">
                 <Setter Property="Background" Value="LightCoral"/>
                 <Setter Property="Foreground" Value="Navy"/>
              </Style>
              </TextBlock.Style>
           </TextBlock>
        </DataTemplate>
     </TabControl.ContentTemplate>
  </TabControl>
</Grid>

Answer 2

There are two steps to do this.

In tab control, you can use ItemContainerStyle <- that is used even inside listbox and items control where you can specify the "surrounding" UI around your "ContentPresenter" , that can give you state binding facility like enabled, selected etc.

And you can continue using DataTemplate as well. Your data template will be rendered inside Item Container's Style's "ContentPresenter".