ASP.NET (snapshot 2017) Microsoft documentation and samples

Modifying Animations From The Server Side (C#)

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:

[!code-aspxMain]

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

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

[!code-aspxMain]

   1:  <asp:Panel ID="panelShadow" runat="server" CssClass="panelClass">

   2:   ASP.NET AJAX is a free framework for quickly creating a new generation of more

   3:   efficient, more interactive and highly-personalized Web experiences that work

   4:   across all the most popular browsers.<br />

   5:   ASP.NET AJAX is a free framework for quickly creating a new generation of more

   6:   efficient, more interactive and highly-personalized Web experiences that work

   7:   across all the most popular browsers.<br />

   8:   ASP.NET AJAX is a free framework for quickly creating a new generation of more

   9:   efficient, more interactive and highly-personalized Web experiences that work

  10:   across all the most popular browsers.<br />

  11:  </asp:Panel>

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

[!code-cssMain]

   1:  <style type="text/css">

   2:   .panelClass {background-color: lime; width: 300px;}

   3:  </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:

[!code-aspxMain]

   1:  <script runat="server">

   2:  void Page_Load()

   3:  {

   4:   AjaxControlToolkit.AnimationExtender ae = new AjaxControlToolkit.AnimationExtender();

   5:   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:

[!code-cssMain]

   1:  ae.Animations = "<OnLoad><Parallel><FadeOut Duration=\"1.5\"

   2:   Fps=\"24\" /><Resize Width=\"1000\" Height=\"150\"

   3:   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:

[!code-htmlMain]

   1:  form1.Controls.Add(ae);

   2:  }

   3:  </script>

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

Previous Next

Comments (

)

<00> <01> <02> <03> <04> <05> <06> <07> <08> <09> <10> <11> <12> <13> <14> <15> <16> <17> <18> <19> <20> <21> <22> <23>

Link to this page: //www.vb-net.com/AspNet-DocAndSamples-2017/aspnet/web-forms/overview/ajax-control-toolkit/animation/modifying-animations-from-the-server-side-cs.htm