Partager via


Timeline.RepeatBehavior Property

Microsoft Silverlight will reach end of support after October 2021. Learn more.

Gets or sets the repeating behavior of this timeline.

Namespace:  System.Windows.Media.Animation
Assembly:  System.Windows (in System.Windows.dll)

Syntax

'Declaration
Public Property RepeatBehavior As RepeatBehavior
public RepeatBehavior RepeatBehavior { get; set; }
<timeline RepeatBehavior="repeatBehaviorValue"/>

XAML Values

  • repeatBehaviorValue
    A RepeatBehavior expressed as a string. This can be an iteration count or a timespan string. For more information, see RepeatBehavior.

Property Value

Type: System.Windows.Media.Animation.RepeatBehavior
An iteration Count that specifies the number of times the timeline should play, a TimeSpan value that specifies the total length of this timeline's active period, or the special value Forever, which specifies that the timeline should repeat indefinitely. The default value is a RepeatBehavior with a Count of 1, which indicates that the timeline plays once.

Remarks

Dependency property identifier field: RepeatBehaviorProperty

Creating a RepeatBehavior in XAML is possible through a type conversion syntax when setting a property that takes a RepeatBehavior as an attribute string. Basically, a RepeatBehavior can be defined as a timespan string, a #x string, or the special value Forever.

If an iteration Count is specified and the timeline's AutoReverse property is set to true, a single repetition consists of one forward iteration and one backward iteration. A timeline with an AutoReverse property set to true an iteration Count of 2 would play forwards, then backwards, then forwards again, and then backwards again.

Instead of specifying the number of times a timeline plays, you can also specify the total length of time you want the timeline to play. For a timeline to repeat, this Duration value should be greater than the timeline's Duration. For example, a timeline with a Duration of 2 seconds and a Duration of 4 seconds will play twice. If the Duration is less than the timeline's Duration, the timeline's active period is cut short.

This property applies both to specific animations and to the parent storyboard. Generally for an animation in a storyboard, you should apply the RepeatBehavior to the storyboard, because otherwise the parent storyboard default of 1x will prevent any child repeat behaviors from being applied. But you might specify repeat behaviors on child animations if they are intended to run fewer seconds or iterations than the parent storyboard.

For more information about repeating timelines, see Animation Overview.

Examples

The following example shows several different ways to set the RepeatBehavior of an animation and how these settings can affect your animation.

Run this sample

<StackPanel Margin="20">
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">

            <!-- Create an animation that repeats indefinitely. -->
            <DoubleAnimation 
              Storyboard.TargetName="ForeverRepeatingRectangle" 
              Storyboard.TargetProperty="Width" 
              From="50" To="300" Duration="0:0:2" RepeatBehavior="Forever" />

            <!-- Create an animation that repeats for four seconds. As a result, the
                 animation repeats twice. -->
            <DoubleAnimation 
              Storyboard.TargetName="FourSecondsRepeatingRectangle" 
              Storyboard.TargetProperty="Width"
              From="50" To="300" Duration="0:0:2" RepeatBehavior="0:0:4" />

            <!-- Create an animation that repeats twice. -->
            <DoubleAnimation 
              Storyboard.TargetName="TwiceRepeatingRectangle" 
              Storyboard.TargetProperty="Width" 
              From="50" To="300" Duration="0:0:2" RepeatBehavior="2x" />

            <!-- Create an animation that repeats 0.5 times. The resulting animation
                 plays for one second, half of its Duration. It animates from 50 to 150. -->
            <DoubleAnimation 
              Storyboard.TargetName="HalfRepeatingRectangle" 
              Storyboard.TargetProperty="Width" 
              From="50" To="300" Duration="0:0:2" RepeatBehavior="0.5x" />

            <!-- Create an animation that repeats for one second. The resulting animation
                 plays for one second, half of its Duration. It animates from 50 to 150. -->
            <DoubleAnimation 
              Storyboard.TargetName="OneSecondRepeatingRectangle" 
              Storyboard.TargetProperty="Width" 
              From="50" To="300" Duration="0:0:2" RepeatBehavior="0:0:1" />
        </Storyboard>
    </StackPanel.Resources>

    <!-- Create several rectangles to animate. -->
    <Rectangle Name="ForeverRepeatingRectangle" 
    Fill="Red" Width="50" Height="20" />
    <Rectangle Name="FourSecondsRepeatingRectangle" 
    Fill="Blue" Width="50" Height="20" />
    <Rectangle Name="TwiceRepeatingRectangle" 
    Fill="Yellow" Width="50" Height="20" />
    <Rectangle Name="HalfRepeatingRectangle" 
    Fill="Green" Width="50" Height="20" />
    <Rectangle Name="OneSecondRepeatingRectangle" 
    Fill="Orange" Width="50" Height="20" />


    <!-- Create buttons to restart and stop the animations. -->

    <Button Margin="10" Content="Restart Animation" Click="Start_Animation" />


