WPF - TabItem MouseOver未按预期工作

Question

我有一个带有TabItem元素的IsMouveOver触发器的问题.

当鼠标光标位于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>

以及Windows本身的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

谢谢你的帮助=)

Answer 1

它不起作用,因为Border as container接受所有事件,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>

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>

这为我解决了这个问题

忽略鼠标悬停在活动选项卡上的情况

希望这可以帮助任何遇到此问题的人