wpf - 在 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 的 Header 上方(在 ContentTemplate 中定义)而不是 Border 的任何点时才会触发此事件。

为了更好地解释我的问题，下面是一些截图:

当 IsMouseOver = true 时，我的 TabItem 必须有灰色边框并且必须出现关闭按钮；如下图所示，仅当我的光标正好位于标题上方时，才会出现此行为:





显然，当光标不在 Header 上时，您甚至无法选择 Tab。

我该如何解决这个问题？？

预先感谢您的帮助，

黛博拉

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

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