How to define a TabItem Header Template in WPF

Question

I'm learning WPF and I read an article about Templating. So I wanted to write some code, but i got stuck. What do I want to do? My Application has A TabControl and I want that all the tabs has the same Layout. A stackpanel and in the stackpanel an Image and a Textblock.

Now i don't know how the content can be set afterwards. Do I need a ContentPresenter?

<ControlTemplate x:Key="TabTemplate">
        <StackPanel Orientation="Horizontal">
            <Image></Image>
            <TextBlock></TextBlock>
        </StackPanel>
    </ControlTemplate>

Answer 1

In your resource dictionary add a Style with your desired template:

 <Style x:Key="CustomTabItemStyle"
           TargetType="{x:Type TabItem}">
        <Setter Property="FocusVisualStyle" Value="{x:Null}" />
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        <Setter Property="VerticalContentAlignment" Value="Stretch" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Grid x:Name="Root"
                          Width="180"
                          Height="45"
                          Margin="0,0,0,0"
                          SnapsToDevicePixels="true">

                        <StackPanel Orientation="Horizontal">
                            <Image Width="90"
                                   Margin="10"
                                   VerticalAlignment="Center"
                              Source="pack://Application:,,,/img/myTabImage.png"
                                   Stretch="Uniform" />
                            <TextBlock x:Name="contentPresenter"
                                      HorizontalAlignment="Center"
                                      VerticalAlignment="Center"
                                      Focusable="False"
                                      FontSize="16"
                                      Foreground="White"
                                      SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                      Text="{TemplateBinding Header}" />
                        </StackPanel>
                    </Grid>                    
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Don't forget to edit your Image. If all tabs has same image then just change a Source link, otherwise, you may need another binding, e.g Content.

And then simply use this style in your TabItems:

  <TabControl Margin="0,5,0,0"
              FocusVisualStyle="{x:Null}">
       <TabItem Header="My First Tab"
                IsSelected="{Binding FirstTabItemSelected}"
                Style="{DynamicResource CustomTabItemStyle}"> 
                    ... 
       </TabItem>
       <TabItem Header="My Second Tab"
                IsSelected="{Binding SecondTabItemSelected}"
                Style="{DynamicResource CustomTabItemStyle}"> 
                    ... 
       </TabItem>
   </TabControl>