TabItem BorderBrush 未在 IsMouseOver 触发器上更新答案

【问题标题】：TabItem BorderBrush not updating on IsMouseOver triggerTabItem BorderBrush 未在 IsMouseOver 触发器上更新
【发布时间】：2014-11-12 17:14:24
【问题描述】：

我有一个 MultiDataTrigger，如果我的视图模型中的某个属性为真并且 TabItem 上的 IsMouseOver 为真，那么边框应该显示为红色，厚度为 2.5。

我无法让属性和 IsMouseOver 都工作，所以我只尝试了我的属性。这工作正常，但仍然有预期的问题，它会变成红色，厚度为 2.5，直到我将鼠标悬停在选项卡上。所以我然后尝试取出我的视图模型属性，并将 IsMouseOver 检查作为条件。这行不通。下面是只有 IsMouseOver 的代码。

<TabItem x:Name="TabItemNotWorking" Header="NotWorking">
            <TabItem.Style>
                <Style TargetType="TabItem">
                    <Style.Triggers>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding IsMouseOver RelativeSource={RelativeSource Self}}" Value="true" />
                                <!--<Condition Binding="{Binding Counter, Converter={StaticResource IntIsGreaterThanZeroToBool}}" Value="true" />-->
                            </MultiDataTrigger.Conditions>
                                <Setter Property="TabItem.BorderBrush" Value="Red"/>
                                <Setter Property="TabItem.BorderThickness" Value="2.5"/>
                        </MultiDataTrigger>
                    </Style.Triggers>
                </Style>
            </TabItem.Style>    
            <!--Content in here-->
</TabItem>

我使用 Mike Strobel 关于覆盖 TabItem 模板的建议修复了它。现在，只要我的 ViewModel 属性为真，我的红色边框就会显示，无论鼠标是否悬停在 TabItem 上。 这是我的解决方案（我在我修改的代码区域周围放置了 cmets）：

<LinearGradientBrush x:Key="TabItemHotBackground"
                     StartPoint="0,0"
                     EndPoint="0,1">
        <LinearGradientBrush.GradientStops>
            <GradientStop Color="#EAF6FD"
                      Offset="0.15"/>
            <GradientStop Color="#D9F0FC"
                      Offset=".5"/>
            <GradientStop Color="#BEE6FD"
                      Offset=".5"/>
            <GradientStop Color="#A7D9F5"
                      Offset="1"/>
        </LinearGradientBrush.GradientStops>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="TabItemSelectedBackground"
                 Color="#F9F9F9"/>
    <SolidColorBrush x:Key="TabItemDisabledBackground"
                 Color="#F4F4F4"/>
    <SolidColorBrush x:Key="TabItemHotBorderBrush"
                 Color="#3C7FB1"/>
    <SolidColorBrush x:Key="TabItemDisabledBorderBrush"
                 Color="#FFC9C7BA"/>
    <Style TargetType="{x:Type TabItem}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Grid SnapsToDevicePixels="true">
                        <Border Name="Bd"
                            Padding="{TemplateBinding Padding}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            Background="{TemplateBinding Background}"
                            BorderThickness="1,1,1,0">
                            <ContentPresenter Name="Content"
                                          ContentSource="Header"
                                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                          HorizontalAlignment="{Binding Path=HorizontalContentAlignment,RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"
                                          VerticalAlignment="{Binding Path=VerticalContentAlignment,RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"
                                          RecognizesAccessKey="True"/>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter TargetName="Bd" Property="Background" Value="{StaticResource TabItemHotBackground}"/>
                        </Trigger>
                        <Trigger Property="IsSelected" Value="true">
                            <Setter Property="Panel.ZIndex" Value="1"/>
                            <Setter TargetName="Bd" Property="Background" Value="{StaticResource TabItemSelectedBackground}"/>
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="false"/>
                                <Condition Property="IsMouseOver" Value="true"/>
                            </MultiTrigger.Conditions>
                            <Setter TargetName="Bd" Property="BorderBrush" Value="{StaticResource TabItemHotBorderBrush}"/>
                        </MultiTrigger> 

                        <!--HERE ARE THE START OF MY CHANGES-->
                        <DataTrigger Binding="{Binding Counter, Converter={StaticResource IntIsGreaterThanZeroToBool}}" Value="true">
                            <Setter TargetName="Bd" Property="BorderBrush" Value="Red"/>
                            <Setter TargetName="Bd" Property="BorderThickness" Value="2.5"/>
                        </DataTrigger>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType={x:Type TabItem}}}"  Value="true" />
                                <Condition Binding="{Binding Counter, Converter={StaticResource IntIsGreaterThanZeroToBool}}" Value="true" />
                            </MultiDataTrigger.Conditions>
                            <Setter TargetName="Bd" Property="BorderBrush" Value="Red"/>
                            <Setter TargetName="Bd" Property="BorderThickness" Value="2.5"/>
                        </MultiDataTrigger>
                        <!--HERE ARE THE END OF MY CHANGES-->

                        <Trigger Property="TabStripPlacement" Value="Bottom">
                            <Setter TargetName="Bd" Property="BorderThickness" Value="1,0,1,1"/>
                        </Trigger>
                        <Trigger Property="TabStripPlacement" Value="Left">
                            <Setter TargetName="Bd" Property="BorderThickness" Value="1,1,0,1"/>
                        </Trigger>
                        <Trigger Property="TabStripPlacement" Value="Right">
                            <Setter TargetName="Bd" Property="BorderThickness" Value="0,1,1,1"/>
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="true"/>
                                <Condition Property="TabStripPlacement" Value="Top"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Margin" Value="-2,-2,-2,-1"/>
                            <Setter TargetName="Content" Property="Margin" Value="0,0,0,1"/>
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="true"/>
                                <Condition Property="TabStripPlacement" Value="Bottom"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Margin" Value="-2,-1,-2,-2"/>
                            <Setter TargetName="Content" Property="Margin" Value="0,1,0,0"/>
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="true"/>
                                <Condition Property="TabStripPlacement" Value="Left"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Margin" Value="-2,-2,-1,-2"/>
                            <Setter TargetName="Content" Property="Margin" Value="0,0,1,0"/>
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="true"/>
                                <Condition Property="TabStripPlacement" Value="Right"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Margin" Value="-1,-2,-2,-2"/>
                            <Setter TargetName="Content" Property="Margin" Value="1,0,0,0"/>
                        </MultiTrigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter TargetName="Bd" Property="Background" Value="{StaticResource TabItemDisabledBackground}"/>
                            <Setter TargetName="Bd" Property="BorderBrush" Value="{StaticResource TabItemDisabledBorderBrush}"/>
                            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

