Recently I required to create some simple control that shows 'wait process' (like this 
in Vista). MS Blend allows you to create cool animated control in one minute or even less.
I want to show how to create very simple continuous animation and some tips in quick animation creation.
Minimum requirements before you'll continue: this post wasn't written as 'Kit for Beginners', means that you must have a basic knowledge/experience in MS Blend application.
Open MS Blend (ver. can be 1+ or 2+) and create new WPF (EXE) project.
Draw two circles (in main window).
Select 'Ellipse' shape and hold 'Shift' key to draw perfect circles (the radius of small circle is about ~60% radius of big).
Align small circle in center of big.
Select both circles and do right-click, when click on 'Horizontal Centers' and 'Vertical Centers' to align circles under 'Align' menu.
Combine circles into one shape (ring like donates).
Select both circles and press on right mouse key. Click on 'Exclude Overlap' under 'Combine' menu.
Fill background color.
Use gradient brush with preferred colors. One side can be darker, lighter side can be semitransparent.
Fill outline (stroke) color.
Use solid or gradient brush (can be semitransparent).
Convert shape (ring) into user control.
Right-Click on shape and click on 'Make Control...'
Blend generates new user control from defined shape (and replaces shape path in 'Window1' with instance of 'ucWaiting').
 |
(appeared in 'Window1.xaml') |
Rebuild project before you'll proceed to next paragraphs.
Create simple rotation animation.
Because the control must be with continues animation from the moment when its loading event is fired, I suggest to create new stroryboard from adding new event in triggers panel.
Click on '+ Event' button in 'Triggers' panel, Blend will add default event 'Loaded' (fired when control is loaded in parent's visual container).
Click on '+' and 'OK' in message box that asks you if you want to create new stroryboard (animation).
These actions are leading to creation of new timeline with storyboard (animation) named 'OnLoaded1'.
The Blend is switched into recording mode, turn it off by clicking on red circle (see marks):
Save current shape position in timeline by recording new keyframe. Zoom-In the timeline and move it position of 0.5 seconds. Select shape (ring) and click on red circle to start recording.
Rotate shape 360 degrees (hold 'Shift' button for 45 deg. rotation for each movement). After one round is completed, turn-off the recording. You can preview animation by pressing 'play' button.
Storyboard contains animation with two keyframes, animation makes simple rotation of the shape. Animation will be started when 'Load' event is fired.
Continuous Animation
Last step in animation is to set continuous rotation.
Expand 'path' object in objects and timeline tree and expand 'RenderTransform' and 'Rotation' animation. Do right-click on 'Angle' item and click on 'Edit Repeat Count' in context-menu.
When 'Edit Repeat' window is opened click on marked button 'Set to Forever', click on 'OK' to close the dialog.
The animation will be played forever.
Adjust size of control in main window and test project.
Set control's size 24x24 and press <F5> key.
Now it is ready!
>> Of course you can improve this control by adding new functionality, properties (like boolean 'EnableAnimation' or 'ContinuouseAnimation'), by defining more sexy design of shape(s) and/or colors.
PS
Additional tips for animations.
This sub-menu allows to create animations in easy way:
Many beginners unfamiliar with these options:
[Duplicate] - duplicates selected animation, very useful in case you want to save extra work by duplication existing animation
[Reverse] - reverses keyframes, very useful in case you want to switch keyframes or to create duplicated animation with reversed keyframes, for example: one animation is used to show some GUI element, another is used to hide this element; you can create one animation for showing of element and another animation will be duplicate (copy) with reversed keyframes.
Hope this post was helpful ;-)
