2

我有一个 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 上。这是我的解决方案（我在我修改的代码区域周围添加了注释）：

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

1 回答 1

1

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

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

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

<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 使用StaticResourceto reference TabItemHotBorderBrush，因此您不能简单地用自己的画笔覆盖此资源。您可能必须覆盖默认模板。

于 2014-11-12T18:38:01.790 回答