Creating and using Storyboards in Blend+Silverlight – Part I A storyboard, in a Silverlight application that is created using Blend, is a resource that contains a collection of animations, each of which targets a specific property of a control.
In Blend, animations are based on keyframes defining the start and end points of a smooth visual transition.
In general animation terminology, a keyframe is defined as an object in animation which sets the starting and ending points of any transition. A sequence of keyframes defines which movement will be seen, whereas the position of the keyframes on the animation defines the timing of the movement.
A keyframe in Blend is a marker on the timeline that indicates when a property change will occur. The topic of working with keyframes is very vast so this article will just skim some of the basic concepts related to that, and not explore it in full detail as otherwise it would become too complex to understand and also span several hundred pages!
To create an animation in Expression Blend, you create a storyboard, and in the storyboard, you set keyframes on a timeline to mark property changes.
Let us reuse the DancingButton application that was created in Part I of this article series.
Open the application in Blend and open Page.xaml in design view.
Select the timeline from the Storyboard picker by clicking the Open a Storyboard button under Objects and Timeline and then selecting a storyboard.
Figure 1 shows the current timeline and existing keyframes for the button. The yellow marker indicates the Playhead.
![]()
Figure 1: Existing keyframes
Move the playhead as shown in Figure 2.
![]()
Figure 2: Moving the playhead
Now, create a new keyframe by clicking the Record Keyframe button. The button is highlighted in blue color on Figure 3.
![]()
Figure 3: Creating a new keyframe
A new keyframe is created on the timeline for the selected object. This keyframe will store any property changes that you make when the playhead is at this point on the timeline.
Change some properties of the button such as background color or transform properties.
Finally, save the project and then click the Play button to preview the animation. You may also test the application by executing it in the browser as usual.
![]()
Figure 4: Playing the animation using Play button
Conclusion: This article showed you briefly how to work with keyframes.