XAML property to start a storyboard animation on load

Question

Well, as the title suggests:

I have a storyboard and I want it's animation to start without the intervention of code. The reason for this requirement is that I am targeting Silverlight Embedded and I am too lazy right now to recompile my application as well. And, coming to think of it, it will be easier to change the animation only in the future.

Does XAML have a property to make the storyboard run as soon as the xaml loads?

Undistinguished

Answer 1

You can use the Loaded event to start your storyboard

See MSDN for an example: Storyboard (Silverlight)

Picked the example from MSDN:

<Canvas
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Rectangle
    x:Name="MyAnimatedRectangle"
    Width="100"
    Height="100"
    Fill="Blue">
    <Rectangle.Triggers>

      <!-- Animates the rectangle's opacity.
           This is the important part, the EventTrigger which will start our animation -->

      <EventTrigger RoutedEvent="Rectangle.Loaded">
        <BeginStoryboard>
          <Storyboard>
            <DoubleAnimation
              Storyboard.TargetName="MyAnimatedRectangle"
              Storyboard.TargetProperty="Opacity"
              From="1.0" To="0.0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever" />
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger>
    </Rectangle.Triggers>
  </Rectangle>
</Canvas>

The object Rectangle has properties. In the Triggers property we defined an EventTrigger which will fire when this event will occur. We choose the Rectangle.Loaded event, which means it will fire when loaded ;).

We add a BeginStoryboard property to begin our storyboard, and add a Storyboard. This animation will use a DoubleAnimation on the Opacity property, which means that in a duration of 5 seconds, the opacity will gradually fade to zero, and back (AutoReverse property) and it will do this Forever (the RepeatBehaviour property).

Dorinda

I went straight to SO without checking MSDN (shame on me). From MSDN it seems that there is nothing like the behavior I am looking for. The story board has to be started from code... Your suggestion still involves writing/changing code. – Undistinguished

if XAML can be accounted as code, then yeah :) You will have to write a little bit of XAML to get it to work ;) – Dorinda

OK. I must have been thick :(. I'll read on how to use events in XAML and come back in case it solves my problem or not. Thanks. – Undistinguished

I'm still struggling. New to XAML and Silverlight. can you post a XAML example of how to use this? – Undistinguished

Added the example with some explanation.. Hope this helps :) – Dorinda

Thank you very much for the detailed and excellent answer! Worked like a charm. – Undistinguished

Answer 2

<UserControl x:Class="SOSMVVM.AniM11"
    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' 
    mc:Ignorable='d' 
    d:DesignWidth='640' 
    d:DesignHeight='480'>


    <StackPanel Margin="5">
        <Rectangle Name="rect3" Fill="Blue" Margin="2" Width="20"
      Height="20" HorizontalAlignment="Left" />
        <Button Margin="2,20,0,0" HorizontalAlignment="Left"
      Content="Start Animations" Width="100">
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>

                                <DoubleAnimation
                  Storyboard.TargetName="rect3" Storyboard.TargetProperty="Width"
                  From="20" To="400" Duration="0:0:10" SpeedRatio="0.5" />


                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Button.Triggers>
        </Button>
    </StackPanel>


</UserControl>

Silk