如何通過鼠標懸停更改 TabItem 的標題圖像？

Question

我有一個這樣的TabControl ：

<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> 
  ...

在這個TabControl我有三個不同的 TabItem，每個選項卡項都有一個默認圖像。 我的目標是更改用戶放置鼠標的圖像 TabItem。

因此，在這種情況下，當鼠標懸停在此選項卡項目上時，帶有ToolTip “播放”而不是logo.png的 TabItem 1 應該具有logo2 。

我怎樣才能做到這一點？

注意：請注意，我正在使用 mahapp，並且我正在使用DataTemplate來保留工具提示文本，而不會覆蓋 mahapp 選項卡項的原始樣式。

Answer 1

嘗試這個：

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>

視圖模型：

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" }
        };
    }
}