Language

Modifying Animations From The Server Side (C#)

By Christian Wenz|

Download Code or Download PDF

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. The animations may also be changed on the server-side

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. The animations may also be changed on the server-side

Steps

First of all, include the ScriptManager in the page; then, the ASP.NET AJAX library is loaded, making it possible to use the Control Toolkit:

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

The animation 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>

In the associated CSS class for the panel, define a nice background color and also set a fixed width for the panel:

<style type="text/css"> .panelClass {background-color: lime; width: 300px;} </style>

The rest of the code runs on the server-side and does not use markup; instead, it uses code to create the AnimationExtender control:

<script runat="server"> void Page_Load() { AjaxControlToolkit.AnimationExtender ae = new AjaxControlToolkit.AnimationExtender(); ae.TargetControlID = "Panel1";

However, the Control Toolkit currently does not provide an API access to create the individual animations. It is however possible to set the AnimationExtender's Animations property to a string containing the XML markup used when assigning the animations declaratively. In order to create the XML which must not contain the <Animations> element you could use the .NET Framework's XML support or, as in the following code, just provide the string:

ae.Animations = "<OnLoad><Parallel><FadeOut Duration=\"1.5\" Fps=\"24\" /><Resize Width=\"1000\" Height=\"150\" Unit=\"px\" /></Parallel></OnLoad>";

Finally, add the AnimationExtender control to the current page, within the <form runat="server"> element, making sure that the animation is included and runs:

form1.Controls.Add(ae); } </script>

The animation is created using server-side C#/VB code (Click to view full-size image)

This article was originally created on June 2, 2008

Author Information

Christian Wenz

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.