Modifying SL Animations Using C# - Page 3
       by kirupa  |  7 November 2008

In the previous page, you looked at your animation in fairly great detail and gave the keyframes responsible for animating your gradient a name - Color0 and Color1. In this page, let's add some code to make all of this work.

Adding the Code
You already have some code already that plays your animation when you click on the button. What we are going to do is modify our code to have a random color be picked when you click on the Randomize Color button instead of having the same animation play just once. Let's do that now.

Open this same project in Visual Studio by going to your Project pane, right-clicking on your solution icon, and selecting Edit in Visual Studio:

[ you can choose to Edit in Visual Studio directly from the project pane ]

A few seconds later, Visual Studio will open. Open Page.xaml.cs inside it, and you will see the following code displayed:

namespace ChangeColorTutorial

{

public partial class Page : UserControl

{

public Page()

{

// Required to initialize variables

InitializeComponent();

}

 

private void RandomizeColors(object sender, RoutedEventArgs e)

{

ChangeColor.Begin();

}

}

}

The RandomizeColors method is the event handler your Button's click event is hooked up to, so each time you click your button, the RandomizeColors method gets called. Currently, your code just plays the ChangeColor storyboard by calling the Begin method on it. We are going to modify this a bit.

Look at your code and add the following lines shown below. You can also just copy everything below and just overwrite everything below your line containing your namespace declaration if you find that easier:

namespace ChangeColorTutorial

{

public partial class Page : UserControl

{

private Random seed;

 

public Page()

{

// Required to initialize variables

InitializeComponent();

}

 

private void RandomizeColors(object sender, RoutedEventArgs e)

{

seed = new Random();

 

Color0.Value = GetRandomColor();

Color1.Value = GetRandomColor();

 

ChangeColor.Begin();

}

 

private Color GetRandomColor()

{

Color newColor = new Color();

 

newColor.A = (byte)255;

newColor.R = (byte)seed.Next(0, 255);

newColor.G = (byte)seed.Next(0, 255);

newColor.B = (byte)seed.Next(0, 255);

 

return newColor;

}

}

}

Once you have copied and pasted the above code, run your app from either inside Visual Studio or Expression Blend by pressing F5. You should not receive any errors, and you will see your app appear as before. The difference is that, when you click (and keep clicking) on your Randomize Color button, your animation plays each time with a different color.

At this point, you have a fully working application that does essentially what you want it to do. There is one more thing left though, and that is seeing why the code works the way it does. We'll do that on the next page.

Onwards to the next page!

1 | 2 | 3 | 4