CODEWITHSUNDEEP
wpfmahapps.metro
IlDrugo
IlDrugo

Reputation: 2069

How to change the TabItem color when mouse is over?

I'm using MahApp, I've created the following TabControl:

<TabControl TabStripPlacement="Left" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0">
<TabItem>
    <TabItem.Header>
        <Image Source="Images/Icon.png"></Image>
    </TabItem.Header>
    <TabItem.Content>
            <Grid>
                <Controls:Scheduler x:Name="Scheduler"/>
            </Grid>
    </TabItem.Content>
</TabItem>
</TabControl>

How can I handle the MouseOver event and change the color? Actually if I pass the mouse over the TabItem the user don't understand if the TabItem is clickable or not. Thanks in advance.

Upvotes: 2

Views: 3445

Answers (1)

d.moncada
d.moncada

Reputation: 17402

You can add a TabItem Style as part of the TabControl. The Style will trigger based on MouseOver.

<TabControl TabStripPlacement="Left" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0">
    <TabControl.Resources>
        <Style TargetType="{x:Type TabItem}">
            <Setter Property="Width" Value="Auto"/>
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="Height" Value="Auto"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TabItem">
                        <Border Name="Border" Background="Transparent">
                            <ContentPresenter x:Name="ContentSite"
                                VerticalAlignment="Center"
                                HorizontalAlignment="Left"
                                ContentSource="Header"
                                Margin="10,2"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True" SourceName="Border">
                                <Setter TargetName="Border" Property="Background" Value="Blue" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </TabControl.Resources>
    <TabItem>
        <TabItem.Header>
            <Image Source="Images/Icon.png"></Image>
        </TabItem.Header>
        <TabItem.Content>
            <Grid>

            </Grid>
        </TabItem.Content>
    </TabItem>
</TabControl>

Edit: If you want the color to persist when TabItem is selected, add this to the ControlTemplate.Triggers

            <Trigger Property="IsSelected" Value="True">
                <Setter TargetName="Border" Property="Background" Value="Blue" />
            </Trigger>

Upvotes: 6

Related Questions