默认情况下，TabItem 的 ItemContainerStyle 被覆盖 WPF Tabcontrol 中的蓝/白控件颜色答案

【问题标题】：ItemContainerStyle of TabItem is overriden by defalt Blue/white control colors in WPF Tabcontrol默认情况下，TabItem 的 ItemContainerStyle 被覆盖 WPF Tabcontrol 中的蓝/白控件颜色
【发布时间】：2012-01-26 14:25:33
【问题描述】：

我有一个 Tabcontrol，它的 TabItems 带有 Datatemplate，TabItem 的样式有一个 ItemContainerStyle。

TabControl：

<TabControl Name="MainTabCtrl"  Margin="0" Padding="0" BorderThickness="0" Background="Transparent"
                        IsSynchronizedWithCurrentItem="True"
                        ItemsSource="{Binding Path=TabViewModels}" 
                        ItemTemplate="{StaticResource ClosableTabItemTemplate}"
                        HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"
                        ItemContainerStyle="{StaticResource ContainerStyle}">

名为 ClosableTabItemTemplate 的 TabItems 的 DataTemplate：

<DataTemplate x:Key="ClosableTabItemTemplate" >
            <Border BorderThickness="3" BorderBrush="Transparent" CornerRadius="4" >
                <!--Border to make the tab item gap from the content-->
                <Border x:Name="InsideBorder" BorderThickness="3" BorderBrush="#D6EAFF" CornerRadius="4">
                    <!--Border for the rounded corners-->
                    <!--TabItem Content Grid-->
                    <Grid x:Name="tabItemGrid" ShowGridLines="True" Margin="0" Background="#D6EAFF">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="25"/>
                            <!--Icon Column-->
                            <ColumnDefinition Width="1*"/>
                            <!--Title Column-->
                            <ColumnDefinition Width="20"/>
                            <!--Close Button Column-->
                        </Grid.ColumnDefinitions>

                        <!--Icon of tab Item-->
                        <Image Grid.Column="0" Grid.Row="1" Height="18" HorizontalAlignment="Left" Source="Images/tab1.jpg"/>

                        <!--Title of tab Item-->
                        <Label Name="TabText" Grid.Column="1" Grid.Row="1" Content="TabItem"  Height="23"  HorizontalAlignment="Left" 
                                           Margin="4,1,0,0"  VerticalAlignment="Top" FontFamily="Courier" FontSize="12" />

                        <!--Close button of tab Item-->
                        <Button Style="{DynamicResource TabButton}"
                                            Name="button_close" Content="x"
                                            Command="{Binding Path=CloseCommand}"
                                            Grid.Column="2" Grid.Row="1" 
                                            Height="20" Width="20" 
                                            Margin="0,0,0,2" VerticalAlignment="Center" HorizontalAlignment="Right"
                                            FontFamily="Courier" FontStretch="Normal" FontWeight="Bold" FontSize="14" 
                                            Visibility="Visible" ToolTip="Close" 
                                            BorderBrush="Transparent" BorderThickness="0" Background="Transparent" Padding="0,0,0,0"
                                            >
                        </Button>
                    </Grid>
                </Border>
            </Border>


            <DataTemplate.Triggers>

                <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type TabItem}},Path=IsSelected}" Value="True">
                    <Setter TargetName="tabItemGrid" Property="Background" Value="#D6EAFF" />
                </DataTrigger>

                <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type TabItem}},Path=IsSelected}" Value="False">
                    <!--<Trigger Property="IsSelected"  Value="False">-->
                    <Setter TargetName="InsideBorder" Property="BorderBrush">
                        <Setter.Value>
                            <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                <GradientStop Color="#FFCCCCD0" />
                                <GradientStop Color="#FF526593" Offset="1" />
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                    <Setter TargetName="tabItemGrid" Property="Background">
                        <Setter.Value>
                            <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                <GradientStop Color="#FFCCCCD0" />
                                <GradientStop Color="#FF526593" Offset="1" />
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                </DataTrigger>
                <!--</Trigger>-->
            </DataTemplate.Triggers>
        </DataTemplate>

