TabItem 的 ItemContainerStyle 被 WPF Tabcontrol 中的默认蓝/白控件颜色覆盖
我有一个 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 的 TabItem 的 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 和样式触发器?
i have a Tabcontrol with Datatemplate for its TabItems and a ItemContainerStyle for the style of the TabItem.
The 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}">
The DataTemplate for the TabItems called ClosableTabItemTemplate:
<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>
The ItemContainerStyle of the tabItem:
<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>
what happens is that the selected tab is always with white default control background no matter what i do:
also when i point the mouse over the unselected tab it turns blue background instead of red:
i use transparent color instead of red but it is easier to show the problem with the red color.
why does the default colors override the itemStyleContainer and the style triggers?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
通常,某些行为会被硬编码到 < code>Template,因此,如果您彻底重新设计控件的样式,您也需要创建一个新模板。 (您可以使用默认模板作为基础)
Usually some behavior is hard-coded into the
Template
, so if you drastically restyle a control you need to create a new template, too. (You could use the default one as base though)在 TabItem 的样式中,添加一个资源部分:
原始样式使用这些系统颜色,因此如果您在本地覆盖它们,您将获得所需的结果。
In your style for TabItem, add a ressource section:
The original style uses those system colors, so if you override them locally, you get the desired result.
好的,找到解决方案了。
数据模板把事情搞砸了,我刚刚在 Tabitem 样式的覆盖代码中输入了与数据模板相同的代码,并且它工作正常。
Tabitem 的样式(而不是 DataTemplate):
Tabcontrol 代码(无 Itemtemplate 属性):
结果是:
Ok, found the solution.
the Datatemplate messed things up, i just entered the same code of the Datatemplate, inside the override code of the Tabitem style and its working fine.
The style of Tabitem (instead of DataTemplate):
Tabcontrol code (no Itemtemplate property):
The result is: