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.
精彩评论