Animation at your fingertips!!

The other day i was looking at some kewl animated websites. Looks good but how useful they are is debatable. Anyway, it gave me an excuse to look at the animation capabilities in Avalon. And guess what!! its a blast. Let me tell you something, its really simple and you dont need to know anything about some complex calculations and such which more of ten than not scare the users away.

So one kewl app to test your code is XamlPad. This comes as part of the SDK and is located in the Start menu -- Programs -- Windows SDK -- Tools. You can type in Xaml in the lower window and you see what you design. Kewl isnt it. And yeah you can use the usual way of creating an Avalon app and typing in xaml inside the Window1.xaml file. You get the same results.

Lets begin with something simple just to show how simple it is. How about animating the background of a textbox on moving the mouse into and outside it. Heres how it would look like when you move the mouse over the controls.

Aint that beautiful !! Now for some code. All you need is the below:

  
<StackPanel >
<StackPanel.Resources>
      <Style x:Key="StyleForBox" >
            <Setter Property="Control.Background">
                  <Setter.Value>
                        <SolidColorBrush Color="Red" x:Name="myBrush"/>
                  </Setter.Value>
            </Setter>
            <Style.Triggers>
                  <EventTrigger RoutedEvent="Mouse.MouseEnter">
                           <EventTrigger.Actions>
                                    <BeginStoryboard>
                                           <Storyboard>
                                               <ColorAnimation Duration="0:0:0.5" 
Storyboard.TargetProperty="(Control.Background).(SolidColorBrush.Color)"                                                                To="Yellow" AccelerationRatio=".9" />
                                            </Storyboard>
                                    </BeginStoryboard>
                           </EventTrigger.Actions>
                   </EventTrigger>
                  <EventTrigger RoutedEvent="Mouse.MouseLeave">
                           <EventTrigger.Actions>
                                <BeginStoryboard>                                      <Storyboard>                                         <ColorAnimation Duration="0:0:0.5" 
Storyboard.TargetProperty="(Control.Background).(SolidColorBrush.Color)"                                                          AccelerationRatio=".9" />                                      </Storyboard>                                </BeginStoryboard>
                           </EventTrigger.Actions>
                  </EventTrigger>
         </Style.Triggers>
</Style>
</StackPanel.Resources>
<TextBox Text="hello" Style="{StaticResource StyleForBox}" />
<PasswordBox Password="hello" Style="{StaticResource StyleForBox}" />
</StackPanel>

What do we have here... We have a textBox and a PasswordBox which is assigned a style that animates the background. The style sets the background to red using the setter tag. Now we need to create the animation. For the animation we need to animate the background when the mouse enters and when it leaves. This is done using triggers.We have an event trigger set to Mouse.MouseEnter and another one for Mouse.MouseLeave. Once the trigger is set we need to perform some action and this is exactly what we do in the EventTrigger.Actions tag. These set of actions are usualy described in a StoryBoard inside the BeginStoryBoard tag. Since we are animating the color all we need is to now use the ColorAnimation tag and set the TargetProperty which is the background, Duration of the animation, the AccelerationRatio for the speed in animation and the desired final color. Ther you go!! all set and done. No other code. And presto!! your animation comes to life...

More information on animation can be obtained from the SDK docs which is also located in the Start menu.