# Step 3 of 4: Adding Accordion Panes

## Content

In the last step, you customized the appearance and behavior of the [C1Accordion](/componentone/api/wpf/online-extended/dotnet-framework-api/C1.WPF.Extended.4.6.2/C1.WPF.Extended.C1Accordion.html) 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](/componentone/api/wpf/online-extended/dotnet-framework-api/C1.WPF.Extended.4.6.2/C1.WPF.Extended.C1Accordion.html) control. The XAML markup will resemble the following:

```xml
<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:

```xml
<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:

```xml
<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:
    1. 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">`
    2. Place your cursor between the second set of `<c1:C1AccordionItem>` and `</c1:C1AccordionItem>` tags and press ENTER.
    3. 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:

```xml
<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](/componentone/api/wpf/online-extended/dotnet-framework-api/C1.WPF.Extended.4.6.2/C1.WPF.Extended.C1Accordion.html) 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.