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.

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.

   C#

   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.

   C#

   Copy Code

   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); }