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

Complete the following steps:

17. Click the top-left C1Expander's smart tag (the control marked Box1) to open the C1Expander Tasks menu.
18. 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 the Theme property and choose "rocket".
    • Click the drop-down arrow next to ExpandDirection and select Top to set the C1Expander's body  to expand above the header.
19. 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.
    • Click the drop-down arrow next to the Theme property and choose "rocket".
    • 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 control in the second row should be set to Left and the last control in the second row should be set to Right.

20. 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.

    For example, in the following image only the last control is expanded and all the rest are collapsed:

    

In this step you customized the appearance and behavior of the controls. Congratulations, you've completed this quick start guide!