</StackPanel>
<StackPanel Margin="20">
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">

            <!-- Create an animation that repeats indefinitely. -->
            <DoubleAnimation 
              Storyboard.TargetName="ForeverRepeatingRectangle" 
              Storyboard.TargetProperty="Width" 
              From="50" To="300" Duration="0:0:2" RepeatBehavior="Forever" />

            <!-- Create an animation that repeats for four seconds. As a result, the
                 animation repeats twice. -->
            <DoubleAnimation 
              Storyboard.TargetName="FourSecondsRepeatingRectangle" 
              Storyboard.TargetProperty="Width"
              From="50" To="300" Duration="0:0:2" RepeatBehavior="0:0:4" />

            <!-- Create an animation that repeats twice. -->
            <DoubleAnimation 
              Storyboard.TargetName="TwiceRepeatingRectangle" 
              Storyboard.TargetProperty="Width" 
              From="50" To="300" Duration="0:0:2" RepeatBehavior="2x" />

            <!-- Create an animation that repeats 0.5 times. The resulting animation
                 plays for one second, half of its Duration. It animates from 50 to 150. -->
            <DoubleAnimation 
              Storyboard.TargetName="HalfRepeatingRectangle" 
              Storyboard.TargetProperty="Width" 
              From="50" To="300" Duration="0:0:2" RepeatBehavior="0.5x" />

            <!-- Create an animation that repeats for one second. The resulting animation
                 plays for one second, half of its Duration. It animates from 50 to 150. -->
            <DoubleAnimation 
              Storyboard.TargetName="OneSecondRepeatingRectangle" 
              Storyboard.TargetProperty="Width" 
              From="50" To="300" Duration="0:0:2" RepeatBehavior="0:0:1" />
        </Storyboard>
    </StackPanel.Resources>

    <!-- Create several rectangles to animate. -->
    <Rectangle Name="ForeverRepeatingRectangle" 
    Fill="Red" Width="50" Height="20" />
    <Rectangle Name="FourSecondsRepeatingRectangle" 
    Fill="Blue" Width="50" Height="20" />
    <Rectangle Name="TwiceRepeatingRectangle" 
    Fill="Yellow" Width="50" Height="20" />
    <Rectangle Name="HalfRepeatingRectangle" 
    Fill="Green" Width="50" Height="20" />
    <Rectangle Name="OneSecondRepeatingRectangle" 
    Fill="Orange" Width="50" Height="20" />


    <!-- Create buttons to restart and stop the animations. -->

    <Button Margin="10" Content="Restart Animation" Click="Start_Animation" />


