Color transitions and rotation in WPF - C#
All tutorials created in C# to be posted in here.
1 post
Page 1 of 1
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
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.
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.
The code is almost the same for the next 2 color animations.
Then we setup our DoubleAnimation which will smoothly increase the Angle property of the RotationTransform to 360. This simulates one full rotation.
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
It is obvious what does what, only the RotateTransform might be a bit 'unclear'. It renders element on the screen using rotation. 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();
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
I added comments so you can see whats going on. 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);
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
Then it sets the target and the target property of the animation. 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));
The code is almost the same for the next 2 color animations.
Code: Select all
The last animation goes back to the starting color Silver. 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));
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
Finally we can add each animation to the storyboard, set it to repeat forever, and wait for the user to click the start button.
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));
Code: Select all
The button code is
story.Children.Add(rotationAnimation);
story.Children.Add(colorAnimation);
story.Children.Add(colorAnimation2);
story.Children.Add(colorAnimation3);
story.RepeatBehavior = RepeatBehavior.Forever;
}
Code: Select all
The complete project is below if something went wrong. 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;
}
}
}
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]()
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](http://mc2.ownagehosting.com/index.php?r=status/19.png)
1 post
Page 1 of 1
Copyright Information
Copyright © Codenstuff.com 2020 - 2023