如何在 Silverlight 中创建“悬停”按钮？答案

【问题标题】：How to create "hovering" buttons in Silverlight?如何在 Silverlight 中创建“悬停”按钮？
【发布时间】：2010-01-19 23:13:16
【问题描述】：

我看到了另一个我非常喜欢的 Silverlight 效果，我想知道如何重现它。应用程序的主屏幕上有 5 或 6 个大按钮，它们轻轻地上下移动几个像素，就好像它们在悬停一样。

有人可以提供一些 XAML 来实现这个效果吗？

【问题讨论】：

您是否有该应用的链接，以便我们确切知道您在说什么？
它实际上是针对 WPF 应用程序的，但我认为 Silverlight 也可以这样做。它被称为“Silicon Studio Software Demo”，你应该可以用 google 找到它（目前互联网访问受限，抱歉！）

标签： silverlight

【解决方案1】：

有一个空白的用户控件和一个称为按钮的按钮：

<UserControl.Resources>
    <Storyboard x:Name="sbHover" RepeatBehavior="Forever" AutoReverse="False">
        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="button" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
            <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="00:00:00.4000000" Value="-4"/>
            <EasingDoubleKeyFrame KeyTime="00:00:00.8000000" Value="0"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</UserControl.Resources>
<Button x:Name="button" Height="79" Margin="177,128,236,0" VerticalAlignment="Top" Content="Button" RenderTransformOrigin="0.5,0.5">
    <Button.RenderTransform>
        <TransformGroup>
            <ScaleTransform/>
            <SkewTransform/>
            <RotateTransform/>
            <TranslateTransform/>
        </TransformGroup>
    </Button.RenderTransform>
</Button>

后面的代码：

public partial class MainPage : UserControl
{
    public MainPage()
    {
        // Required to initialize variables
        InitializeComponent();

        this.Loaded +=new System.Windows.RoutedEventHandler(MainPage_Loaded);
    }

    private void MainPage_Loaded(object sender, System.Windows.RoutedEventArgs e)
    {
        sbHover.Begin();
    }
}

您可以调整缓动时间和值来改变其摆动的速度和距离，同样您可以添加缓动以获得更好的反弹效果。

【讨论】：