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>
You will notice that the following condition works, but only when the tab is selected:
Here's why: note this excerpt from the default
TabItem
template for the Aero theme.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 referenceTabItemHotBorderBrush
, you can't simply override this resource with your own brush. You will probably have to override the default template.