Triggering a Silverlight Storyboard Behavior on Demand

Question

I am messing with Silverlight trying to find out how to make it tick, and there is one thing I don't seem to be picking up on, with respect to Storyboards and getting a behavior to launch on demand. The following describes a blue ellipse which has a Transform Y-axis projection on the Y-axis so that when triggered it looks like a circle spinning in 3D on its vertical axis. The behavior fires when the ellipse is clicked. If the RepeatBehavior is set to 3x, then it repeats three times and stops.

What I am trying to figure out is how to make this behavior re-fire each time I click on the ellipse, because after the behavior runs the first time it won't fire again. I tried to get it to fire again by creating a MouseLeftButtonDown event and populating it with

Storyboard1.Begin();

but this does nothing. In fact, if I set a breakpoint there, it does execute, but to no effect. Here's the Xaml:

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" mc:Ignorable="d"
    x:Class="UsingStoryboards.MainPage"
    Width="640" Height="480">
    <UserControl.Resources>
        <Storyboard x:Name="Storyboard1" RepeatBehavior="3x">
            <DoubleAnimation Duration="0:0:2" To="160" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="ellipse" d:IsOptimized="True"/>
        </Storyboard>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <i:Interaction.Triggers>
            <i:EventTrigger EventName="Loaded">
                <ei:ChangePropertyAction PropertyName="Background">
                    <ei:ChangePropertyAction.Value>
                        <SolidColorBrush Color="#FFE50D0D"/>
                    </ei:ChangePropertyAction.Value>
                </ei:ChangePropertyAction>
            </i:EventTrigger>
        </i:Interaction.Triggers>
        <Ellipse x:Name="ellipse" Fill="#FF000BF5" HorizontalAlignment="Left" Height="80" Margin="54,75,0,0" Stroke="Black" VerticalAlignment="Top" Width="80" MouseLeftButtonDown="ellipse_MouseLeftButtonDown">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="MouseLeftButtonDown">
                    <ei:ControlStoryboardAction Storyboard="{StaticResource Storyboard1}"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
            <Ellipse.Projection>
                <PlaneProjection/>
            </Ellipse.Projection>
        </Ellipse>
    </Grid>
</UserControl>

Answer 1

Try specify a "From" value on the animation. Could you be animating the property from and to the same value?

Answer 2

KeithMahoney is correct. You are animating to 160 degrees from the current value.

Storyboards do not stop when they end. They hold the last values, unless you explicitly stop them.

That means the second cycle is animating from 160 to 160 so it does nothing.

To fix either set a start value of 0 using From as suggested or change the mouse event handler to:

private void ellipse_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    Storyboard1.Stop();
    Storyboard1.Begin();
}