XAML中通过Style Trigger实现Border悬停时切换Image的问题

问题核心 #

你当前的Image Style里，Trigger监听的是Image自身的IsMouseOver，只有鼠标直接放在Image上才会切换图片。但你要的是鼠标悬停在整个Border区域时就切换Image的Source，所以触发条件完全不匹配。另外，TextBlock和Border的Style继承自Image的Base Style完全没用——不同TargetType的Style继承不会生效，反而把逻辑搞乱了。

方案1：用DataTrigger绑定Border的IsMouseOver #

给Border命名，然后让Image和TextBlock的Trigger绑定到Border的IsMouseOver属性，这样整个Border区域悬停时都会触发状态变化：

<Border Width="200" Height="100" CornerRadius="10" x:Name="RootBorder">
<Border.Resources>
    
    <!-- Image专属样式，绑定Border的IsMouseOver -->
    <Style x:Key="BaseImageStyle" TargetType="Image">       
        <Setter Property="Source" Value="C:\Temp\add_black.png"/>       
        <Style.Triggers>            
            <DataTrigger Binding="{Binding IsMouseOver, ElementName=RootBorder}" Value="True">
                <Setter Property="Source" Value="C:\Temp\add_white.png"/>
            </DataTrigger>                      
        </Style.Triggers>
    </Style>

    <!-- TextBlock专属样式，同样绑定Border的IsMouseOver -->
    <Style x:Key="TextBlockStyle" TargetType="TextBlock">
        <Setter Property="Background" Value="Red"/>
        <Style.Triggers>            
            <DataTrigger Binding="{Binding IsMouseOver, ElementName=RootBorder}" Value="True">
                <Setter Property="Background" Value="Green"/>
                <Setter Property="Foreground" Value="White"/>                   
            </DataTrigger>
        </Style.Triggers>
    </Style>

    <!-- Border自身样式 -->
    <Style TargetType="Border">
        <Setter Property="Background" Value="Yellow"/>
        <Style.Triggers>            
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="Green"/>
                <Setter Property="Cursor" Value="Hand"/>
            </Trigger>
        </Style.Triggers>
    </Style>
    
</Border.Resources>
<Grid Width="180" Height="80">
    <Grid.RowDefinitions>
        <RowDefinition Height="24"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>  
    
    <Image Style="{StaticResource BaseImageStyle}" Grid.Row="0" Height="24"/>

    <TextBlock Style="{StaticResource TextBlockStyle}"
               Grid.Row="2"
               FontFamily="Tahoma"
               FontSize="12"                   
               Width="180"                   
               TextWrapping="Wrap"
               VerticalAlignment="Bottom">        
    Openstaande orders Openstaande orders Openstaande orders Openstaande orders Openstaande
    </TextBlock>
</Grid>    
</Border>

方案2：用VisualStateManager管理状态（更规范） #

如果是自定义控件场景，推荐用VisualStateManager统一管理控件状态，逻辑更清晰：

<Border Width="200" Height="100" CornerRadius="10" x:Name="RootBorder">
    <!-- 定义状态组：正常/鼠标悬停 -->
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="CommonStates">
            <VisualState x:Name="Normal"/>
            <VisualState x:Name="MouseOver">
                <Storyboard>
                    <!-- 切换Image的Source -->
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="AddImage" Storyboard.TargetProperty="Source">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="C:\Temp\add_white.png"/>
                    </ObjectAnimationUsingKeyFrames>
                    <!-- 切换Border背景 -->
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootBorder" Storyboard.TargetProperty="Background">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="Green"/>
                    </ObjectAnimationUsingKeyFrames>
                    <!-- 切换TextBlock的背景和前景 -->
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DescTextBlock" Storyboard.TargetProperty="Background">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="Green"/>
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DescTextBlock" Storyboard.TargetProperty="Foreground">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="White"/>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <Border.Resources>
        <Style TargetType="Border">
            <Setter Property="Background" Value="Yellow"/>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Cursor" Value="Hand"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Border.Resources>

    <Grid Width="180" Height="80">
        <Grid.RowDefinitions>
            <RowDefinition Height="24"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>  

        <Image x:Name="AddImage" Source="C:\Temp\add_black.png" Grid.Row="0" Height="24"/>

        <TextBlock x:Name="DescTextBlock"
                   Grid.Row="2"
                   FontFamily="Tahoma"
                   FontSize="12"                   
                   Width="180"                   
                   TextWrapping="Wrap"
                   VerticalAlignment="Bottom"
                   Background="Red">        
        Openstaande orders Openstaande orders Openstaande orders Openstaande orders Openstaande
        </TextBlock>
    </Grid>    
</Border>

关键修正说明 #

1. 移除了无效的Style继承：TextBlock和Border的Style不再继承Image的Style，不同TargetType的Style继承没有实际作用，只会混淆逻辑。
2. 统一触发条件：让所有子元素的状态变化都绑定到Border的IsMouseOver，确保鼠标悬停在整个Border区域时，所有元素同步切换状态。
3. 两种方案按需选择：DataTrigger适合简单布局快速实现，VisualStateManager适合复杂控件的状态统一管理。

内容的提问来源于stack exchange，提问作者M.A.R.K.Y.G