开发者

How to create "hovering" buttons in Silverlight?

I saw a Silverlight effect the other that I quite liked, and I was wondering how to reproduce it. The main screen of the app had 5 or 6 large buttons that were gently moving up and down a few pixels, as if th开发者_高级运维ey were hovering.

Could someone provide me with some XAML to achieve this effect?


With a blank usercontrol and one button called button:

<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>

Code behind:

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();
    }
}

You could tweak the easing times and values to change the speed and distance it bobs by, equally you could add an easing to get a nicer bounce effect.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