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 and then expand the AnimationOptions node. Set the following properties:
   
   • 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" ">
  <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:
   

   To write the code in Visual Basic:

     

   Visual Basic	Copy Code
   Imports C1.Web.UI

   To write the code in C#:

     

   C#	Copy Code
   using C1.Web.UI;

2. Set the duration of the animation:

   To write the code in Visual Basic:

     

   Visual Basic	Copy Code
   C1Splitter1.ResizeSettings.AnimationOptions.AnimationDuration = 1000

   To write the code in C#:

     

   C#	Copy Code
   C1Splitter1.ResizeSettings.AnimationOptions.AnimationDuration = 1000;

3. Select an animation transition effect:

   To write the code in Visual Basic:

     

   Visual Basic	Copy Code
   C1Splitter1.ResizeSettings.AnimationOptions.Easing = Easing.EaseOutBounce

   To write the code in C#:

     

   C#	Copy Code
   C1Splitter1.ResizeSettings.AnimationOptions.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.