当我将鼠标悬停在按钮上时，如何使按钮中的内容在 WPF 中移动位置？

Question

当我将鼠标悬停在 WPF (C#) 中的按钮上时，我希望按钮中的文本作为动画向上移动到不同的位置，从按钮的中心到顶部。

我目前有该样式的 XAML 代码：

<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"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="Black"/>
            </Trigger>
            <Trigger Property="IsPressed" Value="True">
                <Setter Property="Background" Value="Black"/>
            </Trigger>
            <EventTrigger RoutedEvent="MouseEnter">
                <BeginStoryboard>
                    <Storyboard >
                        <DoubleAnimation Storyboard.TargetProperty="VerticalContentAlignment" To="Top" Duration="0:0:1" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Style.Triggers>

    </Style>

问题是在 DoubleAnimation （在 StoryBoard 中）中，To="Top" 不起作用，因为它只需要一个双精度值，我也尝试过更改边距，以使整个按钮向上移动，但是也不行。感谢您的帮助。

Answer 1

    <Window.Resources>
        <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="contentMove"  X="0" Y="0"/>
                                </ContentPresenter.RenderTransform>
                            </ContentPresenter>
                        </Border>
                        <ControlTemplate.Triggers>
                            <EventTrigger RoutedEvent="MouseEnter">
                                <BeginStoryboard>
                                    <Storyboard >
                                        <DoubleAnimation Storyboard.TargetName="contentMove"
                                             Storyboard.TargetProperty="X"
                                             To="-10" Duration="0:0:1" />
                                        <DoubleAnimation Storyboard.TargetName="contentMove"
                                             Storyboard.TargetProperty="Y"
                                             To="-10" Duration="0:0:1" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                            <EventTrigger RoutedEvent="MouseLeave">
                                <BeginStoryboard>
                                    <Storyboard >
                                        <DoubleAnimation Storyboard.TargetName="contentMove"
                                             Storyboard.TargetProperty="X"
                                             To="0" Duration="0:0:1" />
                                        <DoubleAnimation Storyboard.TargetName="contentMove"
                                             Storyboard.TargetProperty="Y"
                                             To="0" Duration="0:0:1" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <!--<Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="Black"/>
                </Trigger>
                <Trigger Property="IsPressed" Value="True">
                    <Setter Property="Background" Value="Black"/>
                </Trigger>-->
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>
        <Button Padding="5"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Style="{DynamicResource MyButton}">
            <Border BorderThickness="2" BorderBrush="Green"
                    Width="50" Height="50"/>
        </Button>
    </Grid>