如何通过 MouseOver 改变 TabItem 的 Header 图片？

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 "playing" 而不是 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>

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

如何通过 MouseOver 改变 TabItem 的 Header 图片？

How to change the Header image of TabItem through MouseOver?

c#

wpf

xaml

mahapps.metro