DevExpress has stepped up and offered to lead this open source project. In just a few short months, they have implemented a number of modern and strategic changes to the toolkit to help make it a valuable part of your ASP.NET Web Forms arsenal.
This release is available NOW from http://devexpress.com/ms-act

Adding Animation to a Control (VB)

The Animation control in the ASP.NET AJAX Control Toolkit is not just a control but a whole framework to add animations to a control. This tutorial shows how to set up such an animation.

Overview

The Animation control in the ASP.NET AJAX Control Toolkit is not just a control but a whole framework to add animations to a control. This tutorial shows how to set up such an animation.

Steps

The first step is as usual to include the ScriptManager in the page so that the ASP.NET AJAX library is loaded and the Control Toolkit can be used:

<asp:ScriptManager ID="asm" runat="server" />

The animation in this scenario will be applied to a panel of text which looks like this:

<asp:Panel ID="panelShadow" runat="server" CssClass="panelClass">
ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient,
more interactive and highly-personalized Web experiences that work across all the
most popular browsers.<br />
ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient,
more interactive and highly-personalized Web experiences that work across all the
most popular browsers.<br />
ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient,
more interactive and highly-personalized Web experiences that work across all the
most popular browsers.<br />
</asp:Panel>

The associated CSS class for the panel defines a background color and a width:

The whole animation is applied declaratively, using an XML syntax, unfortunately currently not fully supported by Visual Studio's IntelliSense. The root node is <Animations>; within this node, several events are allowed which determine when the animation(s) take(s) place:

OnClick (mouse click)

OnHoverOut (when the mouse leaves a control)

OnHoverOver (when the mouse hovers over a control, stopping the OnHoverOut animation)

OnLoad (when the page has been loaded)

OnMouseOut (when the mouse leaves a control)

OnMouseOver (when the mouse hovers over a control, not stopping the OnMouseOut animation)

The framework comes with a set of animations, each one represented by its own XML element. Here is a selection:

<Color> (changing a color)

<FadeIn> (fading in)

<FadeOut> (fading out)

<Property> (changing a control's property)

<Pulse> (pulsating)

<Resize> (changing the size)

<Scale> (proportionally changing the size)

In this example, the panel shall fade out. The animation shall take 1.5 seconds (Duration attribute), displaying 24 frames (animation steps) per second (Fps attributs). Here is the complete markup for the AnimationExtender control:

Author Information

Christian Wenz – Christian Wenz is an author, trainer, and consultant. His main focus of working and writing is on web technologies and security. Christian has written or co-written over 100 books for various publishers. He works with both open source and closed source web technologies. This leads to the unusual situation that he has both been awarded a Microsoft MVP for ASP/ASP.NET and is listed in Zend's Who is Who of PHP. He is also listed in Mozilla's credits (about:credits) and is considered an expert in browser-agnostic JavaScript.

Installs powered by the Microsoft Web Platform Installer

The product(s) you are about to install leverage the Web Platform Installer (WebPI) for installation. By downloading and using the Web Platform Installer (WebPI), you agree to the license terms and privacy statement for WebPI. This installer will contact Microsoft over the Internet to retrieve product information. WebPI uses the Microsoft Customer Experience Improvement Program (CEIP), which is turned on by default, see privacy statement for more information. Some of the Microsoft software obtained through WebPI may use CEIP. To view which software uses CEIP, see here.