WPF/XAML中含Image和TextBlock的StackPanel按钮鼠标悬停如何切换图片

问题根源 #

你当前定义的Button样式触发器只能修改Button自身的属性，无法直接作用于Button内容里的Image控件，可通过以下两种常用方案实现悬停切换图片的效果：

方案1：最小改动适配现有代码（适合单按钮场景） #

不需要修改你已定义的mainMenuHomeBtn样式，只需给按钮内部的Image控件增加样式触发器，通过绑定父级Button的状态切换图片源，修改后的按钮代码如下：

<Button Style="{StaticResource mainMenuHomeBtn}">
    <StackPanel
        Orientation="Horizontal"
        HorizontalAlignment="Left">
        <Image Name="hjemImage" Margin="5" Height="30" Source="/Images/fal-home-lg-alt.png">
            <Image.Style>
                <Style TargetType="Image">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType=Button}}" Value="True">
                            <!-- 替换为悬停状态对应的图片路径 -->
                            <Setter Property="Source" Value="/Images/hover-home-icon.png"/>
                        </DataTrigger>
                        <DataTrigger Binding="{Binding IsPressed, RelativeSource={RelativeSource AncestorType=Button}}" Value="True">
                            <!-- 替换为按下状态对应的图片路径 -->
                            <Setter Property="Source" Value="/Images/pressed-home-icon.png"/>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Image.Style>
        </Image>
        <TextBlock Margin="10" VerticalAlignment="Center" Text="Hjem"/>
    </StackPanel>
</Button>

方案2：通用化样式封装（适合多同类按钮场景） #

如果你有多个带图标切换的按钮，可以直接修改mainMenuHomeBtn的控件模板，把图片和文本结构内置到模板中统一管理，修改后的样式代码如下：

<Style x:Key="mainMenuHomeBtn" TargetType="{x:Type Button}">
    <Setter Property="Width" Value="auto"/>
    <Setter Property="Height" Value="auto"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="HorizontalContentAlignment" Value="Left"/>
    <Setter Property="Padding" Value="-2"/>
    <Setter Property="Foreground" Value="#e3e3e3"/>
    <!-- 默认图标路径，也可自定义依赖属性实现多按钮差异化配置 -->
    <Setter Property="Tag" Value="/Images/fal-home-lg-alt.png"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Background="{TemplateBinding Background}" BorderBrush="#cccccc" BorderThickness="0">
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                        <Image x:Name="BtnIcon" Margin="5" Height="30" Source="{TemplateBinding Tag}"/>
                        <TextBlock Margin="10" VerticalAlignment="Center" Text="{TemplateBinding Content}"/>
                    </StackPanel>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Foreground" Value="#696969"/>
                        <Setter Property="Background" Value="#d9d9d9"/>
                        <Setter TargetName="BtnIcon" Property="Source" Value="/Images/hover-home-icon.png"/>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter Property="Background" Value="#e3e3e3"/>
                        <Setter TargetName="BtnIcon" Property="Source" Value="/Images/pressed-home-icon.png"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

修改后按钮调用代码可简化为：

<Button Style="{StaticResource mainMenuHomeBtn}" Content="Hjem"/>

注意事项 #

所有用到的图片资源请确认其「生成操作」属性设置为Resource，避免运行时找不到图片。

内容的提问来源于stack exchange，提问作者Michael Ejvind Therkildsen