C1TabControl contains ten animations 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 C1TabControl page views.
For more information, see Animation and Transition Effects.
In Design View
Complete the following steps:
1. Click C1TabControl's
smart tag (
) to
open the C1TabControl Tasks menu and select TabControl Designer.
The C1TabControl Designer Form appears.
2. Use the Add Child
Item button 
to add two tabs to your C1TabControl.
3. In treeview, select C1TabControl1 to reveal a list of its properties.
4. Navigate to the Animation property and set it to Fade.
5. Find the Easing property and select EaseOutBounce from its drop-down list. The Easing property will govern the animation's transition effect.
6. Locate the Duration property and enter "1500" into its text box. This will lengthen the duration of the animation effect, guaranteeing that you will notice the effect when you run the project.
7. Click OK to close the C1TabControl Designer Form.
8. Run the project and then click on the second tab. Observe that the new page fades in and then bounces before settling into its natural state.
In Source View
In Source view add Animation="Fade", Duration="1500" and Easing="EaseOutBounce" to the <cc1:C1TabControl> tag so that it appears similar to the following:
<cc1:C1TabControl ID="C1TabControl1" runat="server" Animation="Fade" Duration="1500">
When you run the project, observe that the new page fades in and then bounces before settling into its natural state.
In Code
Complete the following steps:
1. Import the following namespace into your project:
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:
Me.C1TabControl1.Animation = PageSwitchEffect.Fade
• C#
this.C1TabControl1.Animation = PageSwitchEffect.Fade;
3. Set the Duration of the animation by inserting the following code to your Page_Load event:
Me.C1TabControl1.Duration = 1500
• C#
this.C1TabControl1.Duration = 1500;
4. Se the Easing effect to EaseOutBounce:
Me.C1TabControl1.Easing = Easing.EaseOutBounce
• C#
this.C1TabControl1.Easing = Easing.EaseOutBounce;
5. Run the program and then click on the second tab. Observe that the new page fades in and then bounces before settling into its natural state.
|
