WPF鼠标悬停时按钮内容上移动画实现问题求助

问题核心在于VerticalContentAlignment是枚举类型，而DoubleAnimation仅能作用于数值类型的依赖属性，因此直接动画该属性无效。我们可以通过给按钮内容添加**平移变换（TranslateTransform）**来实现平滑的文本上移动画，具体修改如下：

<Style TargetType="Button" x:Key="MyButton">
    <Setter Property="FontFamily" Value="Segoe"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Foreground" Value="#c6c6c6"/>
    <Setter Property="FontSize" Value="45"/>
    <Setter Property="Margin" Value="10"/>
    <Setter Property="Width" Value="250"/>
    <Setter Property="Height" Value="80"/>

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Background="{TemplateBinding Background}">
                    <!-- 为内容添加平移变换，用于实现移动动画 -->
                    <ContentPresenter HorizontalAlignment="Center"
                                      VerticalAlignment="Center">
                        <ContentPresenter.RenderTransform>
                            <TranslateTransform x:Name="ContentTransform" Y="0"/>
                        </ContentPresenter.RenderTransform>
                    </ContentPresenter>
                </Border>
                <!-- 定义动画资源 -->
                <ControlTemplate.Resources>
                    <Storyboard x:Key="MoveUpStoryboard">
                        <!-- 动画平移Y值，从中心(0)上移到顶部附近，数值可按需调整 -->
                        <DoubleAnimation Storyboard.TargetName="ContentTransform"
                                         Storyboard.TargetProperty="Y"
                                         To="-25"
                                         Duration="0:0:0.3"
                                         FillBehavior="HoldEnd"/>
                    </Storyboard>
                    <Storyboard x:Key="MoveBackStoryboard">
                        <!-- 鼠标离开时恢复到中心位置 -->
                        <DoubleAnimation Storyboard.TargetName="ContentTransform"
                                         Storyboard.TargetProperty="Y"
                                         To="0"
                                         Duration="0:0:0.3"
                                         FillBehavior="HoldEnd"/>
                    </Storyboard>
                </ControlTemplate.Resources>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="Black"/>
                        <Trigger.EnterActions>
                            <BeginStoryboard Storyboard="{StaticResource MoveUpStoryboard}"/>
                        </Trigger.EnterActions>
                        <Trigger.ExitActions>
                            <BeginStoryboard Storyboard="{StaticResource MoveBackStoryboard}"/>
                        </Trigger.ExitActions>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter Property="Background" Value="Black"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

关键修改说明： #

• 平移变换实现动画：给ContentPresenter添加TranslateTransform，通过修改其Y属性（数值类型）实现内容垂直移动，适配DoubleAnimation的平滑动画特性。
• 双向动画逻辑：在IsMouseOver触发器的EnterActions和ExitActions中分别绑定动画，实现鼠标悬停时文本上移，离开时自动恢复到中心位置。
• 可自定义参数：To="-25"是文本上移的距离，可根据按钮高度、字体大小调整数值，让文本刚好对齐按钮顶部；Duration控制动画时长，按需修改即可。

内容的提问来源于stack exchange，提问作者Oliver Hill