How to change the Header image of TabItem through MouseOver?

Question

I've a TabControl like this:

<TabControl>
<TabItem Header="playing" HorizontalAlignment="Left" Width="150" Tag="Tab1">
     <TabItem.HeaderTemplate>
         <DataTemplate>
             <StackPanel Orientation="Horizontal">
                 <TextBlock Text="{Binding}" ToolTip="playing" />
                  <Image Margin="10,0,0,0" Source="/logo.png" Height="25"/>
             </StackPanel>
         </DataTemplate>
    </TabItem.HeaderTemplate>
</TabItem> 
  ...

In this TabControl I've three different TabItem, each tab item have a default image. My goal is to change the image TabItem where the user has positioned the mouse.

So in this case the TabItem 1 with ToolTip "playing" instead of logo.png should have logo2 when the mouse is over this tab item.

How can I do this?

Note: Please, note that I'm using mahapp, and I'm using a DataTemplate for keep the tooltip text without override the original style of mahapp tab item.

Answer 1

Try this:

XAML:

<Controls:MetroWindow
                  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                  xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls"
                  xmlns:local="clr-namespace:MahApps.Metro.Application21" 
                  x:Class="MahApps.Metro.Application21.MainWindow"
                  BorderThickness="1"
                  BorderBrush="{DynamicResource AccentColorBrush}"
                  Icon="mahapps.metro.logo2.png"
                  Title="MainWindow"
                  Height="350"
                  Width="525">
<Controls:MetroWindow.Resources>

    <DataTemplate x:Key="DataTemplate1">
        <StackPanel x:Name="Panel1" Orientation="Horizontal">
            <TextBlock Text="{Binding Text}" ToolTip="{Binding Text}" />
            <Image x:Name="Image1" Source="{Binding Logo}" Margin="10,0,0,0" Height="25"/>
        </StackPanel>
        <DataTemplate.Triggers>
            <Trigger SourceName="Panel1" Property="IsMouseOver" Value="true" >
                <Setter TargetName="Image1" Property="Source" Value="logo4.png" />
            </Trigger>
        </DataTemplate.Triggers>
    </DataTemplate>

</Controls:MetroWindow.Resources>

<Controls:MetroWindow.DataContext>
    <local:MyViewModel/>
</Controls:MetroWindow.DataContext>

<Grid>
    <TabControl ItemsSource="{Binding Data}" ItemTemplate="{StaticResource DataTemplate1}">
    </TabControl>
</Grid>

ViewModel:

public class MyViewModel
{
    public ObservableCollection<MyData> Data { get; set; }

    public MyViewModel()
    {
        Data = new ObservableCollection<MyData>
        {
            new MyData {Logo = "logo1.png", Text = "playing 1" },
            new MyData {Logo = "logo2.png", Text = "playing 2" },
            new MyData {Logo = "logo3.png", Text = "playing 3" }
        };
    }
}