SilverBullet, Silverlight

SilverBullet #6 – System.Windows.EventTrigger

silverbulletI’d like to provide you with a SilverBullet™, a small snippet of Silverlight, a class or namespace hidden in the silverlight .NET framework, to help you out in times of need. It’s not to learn, but something to keep in your pocket. Just remember it’s there and you’re safe.

There are situations when you would like to start an animation as soon as your application is loaded. The EventTrigger class is what you need in that case. You may know this class from WPF, but the Silverlight version is very limited. The nice thing about this class is that it can be used in xaml, so you don’t have to do anything in codebehind.

The EventTrigger class has a couple of uninteresting properties and methods inherited from DependencyObject. The class has only 1 property you would actually use directly when defining it in Xaml: RoutedEvent. This is the event that will trigger the animation. At this point, only the Loaded event is supported. But often this is what you need anyway.

The animation you want to start is placed inside the EventTrigger element and inside a BeginStoryBoard element. The EventTrigger can contain multiple BeginStoryBoards. Each BeginStoryBoard can contain only one storyboard.

In case you want to look at the storyboards from code, the BeginStoryBoard objects are stored in a TriggerActionCollection in the Actions property of the EventTrigger.

Here’s a very simple example of an animation being played when the application is loaded:

<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">    
    <UserControl.Triggers>
     <EventTrigger>
          <BeginStoryboard>
          <Storyboard SpeedRatio="0.01">          
              <DoubleAnimationUsingKeyFrames 
                BeginTime="00:00:00" 
                Storyboard.TargetName="ellipse" 
                Storyboard.TargetProperty="(UIElement.RenderTransform).
                                          (TransformGroup.Children)[3].
                                          (TranslateTransform.X)">
                <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="00:00:02" Value="300"/>
            </DoubleAnimationUsingKeyFrames>
            </Storyboard>        
          </BeginStoryboard>          
        </EventTrigger>
    </UserControl.Triggers>    
    <Grid x:Name="LayoutRoot" Background="White">
        <Ellipse x:Name="ellipse" Fill="#FFFF0000" Stroke="#FF000000" 
            Height="60" Width="60"
            HorizontalAlignment="Left" 
            VerticalAlignment="Top" >
            <Ellipse.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Ellipse.RenderTransform>
        </Ellipse>
    </Grid>
</UserControl>
 
 

Shout it
Tags van Technorati: Silverlight
dotNed blogger
kick it on DotNetKicks.com

Leave a Reply

Seo wordpress plugin by www.seowizard.org.
%d bloggers like this: