WPF-TabItem MouseOver无法正常工作 [英] WPF - TabItem MouseOver not working as intended

问题描述

IsMouveOver触发器带有TabItem元素时出现问题。

I have an issue with the IsMouveOver trigger with a TabItem Element.

当鼠标光标位于TabItem上时，其背景颜色会改变，这正是我想要的=>有效。
但是，每当我的鼠标光标位于TabItem内的某个项目上时，TabItem的背景颜色也会更改。

When the mouse cursor is on a TabItem, its background color changes, which is what I want => It works. However the background color of the TabItem also changes whenever my mouse cursor is on an item inside the TabItem.

以下是与样式相关的XAML：

Here's the XAML related to the styling:

    <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代码：

And the XAML code for the windows itself:

    <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

With this code for example, the IsMouseOver of a TabItem is triggered when the mouse cursor is on the button it contains.

如何解决此问题？ ：P

How to fix this? :P

感谢帮助=）

推荐答案

之所以不起作用，是因为Border作为容器会处理所有事件，并且 MouseOver 也不例外。如果要忽略某个部分（项目的内部）的 MouseOver 事件，则只需将内部项目放在较宽的项目之上。

It does not work because Border as container takes all events, and MouseOver is not exception. If you want to ignore MouseOver event for some part (your inner part of the item) then just put inner item on top of wider item.

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

You can add Grid control beneath inner part and bind Trigger to its MouseOver event.

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

这篇关于WPF-TabItem MouseOver无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！