如何正确更改tabitem的header背景

Question

我有一个定义如下的 tabitem

<TabControl x:Name="tbcItems" Background="Transparent" >
    <TabItem x:Name="tbiMacros" Header="MACROS" Foreground="Green" FontWeight="Bold">
        <Grid  Grid.Column="0">
            <ListBox Name="lbxMacro1" HorizontalContentAlignment="Stretch" BorderBrush="White" Foreground="White" Background="Transparent" Margin="10"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch" PreviewMouseLeftButtonDown="ListBox_PreviewMouseLeftButtonDown"/>
        </Grid>
    </TabItem>
</TabControl>

我想要的是更改第一个宏 tabitem 的 header

我只能用它从后面的代码中更改它

tbiMacros.Header = new TextBlock()
{
    Background = Brushes.Red,
    Foreground = Brushes.Green,
    Text = "MACROS",
    Margin = new Thickness(0),
    Padding = new Thickness(0),
    HorizontalAlignment = HorizontalAlignment.Stretch,
    VerticalAlignment = VerticalAlignment.Stretch,
};

但是当我这样做时，效果很糟糕，因为它没有扩展到它的全宽/全高

谢谢你的帮助

- - -添加 - - -

我没有在 xaml 中更改它，因为它没有效果

<TabItem x:Name="tbiMacros" Header="MACROS" Foreground="Green" Background="Red" FontWeight="Bold">
                    ...
</TabItem>

导致一事无成

Answer 1

您必须编辑模板才能执行此操作。

1. 在设计视图中右键单击TabControl
2. 编辑附加模板
3. 编辑生成的项目容器 (ItemContainerStyle)
4. 为样式命名

这是生成的代码：

