ComponentOne Expander for ASP.NET AJAX: Expander for ASP.NET AJAX Quick Start > Step 3 of 4: Customizing C1Expander's Appearance and Behavior

Step 3 of 4: Customizing C1Expander's Appearance and Behavior

You can easily customize C1Expander's appearance and behavior with C1Expander's built-in design-time support. In the following steps you'll change the size of each C1Expander control and header, set the control's initial state as collapsed, and customize the expand direction of each control. The following steps assume you've completed the Step 2 of 4: Adding Content to the C1Expander Control topic.

Complete the following steps:

1.   Click the top-left C1Expander's smart tag (the control marked Box1) to open the C1Expander Tasks menu.

2.   Set the following properties in the C1Expander Tasks menu:

      Uncheck the Expanded check box to set the Expanded property to False and set the C1Expander's initial state to collapsed.

      Click the drop-down arrow next to ExpandDirection and select Top to set the C1Expander's body  to expand above the header.

      Set the HeaderSize to "30px" to increase the size of the header.

      Set the Height to "100px" to decrease the control's height.

3.   Click the remaining C1Expander's smart tags to open their C1Expander Tasks menu, and set the following properties:

      Uncheck the Expanded check box to set the Expanded property to False and set the C1Expander's initial state to collapsed.

      Set the HeaderSize to "30px" to increase the size of the header.

      Set the Height to "100px" to decrease the control's height.

      Set the ExpandDirection property to reflect the text in each C1Expander's header.

For example the ExpandDirection of the first two C1Expander controls in the first row should be set to Top and the last two C1Expander controls in the first row should remain set to Bottom. The first two controls in the second row should be set to Left and the last two controls in the second row should be set to Right.

4.   Run the application and observe that the C1Expander controls now initially appear collapsed and that, on clicking the header of each control, they expand in the direction indicated in the header of each control.

In this step you customized the appearance and behavior of the controls. In the next step you'll add animation effects to the controls.


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