ComponentOne Expander for ASP.NET AJAX: Expander for ASP.NET AJAX Quick Start > Step 4 of 4: Adding Animation Effects to C1Expander

Step 4 of 4: Adding Animation Effects to C1Expander

C1Expander includes over 25 built-in animation effects for when the control is expanded or collapsed. These effects can be set using the CollapseAnimation and ExpandAnimation properties. In the following steps you'll give each C1Expander control on the page different animation effects. The following steps assume you've completed the Step 3 of 4: Customizing C1Expander's Appearance and Behavior topic.

Complete the following steps:

1.   Select the top left C1Expander control (C1Expander1), navigate to the Properties window and set its CollapseAnimation property to ScrollOutToTop and its ExpandAnimation property to ScrollInFromTop.

2.   Repeat the previous step for each control setting the CollapseAnimation and ExpandAnimation properties for each control as you choose, for example set the CollapseAnimation and ExpandAnimation properties to the following:

      Set C1Expander2's CollapseAnimation property to ScrollOutToBottom and ExpandAnimation property to ScrollInFromBottom.

      Set C1Expander3's CollapseAnimation property to FadeOut and ExpandAnimation property to FadeIn.

      Set C1Expander4's CollapseAnimation property to CloseHorizontally and ExpandAnimation property to OpenHorizontally.

      Set C1Expander5's CollapseAnimation property to ScrollOutToRight and ExpandAnimation property to ScrollInFromRight.

      Set C1Expander6's CollapseAnimation property to UnFold and ExpandAnimation property to Fold.

      Set C1Expander7's CollapseAnimation property to Snake and ExpandAnimation property to Bounce.

      Set C1Expander8's CollapseAnimation property to DropOutToTop and ExpandAnimation property to DropInFromTop.

3.   Run your application and click on each C1Expander's header to expand the control and click on each expanded C1Expander control to collapse the control and view the various animation effects.

Congratulations, you've completed this quick start guide!


Send comments about this topic to ComponentOne.
Copyright © ComponentOne LLC. All rights reserved.