WPF：如何通过样式实现含SVG图片按钮的颜色动画

要实现内嵌SVG的Button颜色动画，核心是把SVG的Brush和Button的可绑定属性关联起来，避免深层元素定位的问题，具体步骤如下：

1. 修改Button内的SVG Drawing代码 #

把GeometryDrawing的Brush绑定到Button的Foreground属性，让Style能统一控制颜色：

<Button Background="Transparent"
        BorderThickness="0"
        Style="{StaticResource VideoControl}"
        Foreground="White"> <!-- 设置默认颜色 -->
    <Image>
        <Image.Source>
            <DrawingImage>
                <DrawingImage.Drawing>
                    <DrawingGroup ClipGeometry="M0,0 V29 H26 V0 H0 Z">
                        <DrawingGroup.Children>
                            <!-- 绑定Brush到Button的Foreground -->
                            <GeometryDrawing Brush="{Binding Foreground, RelativeSource={RelativeSource AncestorType=Button}}" 
                                             Geometry="F1 M26,29z M0,0z M24,11.0359C26.6667,12.5755,26.6667,16.4245,24,17.9641L6.75,27.9234C4.08334,29.463,0.75,27.5385,0.75,24.4593L0.75,4.54071C0.75,1.46151,4.08333,-0.462994,6.75,1.07661L24,11.0359z" />
                        </DrawingGroup.Children>
                    </DrawingGroup>
                </DrawingImage.Drawing>
            </DrawingImage>
        </Image.Source>
    </Image>
</Button>

2. 完善Style的动画逻辑 #

直接针对Button的Foreground.Color属性做动画，同时补充鼠标离开时的还原动画，让交互更完整：

<Style TargetType="Button" x:Key="VideoControl">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="Focusable" Value="False"/>
    <Setter Property="OverridesDefaultStyle" Value="True"/>
    <!-- 设置默认Foreground颜色，和Button里的默认值保持一致 -->
    <Setter Property="Foreground" Value="White"/>

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Name="border" 
                        Padding="0"
                        Background="{TemplateBinding Background}">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>

    <Style.Triggers>
        <!-- 鼠标悬停时的颜色过渡 -->
        <Trigger Property="IsMouseOver" Value="True">
            <Trigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimation
                            Storyboard.TargetProperty="Foreground.Color"
                            To="#F0AD2B"
                            Duration="0:0:0.2"/>
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.EnterActions>
            <!-- 鼠标离开时还原颜色 -->
            <Trigger.ExitActions>
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimation
                            Storyboard.TargetProperty="Foreground.Color"
                            To="White"
                            Duration="0:0:0.2"/>
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.ExitActions>
        </Trigger>
    </Style.Triggers>
</Style>

原理说明 #

通过把SVG内部的Brush绑定到Button的Foreground属性，我们把深层元素的颜色控制权转移到Button本身的属性上，这样Style里的动画就可以直接作用于这个全局属性，不用复杂的路径定位，同时保证了Style的可复用性——所有使用该Style且内部SVG Brush绑定到Foreground的Button，都会自动拥有这个颜色动画效果。

内容的提问来源于stack exchange，提问作者Mr. Schrödinger