<Window.Resources>
    <Style x:Key="FocusVisual">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Rectangle Margin="2" StrokeDashArray="1 2" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" SnapsToDevicePixels="true" StrokeThickness="1"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <LinearGradientBrush x:Key="TabItem.Static.Background" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#F0F0F0" Offset="0.0"/>
        <GradientStop Color="#E5E5E5" Offset="1.0"/>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="TabItem.Static.Border" Color="#ACACAC"/>
    <LinearGradientBrush x:Key="TabItem.MouseOver.Background" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#ECF4FC" Offset="0.0"/>
        <GradientStop Color="#DCECFC" Offset="1.0"/>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="TabItem.MouseOver.Border" Color="#7EB4EA"/>
    <SolidColorBrush x:Key="TabItem.Selected.Background" Color="Red"/>
    <SolidColorBrush x:Key="TabItem.Selected.Border" Color="#ACACAC"/>
    <SolidColorBrush x:Key="TabItem.Disabled.Background" Color="#F0F0F0"/>
    <SolidColorBrush x:Key="TabItem.Disabled.Border" Color="#D9D9D9"/>
    <Style x:Key="TabControlItemContainerStyle" TargetType="{x:Type TabItem}">
        <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
        <Setter Property="Foreground" Value="Black"/>
        <Setter Property="Background" Value="{StaticResource TabItem.Static.Background}"/>
        <Setter Property="BorderBrush" Value="{StaticResource TabItem.Static.Border}"/>
        <Setter Property="Margin" Value="0"/>
        <Setter Property="Padding" Value="6,2,6,2"/>
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Grid x:Name="templateRoot" SnapsToDevicePixels="true">
                        <Border x:Name="mainBorder" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,0" Margin="0">
                            <Border x:Name="innerBorder" Background="{StaticResource TabItem.Selected.Background}" BorderBrush="{StaticResource TabItem.Selected.Border}" BorderThickness="1,1,1,0" Margin="-1" Opacity="0"/>
                        </Border>
                        <ContentPresenter x:Name="contentPresenter" ContentSource="Header" Focusable="False" HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="true"/>
                                <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Left"/>
                            </MultiDataTrigger.Conditions>
                            <Setter Property="Background" TargetName="mainBorder" Value="{StaticResource TabItem.MouseOver.Background}"/>
                            <Setter Property="BorderBrush" TargetName="mainBorder" Value="{StaticResource TabItem.MouseOver.Border}"/>
                            <Setter Property="BorderThickness" TargetName="innerBorder" Value="1,1,0,1"/>
                            <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,1,0,1"/>
                        </MultiDataTrigger>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="true"/>
                                <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Bottom"/>
                            </MultiDataTrigger.Conditions>
                            <Setter Property="Background" TargetName="mainBorder" Value="{StaticResource TabItem.MouseOver.Background}"/>
                            <Setter Property="BorderBrush" TargetName="mainBorder" Value="{StaticResource TabItem.MouseOver.Border}"/>
                            <Setter Property="BorderThickness" TargetName="innerBorder" Value="1,0,1,1"/>
                            <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,0,1,1"/>
                        </MultiDataTrigger>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="true"/>
                                <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Right"/>
                            </MultiDataTrigger.Conditions>
                            <Setter Property="Background" TargetName="mainBorder" Value="{StaticResource TabItem.MouseOver.Background}"/>
                            <Setter Property="BorderBrush" TargetName="mainBorder" Value="{StaticResource TabItem.MouseOver.Border}"/>
                            <Setter Property="BorderThickness" TargetName="innerBorder" Value="0,1,1,1"/>
                            <Setter Property="BorderThickness" TargetName="mainBorder" Value="0,1,1,1"/>
                        </MultiDataTrigger>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="true"/>
                                <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Top"/>
                            </MultiDataTrigger.Conditions>
                            <Setter Property="Background" TargetName="mainBorder" Value="{StaticResource TabItem.MouseOver.Background}"/>
                            <Setter Property="BorderBrush" TargetName="mainBorder" Value="{StaticResource TabItem.MouseOver.Border}"/>
                            <Setter Property="BorderThickness" TargetName="innerBorder" Value="1,1,1,0"/>
                            <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,1,1,0"/>
                        </MultiDataTrigger>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding IsEnabled, RelativeSource={RelativeSource Self}}" Value="false"/>
                                <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Left"/>
                            </MultiDataTrigger.Conditions>
                            <Setter Property="Opacity" TargetName="contentPresenter" Value="0.56"/>
                            <Setter Property="Background" TargetName="mainBorder" Value="{StaticResource TabItem.Disabled.Background}"/>
                            <Setter Property="BorderBrush" TargetName="mainBorder" Value="{StaticResource TabItem.Disabled.Border}"/>
                            <Setter Property="BorderThickness" TargetName="innerBorder" Value="1,1,0,1"/>
                            <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,1,0,1"/>
                        </MultiDataTrigger>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding IsEnabled, RelativeSource={RelativeSource Self}}" Value="false"/>
                                <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Bottom"/>
                            </MultiDataTrigger.Conditions>
                            <Setter Property="Opacity" TargetName="contentPresenter" Value="0.56"/>
                            <Setter Property="Background" TargetName="mainBorder" Value="{StaticResource TabItem.Disabled.Background}"/>
                            <Setter Property="BorderBrush" TargetName="mainBorder" Value="{StaticResource TabItem.Disabled.Border}"/>
                            <Setter Property="BorderThickness" TargetName="innerBorder" Value="1,0,1,1"/>
                            <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,0,1,1"/>
                        </MultiDataTrigger>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding IsEnabled, RelativeSource={RelativeSource Self}}" Value="false"/>
                                <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Right"/>
                            </MultiDataTrigger.Conditions>
                            <Setter Property="Opacity" TargetName="contentPresenter" Value="0.56"/>
                            <Setter Property="Background" TargetName="mainBorder" Value="{StaticResource TabItem.Disabled.Background}"/>
                            <Setter Property="BorderBrush" TargetName="mainBorder" Value="{StaticResource TabItem.Disabled.Border}"/>
                            <Setter Property="BorderThickness" TargetName="innerBorder" Value="0,1,1,1"/>
                            <Setter Property="BorderThickness" TargetName="mainBorder" Value="0,1,1,1"/>
                        </MultiDataTrigger>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding IsEnabled, RelativeSource={RelativeSource Self}}" Value="false"/>
                                <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Top"/>
                            </MultiDataTrigger.Conditions>
                            <Setter Property="Opacity" TargetName="contentPresenter" Value="0.56"/>
                            <Setter Property="Background" TargetName="mainBorder" Value="{StaticResource TabItem.Disabled.Background}"/>
                            <Setter Property="BorderBrush" TargetName="mainBorder" Value="{StaticResource TabItem.Disabled.Border}"/>
                            <Setter Property="BorderThickness" TargetName="innerBorder" Value="1,1,1,0"/>
                            <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,1,1,0"/>
                        </MultiDataTrigger>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="false"/>
                                <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Left"/>
                            </MultiDataTrigger.Conditions>
                            <Setter Property="BorderThickness" TargetName="innerBorder" Value="1,1,0,1"/>
                            <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,1,0,1"/>
                        </MultiDataTrigger>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="true"/>
                                <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Left"/>
                            </MultiDataTrigger.Conditions>
                            <Setter Property="Panel.ZIndex" Value="1"/>
                            <Setter Property="Margin" Value="-2,-2,0,-2"/>
                            <Setter Property="Opacity" TargetName="innerBorder" Value="1"/>
                            <Setter Property="BorderThickness" TargetName="innerBorder" Value="1,1,0,1"/>
                            <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,1,0,1"/>
                        </MultiDataTrigger>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="false"/>
                                <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Bottom"/>
                            </MultiDataTrigger.Conditions>
                            <Setter Property="BorderThickness" TargetName="innerBorder" Value="1,0,1,1"/>
                            <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,0,1,1"/>
                        </MultiDataTrigger>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="true"/>
                                <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Bottom"/>
                            </MultiDataTrigger.Conditions>
                            <Setter Property="Panel.ZIndex" Value="1"/>
                            <Setter Property="Margin" Value="-2,0,-2,-2"/>
                            <Setter Property="Opacity" TargetName="innerBorder" Value="1"/>
                            <Setter Property="BorderThickness" TargetName="innerBorder" Value="1,0,1,1"/>
                            <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,0,1,1"/>
                        </MultiDataTrigger>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="false"/>
                                <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Right"/>
                            </MultiDataTrigger.Conditions>
                            <Setter Property="BorderThickness" TargetName="innerBorder" Value="0,1,1,1"/>
                            <Setter Property="BorderThickness" TargetName="mainBorder" Value="0,1,1,1"/>
                        </MultiDataTrigger>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="true"/>
                                <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Right"/>
                            </MultiDataTrigger.Conditions>
                            <Setter Property="Panel.ZIndex" Value="1"/>
                            <Setter Property="Margin" Value="0,-2,-2,-2"/>
                            <Setter Property="Opacity" TargetName="innerBorder" Value="1"/>
                            <Setter Property="BorderThickness" TargetName="innerBorder" Value="0,1,1,1"/>
                            <Setter Property="BorderThickness" TargetName="mainBorder" Value="0,1,1,1"/>
                        </MultiDataTrigger>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="false"/>
                                <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Top"/>
                            </MultiDataTrigger.Conditions>
                            <Setter Property="BorderThickness" TargetName="innerBorder" Value="1,1,1,0"/>
                            <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,1,1,0"/>
                        </MultiDataTrigger>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="true"/>
                                <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Top"/>
                            </MultiDataTrigger.Conditions>
                            <Setter Property="Panel.ZIndex" Value="1"/>
                            <Setter Property="Margin" Value="-2,-2,-2,0"/>
                            <Setter Property="Opacity" TargetName="innerBorder" Value="1"/>
                            <Setter Property="BorderThickness" TargetName="innerBorder" Value="1,1,1,0"/>
                            <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,1,1,0"/>
                        </MultiDataTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

然后搜索<SolidColorBrush x:Key="TabItem.Selected.Background" Color="#FFFFFF"/>并根据您的需要替换颜色值。

该样式将仅适用于选定的TabControl 。

• 将它应用于许多TabControl ：将它移动到应用程序资源并重用它。

• 将它应用于所有TabControl ：

  • 移除ItemContainerStyle="{StaticResource TabControlItemContainerStyle}"属性
  • 添加在应用程序级别设置ItemContainerStyle的全局样式：

<Application.Resources>
    <!-- ...  -->

    <Style TargetType="TabControl" BasedOn="{StaticResource {x:Type TabControl}}">
        <Style.Setters>
            <Setter Property="ItemContainerStyle" Value="{StaticResource TabControlItemContainerStyle}" />
        </Style.Setters>
    </Style>
</Application.Resources>

此处提供了一个工作演示。