tabItem的ItemContainerStyle：

<Style TargetType="{x:Type TabItem}" x:Key="ContainerStyle">
            <Setter Property="Background" Value="Red" />
            <Setter Property="BorderBrush" Value="Red" />
            <Setter Property="Padding" Value="0" />
            <Setter Property="Margin" Value="0" />
            <Style.Triggers>
                <Trigger Property="IsEnabled" Value="false">
                    <Setter Property="Background" Value="Red"/>
                    <Setter Property="BorderBrush" Value="Red" />
                </Trigger>
                <Trigger Property="IsEnabled" Value="true">
                    <Setter Property="Background" Value="Red"/>
                    <Setter Property="BorderBrush" Value="Red" />
                </Trigger>

                <Trigger Property="IsMouseOver" Value="false">
                    <Setter Property="Background" Value="Red"/>
                    <Setter Property="BorderBrush" Value="Red" />
                </Trigger>
                <Trigger Property="IsMouseOver" Value="true">
                    <Setter Property="Background" Value="Red"/>
                    <Setter Property="BorderBrush" Value="Red" />
                </Trigger>

                <Trigger Property="IsFocused" Value="false">
                    <Setter Property="Background" Value="Red"/>
                    <Setter Property="BorderBrush" Value="Red" />
                </Trigger>
                <Trigger Property="IsFocused" Value="true">
                    <Setter Property="Background" Value="Red"/>
                    <Setter Property="BorderBrush" Value="Red" />
                </Trigger>
                <Trigger Property="IsKeyboardFocused" Value="false">
                    <Setter Property="Background" Value="Red"/>
                    <Setter Property="BorderBrush" Value="Red" />
                </Trigger>
                <Trigger Property="IsKeyboardFocused" Value="true">
                    <Setter Property="Background" Value="Red"/>
                    <Setter Property="BorderBrush" Value="Red" />
                </Trigger>

            </Style.Triggers>
        </Style>

无论我做什么，所选选项卡始终具有白色默认控件背景：

当我将鼠标指向未选择的选项卡时，它会变成蓝色背景而不是红色：

我使用透明色而不是红色，但红色更容易显示问题。

为什么默认颜色会覆盖 itemStyleContainer 和样式触发器？

【问题讨论】：

标签： wpf tabcontrol tabitem

【解决方案1】：

通常某些行为被硬编码到Template 中，因此如果您彻底重新设置控件的样式，您也需要创建一个新模板。（你可以使用the default one 作为基础）

【讨论】：

+1 但作为旁注，像焦点边框这样的东西来自默认的焦点视觉，这通常是一个应用程序范围的资源。我很确定你可以以某种方式覆盖它，但我不确定如何。
不确定焦点视觉是否在这里发挥作用，这不就是这个微弱的点状边框吗？
@HB Hrrm 你是对的，如果你覆盖模板也没关系。我在想this question 有人设置了按钮的背景颜色，但是当你点击按钮时焦点视觉仍然出现。在按钮的情况下，焦点视觉会改变整个背景颜色。
大家非常感谢，只是为了记录，这段代码在它不在数据模板中而是在 TabItem 样式中时有效。我将它放在数据模板中，因为我希望 tabcontrol 的“ItemTemplate”属性具有清晰的数据模板。我会查看您的链接，并尝试将其设置回原来的样子....
在不同的答案中发布了正确的解决方案。谢谢大家。

【解决方案2】：

在您的 TabItem 样式中，添加资源部分：

<Style.Resources>
   <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Red" />
   <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Green" />
</Style.Resources>

原始样式使用这些系统颜色，因此如果您在本地覆盖它们，您将获得所需的结果。

【讨论】：

【解决方案3】：

好的，找到了解决方案。数据模板搞砸了，我只是在 Tabitem 样式的覆盖代码中输入了与数据模板相同的代码，并且工作正常。

Tabitem 的样式（而不是 DataTemplate）：

