Как определить шаблон заголовка TabItem в WPF

Question

Я изучаю WPF и читаю статью о шаблонах. Поэтому я хотел написать код, но я застрял. Что я хочу сделать? Мое приложение имеет TabControl, и я хочу, чтобы все вкладки имели одинаковый макет. Панель стека и панель стека изображения и текстового блока.

Теперь я не знаю, как контент может быть установлен впоследствии. Нужен ли мне ContentPresenter?

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

Answer 1

В вашем словаре ресурсов добавьте стиль с желаемым шаблоном:

 <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>

Не забудьте отредактировать свое изображение. Если все вкладки имеют одинаковое изображение, просто измените ссылку на источник, в противном случае вам может понадобиться другая привязка, например, Контент.

А затем просто используйте этот стиль в ваших 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>