问题
I have a problem with a TabItem Style and maybe someone of you can help me.
Following the Style at issue:
<Style x:Key="ChildrenTabItemStyle" TargetType="TabItem">
<Style.Resources>
<SolidColorBrush x:Key="ButtonNormalBackground" Color="#FFEAE8E8"/>
<LinearGradientBrush x:Key="ButtonOverBackground" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFFAFAFA" Offset="0"/>
<GradientStop Color="#FFE0E0E3" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ButtonPressedBackground" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFE0E0E2" Offset="0"/>
<GradientStop Color="#FFF8F8F8" Offset="1"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="ButtonNormalBorder" Color="#FF969696"/>
<Style x:Key="CloseableTabItemButtonStyle" TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Background" Value="{DynamicResource ButtonNormalBackground}"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="2,2,2,0"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="4"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Border SnapsToDevicePixels="true" x:Name="Chrome" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2" Opacity="0" />
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Opacity" TargetName="Chrome" Value="1"/>
<Setter Property="Background" TargetName="Chrome" Value="{DynamicResource ButtonOverBackground}" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Opacity" TargetName="Chrome" Value="1"/>
<Setter Property="Background" TargetName="Chrome" Value="{DynamicResource ButtonPressedBackground}" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#ADADAD"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Style.Resources>
<Setter Property="Height" Value="40"/>
<Setter Property="MinWidth" Value="90"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Border Name="Border" Margin="1,-1,-1,-1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ContentPresenter Name="BorderContent"
Content="{Binding Path=Header}"
VerticalAlignment="Center"
HorizontalAlignment="Center"/>
<Button x:Name="PART_Close"
HorizontalAlignment="Right"
Margin="3,0,3,0"
VerticalAlignment="Top"
Width="16"
Height="16"
DockPanel.Dock="Right"
Style="{DynamicResource CloseableTabItemButtonStyle}"
ToolTip="Close Tab"
Cursor="Hand"
Command="{Binding Path=CloseCommand}"
Visibility="Hidden">
<Path x:Name="Path"
Stretch="Fill"
StrokeThickness="0.5"
Stroke="#FF333333"
Fill="#FF969696"
Data="F1 M 2.28484e-007,1.33331L 1.33333,0L 4.00001,2.66669L 6.66667,6.10352e-005L 8,1.33331L 5.33334,4L 8,6.66669L 6.66667,8L 4,5.33331L 1.33333,8L 1.086e-007,6.66669L 2.66667,4L 2.28484e-007,1.33331 Z "
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"/>
</Button>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource ButtonBorderBrush}"/>
<Setter TargetName="Border" Property="BorderThickness" Value="2,2,2,0"/>
<Setter TargetName="PART_Close" Property="Visibility" Value="Visible"/>
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Border" Property="Background" Value="{StaticResource EnvLayout}"/>
<Setter Property="Foreground" Value="#FFFFFF"/>
<Setter TargetName="PART_Close" Property="Visibility" Value="Visible"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
My problem is focused on IsMouseOver trigger; when a tab is not selected, in fact, this event is fired only when the cursor is over the Header of the TabItem ( defined within the ContentTemplate) and not at any point of the Border.
In order to better explain my problem, following some screenshots:
When IsMouseOver = true my TabItem must have a gray border and the close button has to appear; as you can see in the following images, this behaviour appens only when my cursor is exactly over the Header:
Obviously, when the cursor isn't over the Header,you cannot even select the Tab.
How can I solve this problem??
Thanks in advance for your help,
Deborah
回答1:
I've had a similar issue recently,
Try changing your
<ControlTemplate TargetType="{x:Type TabItem}">
<Border Name="Border" Margin="1,-1,-1,-1">
to
<ControlTemplate TargetType="{x:Type TabItem}">
<Border Name="Border" Margin="1,-1,-1,-1" Background="Transparent">
It's seemed like if a default value for the background is not set, only rendered area respond to state triggers
来源：https://stackoverflow.com/questions/15569131/trigger-for-ismouseover-on-tabitem-contentemplate