wpf - TabItem 上的 IsMouseOver 触发器

Question

我的 TabItem 样式存在一些问题。这是样式:

<Style TargetType="{x:Type TabItem}">
    <Setter Property="Width" Value="160"/>
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="Height" Value="70"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="TabItem">
                <Border Name="Border" Background="Transparent">

                    <ContentPresenter x:Name="ContentSite"
                                    VerticalAlignment="Center"
                                    HorizontalAlignment="Left"
                                    ContentSource="Header"
                                    Margin="10,2"/>

                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter TargetName="Border" Property="Background" Value="Red" />
                    </Trigger>
                    <Trigger Property="IsSelected" Value="False">
                        <Setter TargetName="Border" Property="Background" Value="Green" />
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="Border" Property="Background" Value="Blue" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

问题是 IsMouseOver 事件也会在其任何子项上方移动时触发。我已将 SourceName="ContentSite" 添加到触发器:

<Trigger SourceName="ContentSite" Property="IsMouseOver" Value="True">

使用此代码，IsMouseOver 不再由移动子元素触发，但它引入了另一个问题。仅当光标位于 tabitem 的标题上方时才会触发 IsMouseOver 事件。描述了相同的问题here由另一个用户。建议的答案是将 Background="Transparent"值添加到边框，但它对我不起作用。

Answer 1

如果我正确理解您的问题，您所要做的就是将 Trigger 上的 SourceName 从 ContentSite 更改为 Border。

请尝试以下样式:

<Style TargetType="{x:Type TabItem}">
    <Setter Property="Width" Value="160"/>
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="Height" Value="70"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="TabItem">
                <Border Name="Border" Background="Transparent">

                    <ContentPresenter x:Name="ContentSite"
                                    VerticalAlignment="Center"
                                    HorizontalAlignment="Left"
                                    ContentSource="Header"
                                    Margin="10,2"/>

                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter TargetName="Border" Property="Background" Value="Red" />
                    </Trigger>
                    <Trigger Property="IsSelected" Value="False">
                        <Setter TargetName="Border" Property="Background" Value="Green" />
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True" SourceName="Border">
                        <Setter TargetName="Border" Property="Background" Value="Blue" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

并且，如果您希望仅对未选定的选项卡发生这种情况，您可以尝试以下MultiTrigger

<MultiTrigger>
    <MultiTrigger.Conditions>
        <Condition Property="IsMouseOver" SourceName="Border" Value="True" />
        <Condition Property="IsSelected" Value="False" />
    </MultiTrigger.Conditions>
    <Setter TargetName="Border" Property="BorderBrush" Value="Blue" />
</MultiTrigger>