C1Splitter contains thirty-one transition effects that allow you to customize interaction with the control. In this topic, you will set the Easing and Duration properties to create an animation effect that occurs when the splitter bar is moved. This topic illustrates how to set each of these properties in Design view, in Source view, and in code.

In Design View

Complete the following steps:

1.   Select C1Splitter on the Web page and then navigate to the Properties window.

2.   Expand the ResizeSettings node to reveal another list of properties and then complete the following:

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

•      Set the AnimationDuration property to 1000. This will lengthen the duration of the animation effect, guaranteeing that you will notice the effect when you run the program.

3.   Run the program and then use your cursor to drag the splitter bar. Release the splitter bar and observe that it bounces for a few seconds before settling into a resting state.

In Source View

In Source view place <ResizeSettings AnimationDuration="1500" Easing="EaseOutBounce" /> between the <cc1:C1Splitter> and </cc1:C1Splitter> tags so that the markup appears similar to the following:

<cc1:C1Splitter ID="C1Splitter1" runat="server" Height="298px" SplitterDistance="75" VisualStylePath="~/C1WebControls/VisualStyles" Width="390px">

          <Bar Width="14" />

          <Panel2>

          </Panel2>

          <Panel1>

          </Panel1>

          <ResizeSettings AnimationDuration="1000" Easing="EaseOutBounce" />

</cc1:C1Splitter>

Run the program and then use your cursor to drag the splitter bar. Release the splitter bar and observe that it bounces for a few seconds before settling into a resting state.

In Code

Complete the following steps:

1.   Import the following namespace into your project:

•      Visual Basic

Imports C1.Web.UI

•      C#

using C1.Web.UI;

2.   Set the duration of the animation:

•      Visual Basic

C1Splitter1.ResizeSettings.AnimationDuration = 1000

•      C#

C1Splitter1.ResizeSettings.AnimationDuration = 1000;

3.   Select an animation transition effect:

•      Visual Basic

C1Splitter1.ResizeSettings.Easing = Easing.EaseOutBounce

•      C#

C1Splitter1.ResizeSettings.Easing = Easing.EaseOutBounce;

4.   Run the program and then use your cursor to drag the splitter bar. Release the splitter bar and observe that it bounces for a few seconds before settling into a resting state.

 This Topic Illustrates the Following:

The following illustration depicts the EaseOutBounce animation with a duration of 1,000 milliseconds:

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