Storyboards are Silverlight entities that are used for describing the animations of various dependency and attached properties. They consist of one or several animation entities each one of which is dedicated to animating just one dependency property. This section gives an overview of storyboard and animation functionality.
Adding a rotation animation to our code
We are about to make this rectangle rotate by changing the dependency property, that is, RotationAngle
using a storyboard.
The storyboard can be created as the page's resource by adding the following XAML code above the <Grid x:Name="LayoutRoot" …>
line:
Once this storyboard runs, it will change the RotationAngle
property on the visual element called TheSpinningControl
from 0 to 360 over a period of 1 second and then continue repeating the same change forever, which will result in a rotating rectangle.
The only thing remaining is to start the storyboard based on some event.
We are going to add a button at the bottom of the window, which when clicked will start the rotation. Here is the code we need to add to our XAML file under the </SpinningControl>
end tag in order to create the button:
It would be easy to get the reference to the button, within the MainPage.xaml.cs
(code-behind) file and add a handler to the button's Click
event to pull the storyboard out of the page's resource and start it. However, we do not want to split the button click action triggering a storyboard from the XAML code which defines both the button and the storyboard. This is where MS Expression Blend SDK, mentioned in the Preface, comes in handy.
MS Expression Blend SDK does not require having MS Expression Blend installed. It is simply a number of free and redistributable DLLs that make Silverlight/WPF programming easier.
One can download MS Expression Blend SDK using the URL specified in the Preface, or simply use the two files, Microsoft.Expression.Interactions.dll
and System.Windows.Interactivity.dll
, that come with our code. These files are located in the MSExpressionBlendSDKDlls
folder and you need to add references to them in our SpinningControlSample
project. MS Expression Blend SDK allows us to connect the Click
button event to the ControlStoryboardAction
functionality that starts the animation without any C# code. Also, we can disable the button once it is clicked, by using MS Expression Blend SDK's ChangePropertyAction
object.
Add the following namespace reference to the <UserControl…
tag at the top of the MainPage.xaml
file:
Now we can use i:
and se:
prefixes to access the MS Expression Blend functionality within XAML.
To start the storyboard on a button click, add the following XAML code between the button's start and end tags:
You can run the sample now. Once you click the button, the orange rectangle in the middle starts rotating and the button gets disabled: