WPF TabItem 标题样式

Posted 2023-02-22

【中文标题】WPF TabItem 标题样式

【英文标题】：WPF TabItem Header Styling

【发布时间】：2010-12-03 03:45:05

【问题描述】：

我正在尝试设置 TabControl 的样式，并且已经完成了 75%，但我在设置实际 TabItems 的样式时遇到了困难：

我想要实现的是删除默认的 ContentPresenter 以便我可以使选项卡项目部分透明并带有圆边，而不是我现在拥有的红色和绿色占位符。

我确信这可能并不难，但我就是想不通，所以任何帮助都将不胜感激！

到目前为止，这是 TabControl 的 XAML：

<TabControl TabStripPlacement="Left" HorizontalAlignment="Stretch" BorderBrush="#41020202">
  <TabControl.BitmapEffect>
    <DropShadowBitmapEffect Color="Black" Direction="270"/>
  </TabControl.BitmapEffect>  
  <TabControl.Resources>    
    <Style TargetType="x:Type TabItem">
      <Setter Property="BorderThickness" Value="0"/>      
      <Setter Property="Padding" Value="0" />      
      <Setter Property="HeaderTemplate">        
        <Setter.Value>          
          <DataTemplate>        
            <Border x:Name="grid" Background="Red">
              <ContentPresenter>
                <ContentPresenter.Content>
                  <TextBlock Margin="4" FontSize="15" Text="TemplateBinding Content"/>
                </ContentPresenter.Content>             
                <ContentPresenter.LayoutTransform>                
                  <RotateTransform Angle="270" />              
                </ContentPresenter.LayoutTransform>            
              </ContentPresenter>  
            </Border>        
            <DataTemplate.Triggers>
              <DataTrigger Binding="Binding RelativeSource=RelativeSource Mode=FindAncestor,AncestorType=x:Type TabItem,Path=IsSelected" Value="True">
                <Setter TargetName="grid" Property="Background" Value="Green"/>
              </DataTrigger>
            </DataTemplate.Triggers>
          </DataTemplate>        
        </Setter.Value>      
      </Setter>    
    </Style>  
  </TabControl.Resources>
  <TabControl.Background>
    <RadialGradientBrush Center="-0.047,0.553" GradientOrigin="-0.047,0.553" RadiusY="1.231" RadiusX="0.8">
      <GradientStop Offset="1" Color="#06FFFFFF"/>
      <GradientStop Color="#14FFFFFF"/>
    </RadialGradientBrush>
  </TabControl.Background>  
  <TabItem Header="Tab Item 1" />  
  <TabItem Header="Tab Item 2" />  
  <TabItem Header="Tab Item 3" />  
  <TabItem Header="Tab Item 4" />
</TabControl>

【问题讨论】：

内容展示者是在标签中显示文本的东西。您的意思是要移除灰色背景？

是的！如果我删除网格背景，我会得到默认的灰色选项卡样式，我想用更好的部分透明和圆角边框替换它

【参考方案1】：

试试这种风格，它会修改模板本身。在那里你可以改变你需要透明的一切：

<Style TargetType="x:Type TabItem">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="x:Type TabItem">
        <Grid>
          <Border Name="Border" Margin="0,0,0,0" Background="Transparent"
                  BorderBrush="Black" BorderThickness="1,1,1,1" CornerRadius="5">
            <ContentPresenter x:Name="ContentSite" VerticalAlignment="Center"
                              HorizontalAlignment="Center"
                              ContentSource="Header" Margin="12,2,12,2"
                              RecognizesAccessKey="True">
              <ContentPresenter.LayoutTransform>
            <RotateTransform Angle="270" />
          </ContentPresenter.LayoutTransform>
        </ContentPresenter>
          </Border>
        </Grid>
        <ControlTemplate.Triggers>
          <Trigger Property="IsSelected" Value="True">
            <Setter Property="Panel.ZIndex" Value="100" />
            <Setter TargetName="Border" Property="Background" Value="Red" />
            <Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" />
          </Trigger>
          <Trigger Property="IsEnabled" Value="False">
            <Setter TargetName="Border" Property="Background" Value="DarkRed" />
            <Setter TargetName="Border" Property="BorderBrush" Value="Black" />
            <Setter Property="Foreground" Value="DarkGray" />
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

【讨论】：

谢谢，有帮助！快速提问，我将如何更改字体属性（主要是大小和颜色）？再次感谢

