Creating Animated Gradient in Windows Store App Without Using ColorAnimation

• Download source - 1.8 KB

Introduction

Most of us are familiar with Linear Gradients in WPF or Windows Store Apps. Gradients give a more beautiful appearance to our controls by specifying multiple colors as background or foreground. But instead of keeping the gradients static, we can enhance the appearance of our apps by creating animated gradients. One way of achieving this is by using StoryBoard and ColorAnimation. Another approach is to use a DispatcherTimer. In this relatively short tip, I have attempted to explain creating such dynamic gradients using a DispatcherTimer.

Background

In this tip, I have demonstrated the concept of animated gradients by creating a very simple Windows Store App, which consists of a Rectangle, an Ellipse and a TextBlock. There are two button controls which can be used to start and stop the animation. In addition, there is a slider control to control the speed of animation.

I have tried to keep the program as generic as possible so that even if the LinearGradientBrush resource is modified in the XAML markup code, there is no change required in the business logic code.

Using the Code

Following is the XAML (markup) code for the app.

The above code is self explanatory. A LinearGradientBrush is created as a Page resource. The LinearGradientBrush defines six GradientStop objects for colors ranging from Red to Blue.

Then a Rectangle and an Ellipse are created, which use the LinearGradientBrush resource as background using the Fill property. A TextBlock control is created which uses the same resource as the Foreground. Similarly, there are two Button controls which use the same resource as the Background. A slider is used to control the speed of animation.

There are three class level variables declared as follows:

LinearGradientBrush brush;
Windows.UI.Color[] colors;
DispatcherTimer timer;

The variables are initialized in the Loaded event of the page as follows:

private void Page_Loaded_1(object sender, RoutedEventArgs e)
{
	brush = (LinearGradientBrush)this.Resources
	["MyGradient"];		// Retrieving the LinearGradientBrush resource
	colors = new Windows.UI.Color
	[brush.GradientStops.Count];	// Specifying the size of the colors array
	for (int ctr = 0; ctr < 
	brush.GradientStops.Count; ctr++) // Initializing the colors array
	{
		colors[ctr] = brush.GradientStops[ctr].Color;
	}
	timer = new DispatcherTimer();	// Creating a timer for the animation
	timer.Interval = TimeSpan.FromSeconds(0.1);	// Specifying the default speed 
					// of the animation as 0.1 seconds
	timer.Tick += timer_Tick;	// Specifying the event handler for the timer
	timer.Start();				// Starting the animation
	speedSlider.Value = 10;		// Setting the slider
}

The following code in the tick event of the timer performs the animation:

void timer_Tick(object sender, object e)
{
	Windows.UI.Color tempcolor = colors[0]; // Store the first color
	for (int ctr = 0; ctr < brush.GradientStops.Count; ctr++)// Repeat for all colors
	{
		if (ctr == brush.GradientStops.Count - 1)
		{
			colors[ctr] = tempcolor;// If it is the last color go to the first color
		}
		else
		{
			colors[ctr] = colors[ctr + 1];	// else go to the next color
		}
		brush.GradientStops[ctr].Color = colors[ctr];// Update the GradientStop
	}
}

The following code in the ValueChanged event of the slider is used to change the speed of animation.

private void speedSlider_ValueChanged_1(object sender, RangeBaseValueChangedEventArgs e)
{
	timer.Interval = TimeSpan.FromSeconds(speedSlider.Value / 100);
}

The animation can be started and stopped by the following click events of Buttons:

private void btnStart_Click_1(object sender, RoutedEventArgs e)
{
	timer.Start();
}

private void btnStop_Click_1(object sender, RoutedEventArgs e)
{
	timer.Stop();
}

Points of Interest

I hope this approach of Gradient Animation will be appreciated by the readers as it provides an alternative to the traditional StoryBoard and ColorAnimation approach.