Modifying Animations From The Server Side
Modifying Animations From The Server Side
Christian Wenz
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>
Next Tutorial