Home/Web Forms/Tutorials/Chapter 5. Ajax Control Toolkit/Animation/Modifying Animations From 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)

By 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.

1. ← PreviousTriggering an Animation in another Control (C#)
2.  You're ViewingModifying Animations From Server Side (C#)
3. → NextExecuting Animations Using Client-Side Code (C#)