triggering an event at the storyboard end

Question

I am new to silverlight and I want to trigger an even when the storyboard finsihes or ends. How would I go on doing that. I already have one trigger in storyboard at mouse enter. I am not sure if I can add more events there. thanks

Answer 1

Use the "StoryBoardComplete" Behavior. You'll find it in the Assets panel under "Behaviors".

EDIT: Sorry, I answered in a hurry and incorrectly from memory. I should have given more details when you said you were new to Silverlight and I should have verified my answer.

CORRECTED ANSWER: Use a "StoryboardCompletedTrigger" on a Behavior. Let's say you want to change the Fill property of a Rectangle when your Storyboard completes. Add a Rectangle to your application:

Go to the Assets panel (same tab group as the Projects panel). Open the category titled "Behaviors" and locate the "ChangePropertyAction".

Drag and drop one onto the Rectangle. Objects and Timeline will now look like so:

Note that the ChangePropertyAction item is selected. Now go to the Properties panel:

In the Trigger section, click on the "New" button that I've highlighted for you. This will open a dialog and let you pick a different TriggerType. In this case you want a "StoryboardCompletedTrigger":

Fill in the Storyboard and PropertyName values.

Now when Storyboard1 completes the Rectangle's Fill property should change to Red. Here is the compelte XAML code for this simple example:

<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="SilverlightApplication2.MainPage"
Width="640" Height="480">
<UserControl.Resources>
    <Storyboard x:Name="Storyboard1">
        <DoubleAnimation Duration="0:0:0.9" To="-360" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
    </Storyboard>
</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="White">
    <Rectangle x:Name="rectangle" Fill="#FF0000F7" HorizontalAlignment="Left" Margin="86,133,0,225" Stroke="Black" Width="210" RenderTransformOrigin="0.5,0.5">
        <Rectangle.RenderTransform>
            <CompositeTransform/>
        </Rectangle.RenderTransform>
        <i:Interaction.Triggers>
            <ei:StoryboardCompletedTrigger Storyboard="{StaticResource Storyboard1}">
                <ei:ChangePropertyAction PropertyName="Fill">
                    <ei:ChangePropertyAction.Value>
                        <SolidColorBrush Color="Red"/>
                    </ei:ChangePropertyAction.Value>
                </ei:ChangePropertyAction>
            </ei:StoryboardCompletedTrigger>
        </i:Interaction.Triggers>
    </Rectangle>
    <Button Content="Button" HorizontalAlignment="Left" Height="50" Margin="86,0,0,98" VerticalAlignment="Bottom" Width="110">
        <i:Interaction.Triggers>
            <i:EventTrigger EventName="Click">
                <ei:ControlStoryboardAction Storyboard="{StaticResource Storyboard1}"/>
            </i:EventTrigger>
        </i:Interaction.Triggers>
    </Button>
</Grid>

YMMV: This approach is for use with Behaviors. Without knowing your situation I can't make a better recommendation, but this is the typical way to accomplish what you want.