Blinking Light Animation in Silverlight using Expression Blend

Before even anyone of you look at my animation, let me clarify again that I DON’T HAVE DESIGNER’S EYE Smile … which basically means if you are looking for some really cool UI then you are at wrong place. With that info. noted I also would like to let you know that though I am not a good designer, I am still a developer and just like any developer, me too can design UI (no matter how terrible it is) …

In this post, I displaying a very simple Blinking Light Silverlight animation created using only Expression Blend 4. I have created all drawings and animation using Expression Blend in just 20 mins for this post, and I must say that I am really impressed with this tool. If I wanted to do the same thing with good ol’ Visual Studio 2010, then it would have taken me at least couple of hours or more. (Or may be less if you are very good at reading XAML). Honestly, I’ve not even used core feature of Blend (which is Storyboard), instead I wrote very simple code to do the job.

As first step, I created two circle like drawings and placed them inside of Grid

<Ellipse x:Name="light1" Grid.Column="1" Grid.Row="1" Fill="#FFF7810A" HorizontalAlignment="Left" Margin="109,9,0,8" Stroke="Black" Width="100" d:LayoutOverrides="GridBox"/>

<Ellipse x:Name="light2" Grid.Row="1" Fill="#FFF7810A" Margin="0,9,106,8" Stroke="Black" HorizontalAlignment="Right" Width="100" d:LayoutOverrides="GridBox"/>

And in second step, I applied animation to those two circles in opposite direction so when one fades in another fades out (sort of illusion for two blinking lights of road work)

<Grid.Triggers>
   <EventTrigger RoutedEvent="Canvas.Loaded">
    <BeginStoryboard>
        <Storyboard>
            <DoubleAnimation Storyboard.TargetName="light1" Storyboard.TargetProperty="Opacity" From="0.5" To="1" Duration="0:0:1.5" AutoReverse="True" RepeatBehavior="Forever" />    
            <DoubleAnimation Storyboard.TargetName="light2" Storyboard.TargetProperty="Opacity" From="1" To="0.5" Duration="0:0:1.5" AutoReverse="True" RepeatBehavior="Forever" />    
        </Storyboard>
    </BeginStoryboard>
      </EventTrigger>
</Grid.Triggers>

In my sample both animation gets triggered when page gets loaded, but they can be triggered at any other event as well. As you might have already realized that this animation can be applied to any component, image or user defined control. Most of the code of this animation is self explanatory, so I don’t think I need to explain anything here.

I’ve included project with this post, so if you want .. you can download it from here.

That’s it for now…

It’s Just A Thought … Fingers crossed

Gaurang Sign

Leave a Reply