【问题讨论】：

这似乎与 WPF 相关。那是对的吗？如果是，请添加 WPF 标签。
您最后提到的IsMouseOver 条件对我有用，尽管在 Windows 7 上使用默认 Aero 样式，它似乎只在实际选择选项卡时应用红色 BorderBrush。未选择选项卡时，悬停边框呈蓝色。您可能需要调整默认模板以获得所需的结果。
您是否为您的 TabItem 设置了背景（甚至透明）？我在网格中看到了类似的问题，因为默认情况下，背景属性为 null，不会用于命中测试。
不，除了它的内容和标题之外，我没有在 TabItem 上设置任何其他属性。设置背景属性似乎没有帮助。几乎就像当我将鼠标悬停在 TabItem 上时，它使用了完全不同的样式。因为只有在未选择选项卡且鼠标不在选项卡上时设置背景属性才有效。

标签： wpf triggers tabitem multidatatrigger ismouseover

【解决方案1】：

您会注意到以下条件有效，但仅在选择选项卡时：

<Condition Binding="{Binding IsMouseOver RelativeSource={RelativeSource Self}}"
           Value="true" />

原因如下：请注意此 Aero 主题的默认 TabItem 模板的摘录。

<MultiTrigger>
  <MultiTrigger.Conditions>
    <Condition Property="IsSelected"
               Value="false"/>
    <Condition Property="IsMouseOver"
               Value="true"/>
  </MultiTrigger.Conditions>
  <Setter TargetName="Bd"
          Property="BorderBrush"
          Value="{StaticResource TabItemHotBorderBrush}"/>
</MultiTrigger>

当标签未选择时，该样式会在鼠标悬停时覆盖BorderBrush，因此在这种情况下不会应用您的边框画笔。

由于 setter 使用 StaticResource 来引用 TabItemHotBorderBrush，因此您不能简单地用自己的画笔覆盖此资源。您可能必须覆盖默认模板。

【讨论】：

您有指向默认 TabItem 模板的链接吗？我找到了一个，但它的触发条件与您发布的触发条件不同。谢谢！
Blend 随附在 SystemThemes 文件夹中。如果你没有，我把内容复制到this gist。请注意，该文件具有 all 控件的 Aero 样式。您必须筛选它们才能找到相关的。