Color transitions and rotation in WPF - C#

All tutorials created in C# to be posted in here.
1 post Page 1 of 1
Contributors
User avatar
MrAksel
C# Coder
C# Coder
Posts: 1758
Joined: Fri Mar 26, 2010 12:27 pm

The Windows Presentation Foundation (WPF) is an absolutely fantastic way to view cool effects on windows. It does not use GDI, but renders directly with DirectX that is compatible with the Desktop Window Manager (DWM).
This will cover smooth color transitions and rotation of UIElements.

When working with animations in WPF, you store the animations in a Storyboard. You can set the begin time of each animation, the duration, the value it will change to and the value it starts from. There are many more properties too.
Create your WPF Application, not Windows Forms Application, and wait for it to load. When your MainWindow designer has loaded, add 1 button and 1 textbox. You will notice the toolbox is different. These are the only controls you can use in WPF, you cannot use any of the WinForms controls.
Set the width and height of both the button and the textbox to 100 and 23 respectively. Double-click your button to bring up the code view. Add these 7 variables inside your class
Code: Select all
        private SolidColorBrush bgBrush = new SolidColorBrush(Colors.Silver);
        private ColorAnimation colorAnimation = new ColorAnimation();
        private ColorAnimation colorAnimation2 = new ColorAnimation();

        private ColorAnimation colorAnimation3 = new ColorAnimation();
        private RotateTransform rotationTransform = new RotateTransform();

        private DoubleAnimation rotationAnimation = new DoubleAnimation();

        private Storyboard story = new Storyboard();
It is obvious what does what, only the RotateTransform might be a bit 'unclear'. It renders element on the screen using rotation.
Then type in 'Public Sub New()' and press enter. Beneath the 'InitializeComponent()' call, we will set the BackgroundBrush property of the Window, set the RenderTransform property of the button and textbox, register names, setup our animations and create our storyboard.
Code: Select all
        public MainWindow()
        {
            // This call is required by the designer.
            InitializeComponent();

            // Add any initialization after the InitializeComponent() call.

            //Sets the background brush as the windows background
            //Sets the render transformation for the button and the textbox
            this.Background = bgBrush;
            Button1.RenderTransform = rotationTransform;
            TextBox1.RenderTransform = rotationTransform;

            //registers the names of the targets
            this.RegisterName("MyAnimatedBrush", bgBrush);
            this.RegisterName("MyAnimatedTransform", rotationTransform);
I added comments so you can see whats going on.

Next we will create our first color animation. First it sets the target color to DeepSkyBlue. It sets the duration, and the time at which the animation begins.
Code: Select all
            colorAnimation.To = Colors.DeepSkyBlue;
            colorAnimation.Duration = TimeSpan.FromSeconds(1);
            colorAnimation.BeginTime = TimeSpan.FromSeconds(0);
            Storyboard.SetTargetName(colorAnimation, "MyAnimatedBrush");
            Storyboard.SetTargetProperty(colorAnimation, new PropertyPath(SolidColorBrush.ColorProperty));
Then it sets the target and the target property of the animation.

The code is almost the same for the next 2 color animations.
Code: Select all
            colorAnimation2.To = Colors.Yellow;
            colorAnimation2.Duration = TimeSpan.FromSeconds(1);
            colorAnimation2.BeginTime = TimeSpan.FromSeconds(1);
            Storyboard.SetTargetName(colorAnimation2, "MyAnimatedBrush");
            Storyboard.SetTargetProperty(colorAnimation2, new PropertyPath(SolidColorBrush.ColorProperty));

            colorAnimation3.To = Colors.Silver;
            colorAnimation3.Duration = TimeSpan.FromSeconds(1);
            colorAnimation3.BeginTime = TimeSpan.FromSeconds(2);
            Storyboard.SetTargetName(colorAnimation3, "MyAnimatedBrush");
            Storyboard.SetTargetProperty(colorAnimation3, new PropertyPath(SolidColorBrush.ColorProperty));
The last animation goes back to the starting color Silver.

Then we setup our DoubleAnimation which will smoothly increase the Angle property of the RotationTransform to 360. This simulates one full rotation.
Code: Select all
            rotationAnimation.From = 0;
            rotationAnimation.To = 360.0;
            rotationAnimation.Duration = TimeSpan.FromSeconds(3);
            rotationTransform.CenterX = 50;
            rotationTransform.CenterY = 11.5;
            Storyboard.SetTargetName(rotationAnimation, "MyAnimatedTransform");
            Storyboard.SetTargetProperty(rotationAnimation, new PropertyPath(RotateTransform.AngleProperty));
Finally we can add each animation to the storyboard, set it to repeat forever, and wait for the user to click the start button.
Code: Select all
            story.Children.Add(rotationAnimation);
            story.Children.Add(colorAnimation);
            story.Children.Add(colorAnimation2);
            story.Children.Add(colorAnimation3);

            story.RepeatBehavior = RepeatBehavior.Forever;
        }
The button code is
Code: Select all
        private bool running = false;

        private bool hasPaused = false;
        private void Button1_Click(object sender, RoutedEventArgs e)
        {
            if (!running)
            {
                story.Begin(this, true);
                running = true;
            }
            else
            {
                if (!hasPaused)
                {
                    story.Pause(this);
                    hasPaused = true;
                }
                else
                {
                    story.Resume(this);
                    hasPaused = false;
                }
            }
        }
The complete project is below if something went wrong.
You do not have the required permissions to view the files attached to this post.
LMAOSHMSFOAIDMT
Laughing my a** of so hard my sombrero fell off and I dropped my taco lmao;


Over 30 projects with source code!
Please give reputation to helpful members!

Image
Image
1 post Page 1 of 1
Return to “C-Sharp Tutorials”