AnimationExtender Control,AnimationExtender Control property,How To Use AnimationExtender control

Right Place For Right Person ^TM

R4R

AJAX with C#

AJAX Tutorials

AnimationExtender Control

AnimationExtender Control

AnimationExtender Control is an ajax control that provides powerful animation framework with existing pages in an easy, declarative fashion animation effect .such as moving an ASP Control to a new place, resizing it, modifying its color, or making it fade in or fade out.

AnimationExtender Control property

TargetControlID -It is the ID of the target control which events are used to animate
OnLoad - when page is loaded, Generic animation created
OnClick - when the target control is clicked,Generic animation created
OnMouseOver - when the mouse moves over the target control than Generic animation created
OnMouseOut - Generic animation created when the mouse moves out of the target control
OnHoverOver it is same as an OnMouseOver except before it plays, stop the OnHoverOut animation
OnHoverOut - It is same as an OnMouseOutr except before it plays, stop the OnHoverOut animation

How To Use AnimationExtender control

Step 1. Start -> All Programs -> Visual Studio 2005 or Visual Studio 2008

Step 2. Now go to File Menu -> New -> Web Site

Step 3.
Under Visual Studio Installed Template-> Choose ASP.NET WEB SITE ->

Choose File System from the location combo box -> Set the path by the browse button - > Choose the language from the Language ComboBox (Visual C# ,Visual Basic , J #)

Choose Visual C#

Step 4. Click on the OK Button.
Step 5. Now drag some controls under the AJAX Extensions.
First control you are going to drag and drop on the page is - Script Manager.
After that .


<%@ Page Language="C#" AutoEventWireup="true"  Codevirtual="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body bgcolor="#cc99ff">
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        
        </asp:ScriptManager>
        <cc1:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="Button1">
        <Animations>
<OnClick>
<Sequence>
<Color AnimationTarget="Button1" Duration="50" StartValue="#FFF000" EndValue="#FF6666" 
PropertyKey="backgroundColor" />
<EnableAction Enabled="true" />
</Sequence>  
</OnClick>
</Animations>
        </cc1:AnimationExtender>
       <asp:Panel ID="Panel1" runat="server">
<asp:Button ID="Button1" runat="server" Text="Animation" OnClick="Button1_Click" />
<asp:Label ID="Label1" runat="server" BackColor="#33CCFF"></asp:Label>
</asp:Panel>
    </div>
    </form>
</body>
</html>
........................................CS CODE.......................................................


using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = "hello!. It is a AnimationExtender Control program";
    }
}