Animation in XAML (Part 4)

November 22, 2013

Introduction

Following on from http://pmichaelsdev.wordpress.com/2013/11/18/animation-in-xaml-part-3/ this post is about achieving the simultaneous effect of spinning and disappearing. I thought I’d also use it to list a few other animations and how to achieve them. They’re all variations on a theme to be honest, but I’ll try to list as many as may be useful.

A word of note: most of the animations will be on buttons, but I’m not aware of any restrictions as to the target (it can be any UI Element). Also, the code listed is all based on a button event; again, this can be any event that makes sense… or even one that doesn’t. For example; try the spin and disappear on MouseOver!

Spin And Disappear

Code behind:


             Button b = (Button)SpinAndDisappear;
           
            DoubleAnimation da = new DoubleAnimation (b.Width, 0, TimeSpan.FromSeconds(.5));
            b.BeginAnimation( Button.WidthProperty, da);

            DoubleAnimation da2 = new DoubleAnimation (b.Height, 0, TimeSpan.FromSeconds(.5));
            b.BeginAnimation( Button.HeightProperty, da2);

            DoubleAnimation da3 = new DoubleAnimation (0, 360, TimeSpan.FromSeconds(.5));           
            RotateTransform transform = (RotateTransform )b.RenderTransform;
            transform.BeginAnimation( RotateTransform.AngleProperty, da3 );

XAML:

Fade

Code behind:


             Button b = ( Button)Fade;

            DoubleAnimation da = new DoubleAnimation (b.Opacity, 0, TimeSpan.FromSeconds(.5));
            b.BeginAnimation(Button.OpacityProperty, da);

Highlight The Current Textbox (Border Animation)

This is a nice little effect: when the user hovers the mouse over the textbox, the border is animated to make it stand out.

XAML:

Code behind:


         private void border\_MouseEnter( object sender, RoutedEventArgs e)
        {
            TextBox t = ( TextBox)border;
            ThicknessAnimation ta = new ThicknessAnimation (new Thickness (3), TimeSpan.FromSeconds(.3));
            t.BeginAnimation( TextBox.BorderThicknessProperty, ta);
        }

        private void border\_MouseLeave( object sender, MouseEventArgs e)
        {
            TextBox t = ( TextBox)border;
            ThicknessAnimation ta = new ThicknessAnimation (new Thickness (1), TimeSpan.FromSeconds(.3));
            t.BeginAnimation( TextBox.BorderThicknessProperty, ta);

        }

As a minor (and obvious caveat): make sure that the starting width is the same as that on MouseLeave.

Conclusion

That’s all the animations and effects that I could think of. If you know of, or can come up with any more then if you eitjer add them in the comments, or contact me (www.twitter.com/paul\_michaels or [email protected]) and I’ll add them in.

In the next (and final) post, I’ll focus on the differences in WinRT / Windows Phone 8.