Set the loop duration

  • Article

You can configure an individual timeline in a storyboard or for a whole storyboard to loop once, more than once, or endlessly. If you do both, the repeat behavior set on individual storyboards will run before the repeat behavior on the whole storyboard.

Warning

If you set repeat behavior both for timelines in a storyboard and on the storyboard itself, the looping in the timelines will complete before the looping behavior on the storyboard will run. This means that if you set the looping behavior of a timeline to Forever, the looping behavior of the storyboard will never run.

Note

If you test your storyboard using the playback controls, you will not see the timeline loop. To test the looping behavior, run your application by pressing F5. For more information, see Test a storyboard.

To set the repeat behavior of an individual timeline

  1. Select the storyboard from the Storyboard picker by clicking the Open a Storyboard Cc294558.d4531c86-5048-481c-a1ca-29af202d28e7(en-us,Expression.10).png button under Objects and Timeline, and then selecting the storyboard.

    Note

    If your storyboard is a part of a style or control template, you will have to open the style or control template to access the storyboard. For more information, see Create or edit a control template or Edit a style.

  2. In the objects view, expand the nodes under the object that contains the timeline that you want to loop. For example, in the following timeline, the X and Y child properties of the rectangle object contain the timelines that can be looped.

    An animation timeline that moves a rectangle

    Cc294558.982f031a-74a3-414a-abc2-a0f41a741075(en-us,Expression.10).png

  3. Right-click the element or the shaded time-span bar, and then click Edit Repeat Count. The Edit Repeat dialog box appears.

  4. Do one of the following:

    • If you want to repeat the animation only a specific number of times, enter the number of times to repeat the animation in the Repeat Count text box. The minimum value for looping is 1.

    • If you want the animation to loop infinitely, click the Set to Forever Cc294558.da7f68ed-4aa6-461f-a8e9-10ab93e437e0(en-us,Expression.10).png button.

  5. Click OK. The shaded time-span bar extends to reflect the new duration of the animation.

To set the repeat behavior of an entire storyboard

  1. Select the storyboard from the Storyboard picker by clicking the Open a Storyboard Cc294558.d4531c86-5048-481c-a1ca-29af202d28e7(en-us,Expression.10).png button under Objects and Timeline and then selecting the storyboard. The storyboard opens for editing.

    Note

    If your storyboard is a part of a style or control template, you will have to open the style or control template to access the storyboard. For more information, see Create or edit a control template or Edit a style.

  2. Open the Properties panel. Notice that the Properties panel displays the properties for whichever object is selected under Objects and Timeline.

  3. Click the name of your storyboard under Objects and Timeline so that the name is highlighted. The Properties panel now displays the properties that you can set for the whole storyboard.

    Storyboard properties appear in the Properties panel when the storyboard name is highlighted under Objects and Timeline

    Cc294558.3a0060a3-5e81-4347-bc01-e6df99012d87(en-us,Expression.10).png

  4. Change the RepeatBehavior property by either selecting a value from the drop-down box or entering a value. You can set the property to Forever, or to any integer value followed by an x to indicate the number of times to repeat the storyboard.

See also

Concepts

Modify a storyboard to repeat or reverse at the end of its cycle

Duplicate or reverse a storyboard