Skip to content

Latest commit

 

History

History
72 lines (48 loc) · 3.62 KB

adding-animation-to-a-control-cs.md

File metadata and controls

72 lines (48 loc) · 3.62 KB
Raw
uid title author description ms.author ms.date ms.assetid msc.legacyurl msc.type
web-forms/overview/ajax-control-toolkit/animation/adding-animation-to-a-control-cs
Adding Animation to a Control (C#) | Microsoft Docs
wenz
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... (C#)
riande
06/02/2008
0f1fc1f5-9dbd-44e7-931e-387d42f0342b
/web-forms/overview/ajax-control-toolkit/animation/adding-animation-to-a-control-cs
authoredcontent

Adding Animation to a Control (C#)

by Christian Wenz

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

[!code-aspxMain]

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

[!code-aspxMain]

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

[!code-cssMain]

Next up, we need the AnimationExtender. After providing an ID and the usual runat="server", the TargetControlID attribute must be set to the control to animate in our case, the panel:

[!code-aspxMain]

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 attribute). Here is the complete markup for the AnimationExtender control:

[!code-aspxMain]

When you run this script, the panel is displayed and fades out in one and a half seconds.

The panel is fading out

The panel is fading out (Click to view full-size image)

[!div class="step-by-step"] Next