TabItem 上的 IsMouseOver 触发器答案

【问题标题】：Trigger for IsMouseOver on TabItemTabItem 上的 IsMouseOver 触发器
【发布时间】：2016-12-21 03:54:59
【问题描述】：

我的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 不再通过在子元素周围移动来触发，但它引入了另一个问题。 IsMouseOver 事件仅在光标位于 tabitem 的标题上时触发。另一个用户here 描述了同样的问题。建议的答案是将 Background="Transparent" 值添加到边框，但它对我不起作用。

【问题讨论】：

如果您不希望在标题和子元素处触发 IsMouseOver，那么何时触发？那还剩下什么？这就是 TabItem 的全部内容。 :)
您希望事件仅在选项卡标题上触发还是仅在内容上触发，或同时在两者上触发？
我希望事件仅在选项卡标题上触发。通过添加 SourceName="ContentSite"，该事件仅在光标位于 TabItem.Header 内的 TextBlock 上方时触发。
我希望当光标位于整个 TabItem 的 160x70 区域上时触发事件，而不仅仅是当它位于标题内的 TextBlock 上时。我希望这能澄清困惑。

标签： wpf xaml

【解决方案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>

【讨论】：