TabItem的ItemContainerStyle被WPF Tabcontrol中的淡蓝色/白色控件颜色覆盖
我有一个Tabcontrol,其中Datatemplate用于TabItems,ItemContainerStyle用于TabItem的样式 选项卡控件:TabItem的ItemContainerStyle被WPF Tabcontrol中的淡蓝色/白色控件颜色覆盖,wpf,tabcontrol,tabitem,Wpf,Tabcontrol,Tabitem,我有一个Tabcontrol,其中Datatemplate用于TabItems,ItemContainerStyle用于TabItem的样式 选项卡控件: <TabControl Name="MainTabCtrl" Margin="0" Padding="0" BorderThickness="0" Background="Transparent" IsSynchronizedWithCurrentItem="True"
<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}">
名为ClosableTabitemplate的选项卡项的数据模板:
<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>
选项卡Item的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和样式触发器?在TabItem的样式中,添加ressource部分:
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Red" />
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Green" />
</Style.Resources>
原始样式使用这些系统颜色,因此如果您在本地覆盖它们,您将获得所需的结果。通常某些行为是硬编码到中的,因此如果您彻底重新设置控件的样式,您也需要创建新模板。(你可以用它做基础)好的,找到了解决方案。 Datatemplate把事情搞砸了,我刚刚输入了Datatemplate的相同代码,在Tabitem样式的覆盖代码中,它工作正常 Tabitem的样式(而不是DataTemplate):
Tabcontrol代码(无Itemtemplate属性):
结果是:
+1但作为旁注,像聚焦边框这样的东西来自默认的聚焦视觉,这通常是应用程序范围内的资源。我很确定你可以以某种方式覆盖它,但我不确定如何覆盖。不确定焦点视觉是否在这里发挥作用,这不就是这个模糊的dottet边框吗?@HB Hrrm你是对的,覆盖模板并不重要。我在想有人在哪里设置了一个按钮的背景色,但是焦点视觉
<!--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 Name="MainTabCtrl" Margin="0" Padding="0" BorderThickness="0" Background="Transparent"
IsSynchronizedWithCurrentItem="True"
ItemsSource="{Binding Path=TabViewModels}"
HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
</TabControl>