In the last step, you customized the appearance and behavior of the C1Accordion control. In the next step, you will add accordion panes, which you will customize and add content to.

Complete the following steps.

1. Place your cursor between the <c1:C1Accordion> and </c1:C1Accordion> tags and press ENTER.
2. Navigate to the Toolbar and click the C1AccordionItem icon to add an accordion pane to the control. Repeat this twice so that a total of three Accordion Items are added to the C1Accordion control. The XAML markup will resemble the following:

XAML	Copy Code
<c1:C1AccordionItem></c1:C1AccordionItem> <c1:C1AccordionItem></c1:C1AccordionItem> <c1:C1AccordionItem></c1:C1AccordionItem>

3. Add Header="Pane 1" to the first <c1:C1AccordionItem> tag, Header="Pane 2" to the second <c1:C1AccordionItem> tag, and Header="Pane 3" to the third <c1:C1AccordionItem> tag so that the XAML markup resembles the following:

XAML	Copy Code
<c1:C1AccordionItem Header="Pane 1"></c1:C1AccordionItem> <c1:C1AccordionItem Header="Pane 2"></c1:C1AccordionItem> <c1:C1AccordionItem Header="Pane 3"></c1:C1AccordionItem>

4. Add Background="Aqua" to the first <c1:C1AccordionItem> tag, Background="AliceBlue" to the second <c1:C1AccordionItem> tag, and Background="LawnGreen" to the third <c1:C1AccordionItem> tag so that the XAML markup resembles the following:

XAML	Copy Code
<c1:C1AccordionItem Header="Pane 1" Background="Aqua"></c1:C1AccordionItem> <c1:C1AccordionItem Header="Pane 2" Background="AliceBlue"></c1:C1AccordionItem> <c1:C1AccordionItem Header="Pane 3" Background="LawnGreen"></c1:C1AccordionItem>

5. Add content to the first two accordion panes by completing the following steps:

a.   Add Content="This is text content" to the first <c1:C1AccordionItem> tag so that the XAML resembles the following:

<c1:C1AccordionItem Header="Pane 1" Background="Aqua" Content="This is text content">

b.   Place your cursor between the second set of <c1:C1AccordionItem> and </c1:C1AccordionItem> tags and press ENTER.

c.    Navigate to the Toolbox and double-click the Calendar icon to add a Calendar control as the second pane's content. The XAML resembles the following:

<c1:C1AccordionItem Header="Pane 2" Background="AliceBlue">

        <sdk:Calendar></sdk:Calendar>

</c1:C1AccordionItem>

6. Add IsExpanded="True" to the second <c1:C1AccordionItem> tag so that the XAML resembles the following:

XAML	Copy Code
<c1:C1AccordionItem Header="Pane 2" Background="AliceBlue" IsExpanded="True">

7. This means that the second accordion pane, which holds the Calendar control, will be expanded at run time.

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.