Accordion for WinForms | ComponentOne
In This Topic
    Quick Start
    In This Topic

    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

    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.
      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.
      Copy Code
      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.
      Copy Code
      ListView mailListView;
      ListView tasksListView;
      ImageList imgList;
      public Form1()
          //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
          //initialize the ListView control for tasks page
          var mailPage = c1Accordion1.Pages[0];
          var taskPage = c1Accordion1.Pages[1];
          mailPage.ContentHeight = taskPage.ContentHeight = 200;
          //Add controls in content area of AccordionPage