Trigger for IsMouseOver on TabItem ContenTemplate

Question

I have a problem with a TabItem Style and maybe someone of you can help me.

Following the Style at issue:

<Style x:Key="ChildrenTabItemStyle" TargetType="TabItem">
                <Style.Resources>
                    <SolidColorBrush x:Key="ButtonNormalBackground" Color="#FFEAE8E8"/>
                    <LinearGradientBrush x:Key="ButtonOverBackground" EndPoint="0,1" StartPoint="0,0">
                        <GradientStop Color="#FFFAFAFA" Offset="0"/>
                        <GradientStop Color="#FFE0E0E3" Offset="1"/>
                    </LinearGradientBrush>
                    <LinearGradientBrush x:Key="ButtonPressedBackground" EndPoint="0,1" StartPoint="0,0">
                        <GradientStop Color="#FFE0E0E2" Offset="0"/>
                        <GradientStop Color="#FFF8F8F8" Offset="1"/>
                    </LinearGradientBrush>
                    <SolidColorBrush x:Key="ButtonNormalBorder" Color="#FF969696"/>
                    <Style x:Key="CloseableTabItemButtonStyle" TargetType="{x:Type Button}">
                        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
                        <Setter Property="Background" Value="{DynamicResource ButtonNormalBackground}"/>
                        <Setter Property="BorderBrush" Value="Transparent"/>
                        <Setter Property="BorderThickness" Value="2,2,2,0"/>
                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
                        <Setter Property="HorizontalContentAlignment" Value="Center"/>
                        <Setter Property="VerticalContentAlignment" Value="Center"/>
                        <Setter Property="Padding" Value="4"/>
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type Button}">
                                    <Grid>
                                        <Border SnapsToDevicePixels="true" x:Name="Chrome" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2" Opacity="0" />
                                        <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True"/>
                                    </Grid>
                                    <ControlTemplate.Triggers>
                                        <Trigger Property="IsMouseOver" Value="True">
                                            <Setter Property="Opacity" TargetName="Chrome" Value="1"/>
                                            <Setter Property="Background" TargetName="Chrome" Value="{DynamicResource ButtonOverBackground}" />
                                        </Trigger>
                                        <Trigger Property="IsPressed" Value="True">
                                            <Setter Property="Opacity" TargetName="Chrome" Value="1"/>
                                            <Setter Property="Background" TargetName="Chrome" Value="{DynamicResource ButtonPressedBackground}" />
                                        </Trigger>
                                        <Trigger Property="IsEnabled" Value="false">
                                            <Setter Property="Foreground" Value="#ADADAD"/>
                                        </Trigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </Style.Resources>
                <Setter Property="Height" Value="40"/>
                <Setter Property="MinWidth" Value="90"/>
                <Setter Property="FontWeight" Value="Bold"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type TabItem}">
                            <Border Name="Border" Margin="1,-1,-1,-1">
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="Auto"/>
                                    </Grid.ColumnDefinitions>

                                    <ContentPresenter Name="BorderContent"
                                                      Content="{Binding Path=Header}" 
                                                      VerticalAlignment="Center"
                                                      HorizontalAlignment="Center"/>

                                    <Button x:Name="PART_Close" 
                                            HorizontalAlignment="Right" 
                                            Margin="3,0,3,0" 
                                            VerticalAlignment="Top" 
                                            Width="16" 
                                            Height="16" 
                                            DockPanel.Dock="Right" 
                                            Style="{DynamicResource CloseableTabItemButtonStyle}" 
                                            ToolTip="Close Tab"
                                            Cursor="Hand"
                                            Command="{Binding Path=CloseCommand}"
                                            Visibility="Hidden">
                                        <Path x:Name="Path" 
                                              Stretch="Fill" 
                                              StrokeThickness="0.5" 
                                              Stroke="#FF333333" 
                                              Fill="#FF969696" 
                                              Data="F1 M 2.28484e-007,1.33331L 1.33333,0L 4.00001,2.66669L 6.66667,6.10352e-005L 8,1.33331L 5.33334,4L 8,6.66669L 6.66667,8L 4,5.33331L 1.33333,8L 1.086e-007,6.66669L 2.66667,4L 2.28484e-007,1.33331 Z " 
                                              HorizontalAlignment="Stretch" 
                                              VerticalAlignment="Stretch"/>
                                    </Button>
                                </Grid>
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter TargetName="Border" Property="BorderBrush"  Value="{StaticResource ButtonBorderBrush}"/>
                                    <Setter TargetName="Border" Property="BorderThickness" Value="2,2,2,0"/>
                                    <Setter TargetName="PART_Close" Property="Visibility" Value="Visible"/>
                                </Trigger>
                                <Trigger Property="IsSelected" Value="True">
                                    <Setter TargetName="Border" Property="Background" Value="{StaticResource EnvLayout}"/>
                                    <Setter Property="Foreground" Value="#FFFFFF"/>
                                    <Setter TargetName="PART_Close" Property="Visibility" Value="Visible"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

My problem is focused on IsMouseOver trigger; when a tab is not selected, in fact, this event is fired only when the cursor is over the Header of the TabItem ( defined within the ContentTemplate) and not at any point of the Border.

In order to better explain my problem, following some screenshots:

When IsMouseOver = true my TabItem must have a gray border and the close button has to appear; as you can see in the following images, this behaviour appens only when my cursor is exactly over the Header:

Obviously, when the cursor isn't over the Header,you cannot even select the Tab.

How can I solve this problem??

Thanks in advance for your help,

Deborah

Answer 1

I've had a similar issue recently,

Try changing your

<ControlTemplate TargetType="{x:Type TabItem}">
  <Border Name="Border" Margin="1,-1,-1,-1">

to

<ControlTemplate TargetType="{x:Type TabItem}">
  <Border Name="Border" Margin="1,-1,-1,-1" Background="Transparent">

It's seemed like if a default value for the background is not set, only rendered area respond to state triggers