Setting HotTracking for a tab control

Question

I am attempting to implement HotTracking for a tab control in Wpf. My understanding is this was not included in the wpf tabcontrol and I would like to use it.

For my benefit HotTracking = When mouseover an unselected tab the tab will change color(usually to something between selected and not selected)

I used a bit of my own knowledge and this post How to set MouseOver event/trigger for border in XAML? but I can't seem to make it work.

This is everything.

<Window x:Class="TestingWpF.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="1024" Width="1280">
<Window.Resources>
    <Style TargetType="{x:Type TabItem}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Grid>
                        <Border 
                            Name="Border"
                            CornerRadius="6,6,0,0" >
                            <ContentPresenter x:Name="ContentSite"
                            VerticalAlignment="Center"
                            HorizontalAlignment="Center"
                            ContentSource="Header"
                            Margin="12,2,12,2"/>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter TargetName="Border" Property="Background" Value="LightBlue" />
                        </Trigger>
                        <Trigger Property="IsSelected" Value="False">
                            <Setter TargetName="Border" Property="Background" Value="AliceBlue" />
                        </Trigger>
                        <Trigger Property=" Border.IsMouseOver" Value="True">
                            <Setter Property="Border.Background" Value="Green" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>


<Grid>
    <TabControl Grid.ColumnSpan="2" Grid.RowSpan="2" Height="309" HorizontalAlignment="Left" Name="tabControl1" VerticalAlignment="Top" Width="781" Padding="0">
        <TabItem Header="tabItem1" >

        </TabItem>
        <TabItem Header="tabItem2" >

            </TabItem>
     </TabControl>
    </Grid>
</Window>

General Grey · Accepted Answer · 2012-05-14T14:21:12.413

2

I figured it out, my problem was this section

<Trigger Property="IsSelected" Value="True">
   <Setter TargetName="Border" Property="Background" Value="LightBlue" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
  <Setter TargetName="Border" Property="Background" Value="AliceBlue" />
</Trigger>
<Trigger Property=" Border.IsMouseOver" Value="True">
//Change this line 
//<Setter Property="Border.Background" Value="Green" />    
//To This
  <Setter TargetName="Border" Property="Background" Value="Green" />
</Trigger>

The last Trigger was the one not working. And if you notice I used different properties in the setter. I changesd it to match the other two and it worked

edited May 14 '12 at 14:21

answered May 14 '12 at 13:20

General Grey

3,598
2
25
32

@Blam I didn't modify the code in the answer, I was simply explaining where to look. I will change it, as to avoid confusion. – General Grey May 14 '12 at 14:20
Nice one, but I preferred setting BorderBrush like here: to avoid background flickering while moving the mouse – Andrea Antonangeli Aug 06 '17 at 15:04

Setting HotTracking for a tab control

1 Answers1