"Programming WPF" translation 8th Chapter 3.Storyboard

Storyboard is a collection of animations. If you use a tag, all animations must be defined in a storyboard. (It is possible to create an isolated animated object in your code, see later in this chapter.) The structure of an animation is usually different from the structure of the animated UI. For example, you might want to come up to two individual user interface elements at the same time to be animated. Because storyboard separates animations from animated objects, storyboard is free to reflect such connections, even if they are set to objects, and may be defined in completely different parts of the file.

Example 8-15 shows the markup for the user interface that contains two ellipses.

Example 8-15

<window text= "Two animations width=" 420 "height=" "
xmlns=" http://schemas.microsoft.com/winfx/ avalon/2005 "
xmlns:x=" http://schemas.microsoft.com/winfx/xaml/2005 "

<window.storyboards> <paralleltimeline>
<settertimeline targetname= "Myellipse" path= "(ellipse.width)" > <doubleanimation from= "Ten" to= "duration=" "0:0:5"
Repeatbeha Vior= "Forever"/>
</settertimeline>
<settertimeline targetname= "Myotherellipse 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 "Path=" (ellipse.width) "
<doubleanimation from=", "to=" and "The Duration="
Repeatbehavior= "Forever"/>
</settertimeline>
</paralleltimeli Ne>
</window.storyboards>

<stackpanel orientation= "Horizontal"
<ellips E x:name= "Myellipse" height= "1"Fill=" Red "/>
<textblock>this is some text</textblock>
<ellipse x:name=" Myot Herellipse "height=" fill= "Blue"/>
</stackpanel>
</window>

These ellipses are not contiguous, but their widths are animated in an asynchronous fashion. This asynchronous reflection is reflected in the storyboard structure: These two animations are embedded in the same Paralleltimeline element, indicating that the animations are running at the same time. One animation from 10 to 300 and the other from 300 to 10, so the total width of the three items in the StackPanel remains constant.

Storyboard must be run in one of three different locations. They can be placed in style, in ContentTemplate, or in top-level elements. The top-level elements are window and page, or the class that is derived from this.

All user interface elements have a storyboard attribute that inherits the base type FrameworkElement. You might want to mean that you can add a storyboard to any element. This is not supported at the moment. Storyboard works only in: style, in ContentTemplate, or in top-level elements.