ComponentOne MultiPage for ASP.NET AJAX: MultiPage for ASP.NET AJAX Task-Based Help > Setting C1MultiPage Behaviors > Using Animation Effects

Using Animation Effects

C1MultiPage contains ten animation and thirty-one transition effects that allow you to customize interaction with the control. In this topic, you will set the Animation, Easing, and Duration properties to create an animation effect between page views. 

Setting Animation Effects in Design View

Complete the following steps to set animation effects:

1.   Click C1MultiPage's smart tag () to open the C1MultiPage Tasks menu and select MultiPage Designer.

            The C1MultiPage Designer Form appears.

2.   Use the Add Child Item button  to add two pages to your C1MultiPage.

Note: In order to scroll through the C1MultiPage control at run-time, you must add navigation buttons to the control.  For more information, see Using the Toolbar for Navigation.

3.   In treeview, select C1MultiPage1 to reveal a list of its properties and then complete the following:

      Set the Animation property to Fade.

 

 

      Set the Easing property to EaseOutBounce. This property determines the animation transition effect.  

      Set the Duration property to "1500". This will lengthen the duration of the animation effect, guaranteeing that you will notice the effect when you run the project.

 

 

4.   Click OK to close the C1MultiPage Designer Form.

5.   Run the project and switch to the second page of the C1MultiPage. Observe that the new page fades in and then bounces before settling into its natural state.

Setting Animation Effects in Source View

In Source view add Animation="Fade", Duration="1500", and Easing="EaseOutBounce" to the <cc1:C1MultiPage> tag so that it appears similar to the following:

 

<cc1:C1MultiPageID="C1MultiPage1" runat="server" Animation="Fade" Duration="1500" Easing="EaseOutBounce">

 

Run the project and switch to the second page of the C1MultiPage. Observe that the new page fades in and then bounces before settling into its natural state.

Setting Animation Effects in Code

Complete the following steps to set animation effects in code:

1.   Import the following namespace into your project:

      Visual Basic

Imports C1.Web.UI

Imports C1.Web.UI.Controls;

      C#

using C1.Web.UI;

using C1.Web.UI.Controls;

2.   Add the following code to the Page_Load event to choose the animation:

      Visual Basic

C1MultiPage1.Animation = PageSwitchEffect.Fade

      C#

C1MultiPage1.Animation = PageSwitchEffect.Fade;

3.   Set the duration of the animation:

      Visual Basic

C1MultiPage1.Duration = 1500

      C#

C1MultiPage1.Duration = 1500;

4.   Select an animation transition effect:

      Visual Basic

C1MultiPage1.Easing = Easing.EaseOutBounce

      C#

C1MultiPage1.Easing = Easing.EaseOutBounce;

5.   Run the project and switch to the second page of the C1MultiPage. Observe that the new page fades in and then bounces before settling into its natural state.


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