# Quick Start

## Content



The following quick start guides the user how to create a simple application using Accordion. In this quick start, you'll create a new project in Visual Studio, add the Accordion control to your application, add pages to it and then add content to content area of the pages.

![WinForms Accordion with ListView](https://cdn.mescius.io/document-site-files/images/a9d1222b-0ddf-4c55-8888-49748b62a8c3/images/accordionwithlistviews.gif)

## Set Up the Application

1.  Create a new **Windows Forms App**.
2.  Configure your project and set the **Framework** to **.NET 6.0**.
3.  Install **C1.Win.Accordion** package using **NuGet Package Manager**. The **C1Accordion** control gets added to the **Toolbox** once the package gets installed.
4.  Drag and drop the **Accordion** control from the **Toolbox** onto the form.

## Add and Configure Accordion Page

1.  Click the Accordion smart tag to open **C1Accordion Tasks** panel and select **Edit Pages**. Alternatively, you can navigate to the **Pages** property in the **Properties** window and click the ellipsis button next to it.<br />This opens the **C1AccordionPage Collection Editor** with a page.
2.  In the **C1AccordionPage Collection Editor**, set the **Name** and **HeaderText** properties of the default page. In this example, we set the **Name** as mailPage and **HeaderText** as Mail.
3.  Click Add button to add another Page to the Accordion control and set its **Name** and **HeaderText** properties. Here, we set the **Name** as tasksPage and **HeaderText** as Task.
4.  Click **OK** to close the editor.

## Add Controls to the Content Area

1.  Switch to the code view and create controls to be shown in the pages. In this example, we created two ListViews and added items in them using the following code.
    
    ```csharp
    private void InitTasksList()
    {
        //create ListView
        tasksListView = new ListView();
        //dock to fill
        tasksListView.Dock = DockStyle.Fill;
        //set the View to List since we want the items to be shown as list
        tasksListView.View = View.List;
        //assign ImageList, will be used to show images for the items
        tasksListView.SmallImageList = imgList;
        //add items to the listview
        tasksListView.Items.Add("All tasks", "task");
        tasksListView.Items.Add("Completed", "task");
        tasksListView.Items.Add("Active", "task");
        tasksListView.Items.Add("Pending", "task");
    }
    private void InitMaiList()
    {
        //create ListView
        mailListView = new ListView();
        //dock to fill
        mailListView.Dock = DockStyle.Fill;
        //set the View to List since we want the items to be shown as list
        mailListView.View = View.List;
        //assign ImageList, will be used to show images for the items
        mailListView.SmallImageList = imgList;
        //add items to the listview
        mailListView.Items.Add("AllItems", "folder");
        mailListView.Items.Add("Inbox", "folder");
        mailListView.Items.Add("Sent", "folder");
        mailListView.Items.Add("Drafts", "folder");
    }
    ```
    
2.  Add the controls to the content panel of the AccordionPage. Here, we are adding the two ListViews in the two pages to display different options along with images. These images are accessible from the Images folder in the application.
    
    ```csharp
    ListView mailListView;
    ListView tasksListView;
    ImageList imgList;
    public Form1()
    {
        InitializeComponent();
        //create an ImageList
        imgList = new ImageList();
        //add images with custom keys
        imgList.Images.Add("folder", Resources.Folder);
        imgList.Images.Add("task", Resources.Journal_48);
        //initialize the ListView control for mails page
        InitMaiList();
        //initialize the ListView control for tasks page
        InitTasksList();
        var mailPage = c1Accordion1.Pages[0];
        var taskPage = c1Accordion1.Pages[1];
        mailPage.ContentHeight = taskPage.ContentHeight = 200;
        //Add controls in content area of AccordionPage
        mailPage.Controls.Add(mailListView);
        taskPage.Controls.Add(tasksListView);
    }
    ```