在TabItem ContenTemplate上触发IsMouseOver

Question

我遇到TabItem风格的问题，也许有人可以帮助我。

遵循相关风格：

<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>

我的问题集中在IsMouseOver触发器上;实际上，只有当光标位于TabItem的标题（在ContentTemplate中定义）而不是在Border的任何位置时，才会触发此事件。

为了更好地解释我的问题，请点击一些截图：

当IsMouseOver = true时，我的TabItem必须有一个灰色边框，并且必须出现关闭按钮;正如您在下面的图像中看到的，只有当我的光标正好在标题上时才会出现此行为：

显然，当光标未在标题上方时，您甚至无法选择标签。

我该如何解决这个问题？

先谢谢你的帮助，

德博拉

Answer 1

我最近遇到过类似的问题，

尝试更改

<ControlTemplate TargetType="{x:Type TabItem}">
  <Border Name="Border" Margin="1,-1,-1,-1">

到

<ControlTemplate TargetType="{x:Type TabItem}">
  <Border Name="Border" Margin="1,-1,-1,-1" Background="Transparent">

似乎没有设置背景的默认值，只有渲染区域响应状态触发器