Step 2 of 3: Adding Accordion Panes

In the last step, you created a project with a customized C1Accordion control. In the next step, you will add accordion panes, which you will customize and add content to.

Complete the following steps:

Click the C1Accordion control once to select it.
In the Properties window, click the Items ellipsis button.

The Collection Editor: Items dialog box opens.

Click the Add button three times to add three C1AccordionItem items to the C1Accordion control.
Select the first C1AccordionItem and set the following properties:

Set the Background property to Aqua to set the background color of the accordion pane.
Set the Content property to "This is text content" to add text content to the accordion pane.
Select the second C1AccordionItem and set the following properties:
Set the Background property to AliceBlue to set the background color of the accordion panel.
Set the IsExpanded property to True so that this pane will be expanded at run time.

Select the third C1AccordionItem and set the Background property to LawnGreen to set the background color of the accordion pane.
Click OK to close the Collection Editor: Items dialog box.
Switch to XAML view and complete the following:

Add Header="Pane 1" to the first <c1:C1AccordionItem> tag.
Add Header="Pane 2" to the second <c1:C1AccordionItem> tag.
Add Header="Pane 3" to the third <c1:C1AccordionItem> tag.

Switch to Design view and add a control to the second accordion pane by completing the following steps:

a. In the Designer, click the second accordion pane to select it.

b. Navigate to the Toolbox and double-click the Calendar icon to add the control to the accordion pane.

In this step, you added three accordion panes to the C1Accordion control and then added content to two of the accordion panes. In the next step, you will run the project and observe the run-time features of the control.