<!--Oveerriding TabItem-->
        <Style TargetType="{x:Type TabItem}">
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="HorizontalContentAlignment" Value="Center" />

            <!--Creating TabItem Template-->
            <Setter Property="Template">
                <Setter.Value>
                    <!--Content of template-->
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Border BorderThickness="3" BorderBrush="Transparent" CornerRadius="4">
                            <!--Border to make the tab item gap from the content-->
                            <Border x:Name="InsideBorder" BorderThickness="3" BorderBrush="#D6EAFF" CornerRadius="4">
                                <!--Border for the rounded corners-->
                                <!--TabItem Content Grid-->
                                <Grid x:Name="tabItemGrid" ShowGridLines="True" Margin="0" Background="#D6EAFF">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto"/>
                                    </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="25"/>
                                        <!--Icon Column-->
                                        <ColumnDefinition Width="1*"/>
                                        <!--Title Column-->
                                        <ColumnDefinition Width="20"/>
                                        <!--Close Button Column-->
                                    </Grid.ColumnDefinitions>

                                    <!--Icon of tab Item-->
                                    <Image Grid.Column="0" Grid.Row="1" Height="18" HorizontalAlignment="Left" Source="Images/tab1.jpg"/>

                                    <!--Title of tab Item-->
                                    <Label Name="TabText" Grid.Column="1" Grid.Row="1" Content="TabItem"  Height="23"  HorizontalAlignment="Left" 
                                           Margin="4,1,0,0"  VerticalAlignment="Top" FontFamily="Courier" FontSize="12" />

                                    <!--Close button of tab Item-->
                                    <Button Style="{DynamicResource TabButton}"
                                            Name="button_close" Content="x"
                                            Command="{Binding Path=CloseCommand}"
                                            Grid.Column="2" Grid.Row="1" 
                                            Height="20" Width="20" 
                                            Margin="0,0,0,2" VerticalAlignment="Center" HorizontalAlignment="Right"
                                            FontFamily="Courier" FontStretch="Normal" FontWeight="Bold" FontSize="14" 
                                            Visibility="Visible" ToolTip="Close" 
                                            BorderBrush="Transparent" BorderThickness="0" Background="Transparent" Padding="0,0,0,0">
                                    </Button>
                                </Grid>
                            </Border>
                        </Border>

                        <!--TabItem Triggers-->
                        <ControlTemplate.Triggers>

                            <Trigger Property="IsSelected" Value="True">
                                <Setter TargetName="tabItemGrid" Property="Background" Value="#D6EAFF" />
                            </Trigger>

                            <Trigger Property="IsSelected"  Value="False">
                                <Setter TargetName="InsideBorder" Property="BorderBrush">
                                    <Setter.Value>
                                        <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                            <GradientStop Color="#FFCCCCD0" />
                                            <GradientStop Color="#FF526593" Offset="1" />
                                        </LinearGradientBrush>
                                    </Setter.Value>
                                </Setter>
                                <Setter TargetName="tabItemGrid" Property="Background">
                                    <Setter.Value>
                                        <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                            <GradientStop Color="#FFCCCCD0" />
                                            <GradientStop Color="#FF526593" Offset="1" />
                                        </LinearGradientBrush>
                                    </Setter.Value>
                                </Setter>
                                <!--<Setter TargetName="button_close" Property="Visibility" Value="Hidden" />-->
                            </Trigger>

                            <!--<Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="tabItemCtrl" Property="Background" Value="#D6EAFF" />
                                <Setter TargetName="InsideBorder" Property="BorderBrush" Value="#D6EAFF" />
                            </Trigger>-->
                        </ControlTemplate.Triggers>

                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Tabcontrol 代码（无 Itemtemplate 属性）：

<TabControl Name="MainTabCtrl"  Margin="0" Padding="0" BorderThickness="0" Background="Transparent"
                        IsSynchronizedWithCurrentItem="True"
                        ItemsSource="{Binding Path=TabViewModels}" 
                        HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
            </TabControl>

结果是：

【讨论】：