如何在 WPF 中定义 TabItem 标题模板

Question

我正在学习 WPF，并阅读了一篇关于模板的文章。所以我想写一些代码，但我卡住了。 我想做什么？我的应用程序有一个 TabControl，我希望所有选项卡都具有相同的布局。一个 stackpanel，在 stackpanel 中有一个 Image 和一个 Textblock。

现在我不知道以后如何设置内容。我需要 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>

不要忘记编辑您的图片。如果所有选项卡都具有相同的图像，则只需更改源链接，否则，您可能需要另一个绑定，例如 Content.

然后在您的 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>