WPF - TabItem鼠标悬停效果未按预期工作

Question

我遇到了一个与TabItem元素的IsMouseOver触发器相关的问题。

当鼠标光标位于TabItem上时，其背景颜色会改变，这正是我想要的=>它起作用了。 但是，只要我的鼠标光标在TabItem内部的一个项目上，TabItem的背景颜色也会改变。

以下是相关样式的XAML代码：

    <Style x:Key="SupTest" TargetType="{x:Type TabItem}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabItem}">
                <Border Margin="2" Name="TabBorder" CornerRadius="6" BorderBrush="Transparent" Background="Transparent" 
                        BorderThickness="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                    <StackPanel Margin="12" Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                        <Rectangle Width="25" Height="25" Fill="Blue" HorizontalAlignment="Left" Margin="00,0,0,0"></Rectangle>
                        <ContentPresenter ContentSource="Header" VerticalAlignment="Center" 
                                          HorizontalAlignment="Stretch" Margin="10,0,0,0"></ContentPresenter>
                    </StackPanel>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="Panel.ZIndex" Value="100" />
                        <Setter TargetName="TabBorder" Property="Background" Value="#FFDFDFDF" />
                        <Setter TargetName="TabBorder" Property="BorderThickness" Value="2" />
                        <Setter TargetName="TabBorder" Property="BorderBrush" Value="{DynamicResource WindowTitleColorBrush}"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter TargetName="TabBorder" Property="Background" Value="DarkRed" />
                        <Setter TargetName="TabBorder" Property="BorderBrush" Value="Black" />
                        <Setter Property="Foreground" Value="DarkGray" />
                    </Trigger>
                    <Trigger Property="Border.IsMouseOver" Value="True">
                        <Setter TargetName="TabBorder" Property="Background" Value="{DynamicResource WindowTitleColorBrush}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    </Style>

窗口本身的XAML代码：

    <TabControl HorizontalAlignment="Stretch" VerticalAlignment="Stretch" TabStripPlacement="Left"
                BorderThickness="1,0,0,0" BorderBrush="{DynamicResource WindowTitleColorBrush}">
        <TabItem Header="Item #1" Style="{StaticResource SupTest}">
             <Grid>
                <Button Content="Button" HorizontalAlignment="Left" Margin="10" VerticalAlignment="Top" Width="75"/>
            </Grid>
        <TabItem Header="Item #2" Style="{StaticResource SupTest}">
             <Grid>
                <Button Content="Button Teeest" HorizontalAlignment="Left" Margin="10" VerticalAlignment="Top" Width="75"/>
            </Grid>
        </TabItem>
    </TabControl>

例如，使用此代码时，当鼠标指针位于TabItem包含的按钮上时，会触发IsMouseOver事件。

如何解决呢？:P

感谢您的帮助 =)

- MagiKruiser

---

你尝试过 <Trigger Property="Border.IsMouseDirectlyOver" Value="True"> 吗？ - sa_ddam213

@sa_ddam213 我已经试过了 :P 但是似乎无论我怎么做，这个事件都没有被触发。不过还是谢谢你的建议 =) - MagiKruiser

Answer 1

它不起作用的原因是边框作为容器会接收所有事件，而MouseOver也不例外。如果你想忽略某个部分（你的项目内部部分）的MouseOver事件，那么就把内部项目放在更宽的项目顶部。

您可以在内部部分下添加网格控件，并将Trigger绑定到其MouseOver事件。

    <Border Margin="2" Name="TabBorder" CornerRadius="6" BorderBrush="Transparent" Background="Transparent" 
BorderThickness="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid>
    <Grid x:Name="gridMouseOver"/>
    <StackPanel Margin="12" Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <Rectangle Width="25" Height="25" Fill="Blue" HorizontalAlignment="Left" Margin="00,0,0,0"></Rectangle>
            <ContentPresenter ContentSource="Header" VerticalAlignment="Center" 
                    HorizontalAlignment="Stretch" Margin="10,0,0,0"></ContentPresenter>
        </StackPanel>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
    <Setter Property="Panel.ZIndex" Value="100" />
    <Setter TargetName="TabBorder" Property="Background" Value="#FFDFDFDF" />
    <Setter TargetName="TabBorder" Property="BorderThickness" Value="2" />
    <Setter TargetName="TabBorder" Property="BorderBrush" Value="{DynamicResource WindowTitleColorBrush}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
    <Setter TargetName="TabBorder" Property="Background" Value="DarkRed" />
    <Setter TargetName="TabBorder" Property="BorderBrush" Value="Black" />
    <Setter Property="Foreground" Value="DarkGray" />
</Trigger>
<Trigger SourceName="gridMouseOver" Property="IsMouseOver" Value="True">
    <Setter TargetName="TabBorder" Property="Background" Value="{DynamicResource WindowTitleColorBrush}"/>
</Trigger>
</ControlTemplate.Triggers>

- Artur A

Answer 2

这是一个比较老的问题，但今天一直让我感到困扰...

<MultiDataTrigger.Conditions>
    <Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="true" />
    <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="false"/>
    <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Top"/>
</MultiDataTrigger.Conditions>

这对我解决了问题。

忽略活动选项卡的鼠标悬停。

希望能帮到遇到此问题的任何人。

- Craig Walker

---

比起被接受的答案更简单，对我来说运行得很好。 - Mickael V.