TabItem BorderBrush not updating on IsMouseOver trigger

403 views Asked by At

I have a MultiDataTrigger where if a property in my view model is true AND the IsMouseOver on the TabItem is true, then the Border should appear red with 2.5 thickness.

I couldn't get both the property and IsMouseOver to work, so I tried just my property. That worked correctly, but still had the expected issue where it would be red with 2.5 thickness, up until I hovered over the tab. So I then tried taking out my view model property and just had the IsMouseOver check as a condition. This doesn't work. Below is the code with just the 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>

I fixed it using Mike Strobel's advice of overwriting the TabItem template. Now my red border will show whenever my ViewModel property is true, regardless if the mouser is hovered over the TabItem. Here is my solution (I put comments around the areas of code I modified):

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

There are 1 answers

2
Mike Strobel On BEST ANSWER

You will notice that the following condition works, but only when the tab is selected:

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

Here's why: note this excerpt from the default TabItem template for the Aero theme.

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

The style overrides the BorderBrush on mouse-over when the tab isn't selected, so your border brush won't be applied in that case.

Since the setter uses a StaticResource to reference TabItemHotBorderBrush, you can't simply override this resource with your own brush. You will probably have to override the default template.