</StackPanel>
<StackPanel Margin="20">
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">

            <!-- Create an animation that repeats indefinitely. -->
            <DoubleAnimation 
              Storyboard.TargetName="ForeverRepeatingRectangle" 
              Storyboard.TargetProperty="Width" 
              From="50" To="300" Duration="0:0:2" RepeatBehavior="Forever" />

            <!-- Create an animation that repeats for four seconds. As a result, the
                 animation repeats twice. -->
            <DoubleAnimation 
              Storyboard.TargetName="FourSecondsRepeatingRectangle" 
              Storyboard.TargetProperty="Width"
              From="50" To="300" Duration="0:0:2" RepeatBehavior="0:0:4" />

            <!-- Create an animation that repeats twice. -->
            <DoubleAnimation 
              Storyboard.TargetName="TwiceRepeatingRectangle" 
              Storyboard.TargetProperty="Width" 
              From="50" To="300" Duration="0:0:2" RepeatBehavior="2x" />

            <!-- Create an animation that repeats 0.5 times. The resulting animation
                 plays for one second, half of its Duration. It animates from 50 to 150. -->
            <DoubleAnimation 
              Storyboard.TargetName="HalfRepeatingRectangle" 
              Storyboard.TargetProperty="Width" 
              From="50" To="300" Duration="0:0:2" RepeatBehavior="0.5x" />

            <!-- Create an animation that repeats for one second. The resulting animation
                 plays for one second, half of its Duration. It animates from 50 to 150. -->
            <DoubleAnimation 
              Storyboard.TargetName="OneSecondRepeatingRectangle" 
              Storyboard.TargetProperty="Width" 
              From="50" To="300" Duration="0:0:2" RepeatBehavior="0:0:1" />
        </Storyboard>
    </StackPanel.Resources>

    <!-- Create several rectangles to animate. -->
    <Rectangle Name="ForeverRepeatingRectangle" 
    Fill="Red" Width="50" Height="20" />
    <Rectangle Name="FourSecondsRepeatingRectangle" 
    Fill="Blue" Width="50" Height="20" />
    <Rectangle Name="TwiceRepeatingRectangle" 
    Fill="Yellow" Width="50" Height="20" />
    <Rectangle Name="HalfRepeatingRectangle" 
    Fill="Green" Width="50" Height="20" />
    <Rectangle Name="OneSecondRepeatingRectangle" 
    Fill="Orange" Width="50" Height="20" />


    <!-- Create buttons to restart and stop the animations. -->

    <Button Margin="10" Content="Restart Animation" Click="Start_Animation" />


</StackPanel>
<StackPanel Margin="20">
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">

            <!-- Create an animation that repeats indefinitely. -->
            <DoubleAnimation 
              Storyboard.TargetName="ForeverRepeatingRectangle" 
              Storyboard.TargetProperty="Width" 
              From="50" To="300" Duration="0:0:2" RepeatBehavior="Forever" />

            <!-- Create an animation that repeats for four seconds. As a result, the
                 animation repeats twice. -->
            <DoubleAnimation 
              Storyboard.TargetName="FourSecondsRepeatingRectangle" 
              Storyboard.TargetProperty="Width"
              From="50" To="300" Duration="0:0:2" RepeatBehavior="0:0:4" />

            <!-- Create an animation that repeats twice. -->
            <DoubleAnimation 
              Storyboard.TargetName="TwiceRepeatingRectangle" 
              Storyboard.TargetProperty="Width" 
              From="50" To="300" Duration="0:0:2" RepeatBehavior="2x" />

            <!-- Create an animation that repeats 0.5 times. The resulting animation
                 plays for one second, half of its Duration. It animates from 50 to 150. -->
            <DoubleAnimation 
              Storyboard.TargetName="HalfRepeatingRectangle" 
              Storyboard.TargetProperty="Width" 
              From="50" To="300" Duration="0:0:2" RepeatBehavior="0.5x" />

            <!-- Create an animation that repeats for one second. The resulting animation
                 plays for one second, half of its Duration. It animates from 50 to 150. -->
            <DoubleAnimation 
              Storyboard.TargetName="OneSecondRepeatingRectangle" 
              Storyboard.TargetProperty="Width" 
              From="50" To="300" Duration="0:0:2" RepeatBehavior="0:0:1" />
        </Storyboard>
    </StackPanel.Resources>

    <!-- Create several rectangles to animate. -->
    <Rectangle Name="ForeverRepeatingRectangle" 
    Fill="Red" Width="50" Height="20" />
    <Rectangle Name="FourSecondsRepeatingRectangle" 
    Fill="Blue" Width="50" Height="20" />
    <Rectangle Name="TwiceRepeatingRectangle" 
    Fill="Yellow" Width="50" Height="20" />
    <Rectangle Name="HalfRepeatingRectangle" 
    Fill="Green" Width="50" Height="20" />
    <Rectangle Name="OneSecondRepeatingRectangle" 
    Fill="Orange" Width="50" Height="20" />


    <!-- Create buttons to restart and stop the animations. -->

    <Button Margin="10" Content="Restart Animation" Click="Start_Animation" />


</StackPanel>
private void Start_Animation(object sender, RoutedEventArgs e)
{
    myStoryboard.Begin();
}

Version Information

Silverlight

Supported in: 5, 4, 3

Silverlight for Windows Phone

Supported in: Windows Phone OS 7.1, Windows Phone OS 7.0

Platforms

For a list of the operating systems and browsers that are supported by Silverlight, see Supported Operating Systems and Browsers.