NM - 我更改了 Content Presenter 标签中的 TextBlock.Font... 属性，一切正常！

你没有边框属性是什么意思？边框有一个可以修改的“CornerRadius”属性。

我不得不从您的帖子中删除图片，因为 ImageShack 已将其删除并替换为广告。请参阅meta.stackexchange.com/q/263771/215468 了解更多信息。如果可能，您最好重新上传它们。谢谢！

【参考方案2】：

在寻找一种舍入制表符的方法时，我找到了 Carlo 的答案，它确实有所帮助，但我需要更多。这是我根据他的工作整理的。这是使用 MS Visual Studio 2015 完成的。

代码：

<Window x:Class="MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:MealNinja"
        mc:Ignorable="d"
        Title="Rounded Tabs Example" Height="550" Width="700" WindowStartupLocation="CenterScreen" FontFamily="DokChampa" FontSize="13.333" ResizeMode="CanMinimize" BorderThickness="0">
    <Window.Effect>
        <DropShadowEffect Opacity="0.5"/>
    </Window.Effect>
    <Grid Background="#FF423C3C">
        <TabControl x:Name="tabControl" TabStripPlacement="Left" Margin="6,10,10,10" BorderThickness="3">
            <TabControl.Resources>
                <Style TargetType="x:Type TabItem">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="x:Type TabItem">
                                <Grid>
                                    <Border Name="Border" Background="#FF6E6C67" Margin="2,2,-8,0" BorderBrush="Black" BorderThickness="1,1,1,1" CornerRadius="10">
                                        <ContentPresenter x:Name="ContentSite" ContentSource="Header" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="2,2,12,2" RecognizesAccessKey="True"/>
                                    </Border>
                                    <Rectangle Height="100" Width="10" Margin="0,0,-10,0" Stroke="Black" VerticalAlignment="Bottom" HorizontalAlignment="Right" StrokeThickness="0" Fill="#FFD4D0C8"/>
                                </Grid>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsSelected" Value="True">
                                        <Setter Property="FontWeight" Value="Bold" />
                                        <Setter TargetName="ContentSite" Property="Width" Value="30" />
                                        <Setter TargetName="Border" Property="Background" Value="#FFD4D0C8" />
                                    </Trigger>
                                    <Trigger Property="IsEnabled" Value="False">
                                        <Setter TargetName="Border" Property="Background" Value="#FF6E6C67" />
                                    </Trigger>
                                    <Trigger Property="IsMouseOver" Value="true">
                                        <Setter Property="FontWeight" Value="Bold" />
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="HeaderTemplate">
                        <Setter.Value>
                            <DataTemplate>
                                <ContentPresenter Content="TemplateBinding Content">
                                    <ContentPresenter.LayoutTransform>
                                        <RotateTransform Angle="270" />
                                    </ContentPresenter.LayoutTransform>
                                </ContentPresenter>
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="Background" Value="#FF6E6C67" />
                    <Setter Property="Height" Value="90" />
                    <Setter Property="Margin" Value="0" />
                    <Setter Property="Padding" Value="0" />
                    <Setter Property="FontFamily" Value="DokChampa" />
                    <Setter Property="FontSize" Value="16" />
                    <Setter Property="VerticalAlignment" Value="Top" />
                    <Setter Property="HorizontalAlignment" Value="Right" />
                    <Setter Property="UseLayoutRounding" Value="False" />
                </Style>
                <Style x:Key="tabGrids">
                    <Setter Property="Grid.Background" Value="#FFE5E5E5" />
                    <Setter Property="Grid.Margin" Value="6,10,10,10" />
                </Style>
            </TabControl.Resources>
            <TabItem Header="Planner">
                <Grid Style="StaticResource tabGrids"/>
            </TabItem>
            <TabItem Header="Section 2">
                <Grid Style="StaticResource tabGrids"/>
            </TabItem>
            <TabItem Header="Section III">
                <Grid Style="StaticResource tabGrids"/>
            </TabItem>
            <TabItem Header="Section 04">
                <Grid Style="StaticResource tabGrids"/>
            </TabItem>
            <TabItem Header="Tools">
                <Grid Style="StaticResource tabGrids"/>
            </TabItem>
        </TabControl>
    </Grid>
</Window>

截图：

【讨论】：

不错，我喜欢选中的选项卡比其他选项卡大一点。如何为垂直 TabControl 做同样的事情？我试过了，但是如果我修改 ContentSite（使用高度），所有选项卡都会变大，但我只希望选中的选项卡变大...