What is Storyboard?
Before we dig into detail of Storyboard, make a note that Storyboard is tightly coupled with animation.
A storyboard is nothing but a resource containing a collection of timeline objectssuch as animations and each of which targets a specific property of a control. Like background color and visibility property of a button control.
In other word, suppose you want to change one or more properties of controls based on either a time constraint or some user interaction or some event. This can be achieved through an animations and you group these animation into a group, that can be called as storyboard.
Understand the scenario:
To understand this concept and keep it simple, we will be creating a circle/ball/ellipse using xaml and will move it from one corner to another corner and will change the color and size of the ball during this animation. We will be using Blend to create Storyboard.
Here are the requirement for storyboard.
- Move ball from top left corner of page to bottom right corner of the xaml page.
- Change the color of the ball from green to red in midway and then back to green at the end.
- Change the size of the circle in the midway (While circle is at the center of the page) and revert back the size to normal at the end of the animation.
- Ball movement should look natural, like in the real world object wouldn’t start instantly and move in constant speed. They have escalation in speed after starting and de-escalation in speed while stopping. It means ball speed change during the movement instead of constant speed. After this effect, ball movement will look more natural.
You can follow following steps to create story board in your local development environment or you can download the attached zip file which contain the solution, which was used to build this blog.
1) Launch a blend 2015 and click file->New-Project. Expend Visual c# tree and Select Universal. Under universal category select Blank App(Universal windows) and name it as Storyboard. Provide path to location field and click Ok.
2) This will create as blank app with empty grid in Mainpage.xaml page.
3) Next step is to create green Circle at the left top corner. Drag and drop ellipse from control window to the MainPage.xaml top left corner. You can follow red arrow to get ellipse from control section. Make sure after drag drop, you move it to top left corner of the page. You can change the size of the ellipse to look like a proper circle and change the Fill color to green from the property windows. Press F4 after selecting a control to get property.
4) Go to Objects and TimeLine section and select Ellipse control and then press plus button as shown in below screen. You will get a popup with “Storyboard1” name. Keep it default and click ok.
5) Now we are in storyboard editing mode. Everything we do, will get recorded in the storyboard. You are ready for your first animation. Move the yellow time pointer as show in the following screen two second and then grab the green ball and drag it to bottom right corner. If you press the green play button, the animation can be viewed on the design surface.
Let’s see what Blend has created for us. If you notice inside Objects and Timeline window there is small red icon on ellipse which indicate that it has storyboard effects. Indeed rendertransform with X and Y Translate has been created if you expend Ellipse tree.
If you click green run button in the Storyboard, you can see ball is moving from top left corner to bottom right corner.
So far so good, lets explore render animation.
There are 5 type of render animation, which can be applied to any element. To understand type of render animation, go to Transform section of ellipse.
1) Translate: Simply move every pixel of the object.
2) Rotation: Rotate the object in specified angle
3) Scale: Enlarge the object (This is what is being used when you hover your mouse over button)
4) Skew: Used to skew the object.
5) Center Point: Allow to change center point of the object.
6) Flip : As name suggest, it flip the object.
These are called render transformation because they take place only after the layout cycle has been completed. You can test these transformation by applying them while moving the object. For example move the time line to mid and flip the ellipse and then run the storyboard. You can see the effect that ball flip midway.
As per the initial requirement, we have completed first requirement by moving ball from one corner to another. Lets work on second requirement of changing the color of ball.
Move the yellow time pointer to midway (1 sec) and it will move the ball to center location. Go to the property of the ellipse and change the FILL color property to red as shown in below screen.
Now If you run the storyboard, you can see the ball color changes midway.
Third requirement: Change the size of the ball in the midway (While ball is at the center of the page) and revert back the size to normal at the end of the animation.
Again, Move the yellow time pointer to midway (1 sec), it will move the ball to center location. Go to the transform section of ellipse property and set the value of scale property to 1.4 for both X and Y.
Now If you run the storyboard, you can see while moving ball change the FILL color to red in midway and gets enlarge.
Last requirement:Ball movement should look natural, like in the real world object wouldn’t start instantly and move in constant speed. They have escalation in speed after starting and de-escalation in speed while stopping.
This looks difficult but there is already out of box feature available to achieve this 
Just go to Object and Timelines window and select both while RenderTransform object under ellipse including TranslateX and TranslateY and check “easing” section of property and select Cubic (InOut) function value under EasingFunction property.
Now, If you run the storyboard using green button in the storyboard timeline section window, you can see the movement of ball follow cubic function, it means ball speed gradually increase and slow down before ending. This gives ball a natural look and feel move.
Similarly there are other easing function available, feel free to try out other ease function to achieve different kind of movement under out of box easing options. All these ease function can be big part of your application personality.
So we are done with storyboard, lets run the solution by pressing F5.
Is it running? No it is not what went wrong. We have follow all the required step but it still not running…….. nothing to worry, there is nothing wrong in the solution, if you have follow above steps correctly then we are very close to final run, but now it looks like we have to do little more work to enable storyboard. 
Basically we need to launch the Storyboard along with application launch.
Stop the application. There are multiple way to launch the storyboard and we will use behavior.
Use of behavior to launch the storyboard
Behaviors are basically small bit of reusable code that can enhance how control behaves. They are like code which designer can apply on a control to change its behavior with out the help of code behind.
Inside blend, go to Assets tab and click on Behaviors and if you see “Install Behaviours’ NuGet Package” hyperlink then click on it.
After Installing behaviors Nuget Package, you can see different built in behaviour. One of the behavior which control story boards is “ControlStoryboardAction”. Drag and drop this action behavior on Grid control in the Objects and timeline window. This create two object under Grid. These are EventTriggerBehavior and ControlStoryboardAction. The first one is the trigger, it initiates the action that are associated with it, based on the specific key pressed. You can see full list of event by going to property of EventTriggerBehavior in EventName dropdown. By default it is set to PointerPressed, it means whenever you click mouse the trigger will initiate the action which in turn call the storyboard.
Go to the property of ControlStoryboardAction and their you can control the storyboard launch options, like Play, stop Pause etc. Most important point here it to set the value of Storyboard property to Storyboard1.
Lets launch the application by pressing the F5 and now if we click on the app, it will trigger the action, which in turn start the storyboard. Wow , it is working now. You can enable storyboard from code behind too but enabling through behavior is more clean and simple. isn't it?
I have also attached sample app which was used to build this blog and let me know If you need more help.