WPF: How to apply a controlTemplate to a TabControl's tabItem Header while using Databinding?

controltemplate, data-binding, tabitem, wpf, xaml

Solution

You can try using `Style` to set `Template` of `TabItem` generated from binding :

<TabControl ItemsSource="{Binding CarCollection}">
    <TabControl.Resources>
        <Style TargetType="TabItem">
            <Setter Property="Template" Value="{DynamicResource TabItemControlTemplate1}"/>
        </Style>
    </TabControl.Resources>
    <TabControl.ItemTemplate>
        <!-- this is the header template-->
        <DataTemplate>
            <TextBlock Text="{Binding DisplayName}" />
        </DataTemplate>
    </TabControl.ItemTemplate>
    <TabControl.ContentTemplate>
        <!-- this is the body of the TabItem template-->
        <DataTemplate>
            <ContentControl Content="{Binding Value}" />
        </DataTemplate>
    </TabControl.ContentTemplate>
</TabControl>

Problem

I have a TabControl which is acquiring tabs and content through DataBinding. Instead of normal Tabs, I wanted Tabs to be of custom shape (say, Ellipse) for all tabs, So I have a ControlTemplate which i want to apply for all tabs.Being new to WPF,I am just confused on how to apply a controlTemplate to a TabControl's tabItem header while using Databinding? ``` <Window.Resources> <ControlTemplate x:Key="TabItemControlTemplate1" TargetType="{x:Type TabItem}"> <Grid SnapsToDevicePixels="True"> <Border CornerRadius="12" x:Name="Bd" BorderBrush="Red" BorderThickness="1" Padding="{TemplateBinding Padding}"> <ContentPresenter x:Name="Content" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" ContentStringFormat="{TemplateBinding HeaderStringFormat}" ContentSource="Header" HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}"/> </Border> </Grid> </ControlTemplate> </Window.Resources> <Grid x:Name="LayoutRoot"> <TabControl ItemsSource="{Binding CarCollection}"> <TabControl.ItemTemplate> <!-- this is the header template--> <DataTemplate> <TextBlock Text="{Binding DisplayName}" /> </DataTemplate> </TabControl.ItemTemplate> <TabControl.ContentTemplate> <!-- this is the body of the TabItem template--> <DataTemplate> <ContentControl Content="{Binding Value}" /> </DataTemplate> </TabControl.ContentTemplate> </TabControl> </Grid> ``` In those cases where databinding is not used, I know how to apply it. Issue is when Databinding is used, I am able to achieve this through the below code. ``` <TabControl HorizontalAlignment="Left" Height="224" Margin="72,66,0,0" VerticalAlignment="Top" Width="412"> <TabItem Header="TabItem" Template="{DynamicResource TabItemControlTemplate1}" Height="19.96" VerticalAlignment="Top"> <Grid Background="#FFE5E5E5"/> </TabItem> <TabItem Header="TabItem"> <Grid Background="#FFE5E5E5"/> </TabItem> </TabControl> ``` Any help on this?

Original source