Geek Answers Handbook

XAML property to start a storyboard animation on boot

Well, as the name implies:

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

Does the XAML property have the property of starting the storyboard immediately after loading xaml?

+4
source share
2 answers

You can use the Loaded event to trigger a storyboard.

See MSDN for an example: Storyboard (Silverlight)

Selected an 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 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>

A Rectangle object has properties. In the Triggers property, we defined an EventTrigger that will fire when this event occurs. We select the Rectangle.Loaded event, which means that it will fire when loading;).

We are adding the BeginStoryboard property to start our storyboard and add a storyboard. This animation will use the DoubleAnimation on the Opacity property, which means that within 5 seconds the opacity gradually disappears to zero and back (AutoReverse property), and it will do this Forever (RepeatBehaviour property).

+15
source 
 <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>
+2
source

More articles:


All Articles