# Adding Accordion Panes to the C1Accordion

## Content



In this topic, you will add an accordion pane to a [C1Accordion](/componentone/api/wpf/online-extended/dotnet-framework-api/C1.WPF.Extended.4.6.2/C1.WPF.Extended.C1Accordion.html) control in Design view, in XAML, and in code.

**At Design Time in Design view**

To add a pane to the **C1Accordion** control, complete the following steps:

1.  Click the **C1Accordion** control once to select it.
2.  In the Properties window, click the **Items** ellipsis button. The **Collection Editor: Items** dialog box opens.
3.  Click the **Add** button once to add one [C1AccordionItem](/componentone/api/wpf/online-extended/dotnet-framework-api/C1.WPF.Extended.4.6.2/C1.WPF.Extended.C1AccordionItem.html) item to the **C1Accordion** control.
4.  In the Properties grid, set the **Width** property to **"150"**.

**In XAML**

To add a pane to the **C1Accordion** control, place the following markup between the `<c1ext:C1Accordion>` and `</c1ext:C1Accordion>` tags:

```xaml
<c1ext:C1AccordionItem Name="C1AccordionItem" Width="150">
</c1ext:C1AccordionItem>
```

**In Code**

To add accordion panes in code, complete the following steps:

1.  Enter Code view and import the following namespace:
    ```vbnet
    Imports C1.WPF.Extended
    ```
    ```csharp
    using C1.WPF.Extended;
    ```
2.  Add the following code beneath the **InitializeComponent()** method:
    ```vbnet
    'Create the accordion pane and add content
    Dim C1AccordionItem1 As New C1AccordionItem()
    C1AccordionItem1.Content = "C1AccordionItem1"
    'Add the accordion pane to the C1Accordion control
    C1Accordion1.Items.Add(C1AccordionItem1)
    ```
    ```csharp
    //Create the accordion pane and add content
    C1AccordionItem C1AccordionItem1 = new C1AccordionItem();
    C1AccordionItem1.Content = "c1AccordionItem1";
    //Add the accordion pane to the C1Accordion control
    c1Accordion1.Items.Add(c1AccordionItem1);
    ```
3.  Run the program.