Question

WPF中是否有某些内容可以让按钮部分弹出屏幕？就像我在使用JQuery的网站上所做的那样。

部分按钮会弹出：

######################################
#utton||                             #
#                                    #
#utton||                             #
#                                    #
#                                    #
#                                    #
#                                    #
#                                    #
#                                    #
######################################

然后，当我按下按钮时，它会滑出：

######################################
#|| My Button||                      #
#                                    #
#utton||                             #
#                                    #
#                                    #
#                                    #
#                                    #
#                                    #
#                                    #
######################################

我似乎无法找到实现此方法的好方法，因为它似乎不适用于基本的WPF控件。

Answer 1

您可能希望使用TranslateTransform，并为其X属性设置动画。给它一个初始的负值，然后在鼠标悬停时将它设置为零。

所以你应该有这样的东西：

<Button Content="MyButton">
    <Button.RenderTransform>
        <TranslateTransform x:Name="translate" X="-20" />
    </Button.RenderTransform>
</Button>

然后，使用您的首选方法（EventTrigger，VisualState等）为(TranslateTransform.X)设置动画。以下是使用事件触发器的示例：

<Button Content="MyButton">
    <Button.RenderTransform>
        <TranslateTransform x:Name="translate" X="-20" />
    </Button.RenderTransform>
    <Button.Triggers>
        <EventTrigger RoutedEvent="MouseEnter">
            <BeginStoryboard>
                <Storyboard Duration="0:0:0.3">
                    <DoubleAnimation Storyboard.TargetName="translate" 
                                     Storyboard.TargetProperty="X"
                                     To="0">
                        <DoubleAnimation.EasingFunction>
                            <CubicEase />
                        </DoubleAnimation.EasingFunction>
                    </DoubleAnimation>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        <EventTrigger RoutedEvent="MouseLeave">
            <BeginStoryboard>
                <Storyboard Duration="0:0:0.3">
                    <DoubleAnimation Storyboard.TargetName="translate" 
                                     Storyboard.TargetProperty="X"
                                     To="-20">
                        <DoubleAnimation.EasingFunction>
                            <CubicEase />
                        </DoubleAnimation.EasingFunction>
                    </DoubleAnimation>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Button.Triggers>
</Button>

滑动按钮动画

1 个答案: