In This Topic
The accordion is a widget that hosts one or more expandable sections, only one of which can be expanded at any given time. If the user clicks the header of a new section, it expands and the previously expanded section collapses.
- To get a list of all sections of an accordion, use it Sections property.
- To get a section by its header text, use the FindSection property of the accordion.
- To set the currently expanded section of the accordion, set its ExpandedSection or ExpandedSectionIndex property to the section/section index you want to be expanded.
- To expand or collapse a section (NExandableSection), set its Expanded property to true or false, respectively.
The following code example demonstrates how to find a section by its header text and toggle its Expanded state:
| Find a section by name and toggle its Expanded state |
Copy Code
|
NExpandableSection section = accordion.FindSectionByHeaderText("My Section");
if (section != null)
{
section.Expanded = !section.Expanded;
}
|
The expandable sections of the accordion should be placed in a layout panel, most commonly an accordion flex box panel or a stack panel.
Accordion Flex Box
If you want the expanded accordion section to occupy the whole available area, place the expandable sections in an NAccordionFlexBoxPanel. The accordion flex box panel automatically sets the Grow and Shrink extended properties of the expanded section to 1, which makes the expanded section occupy the whole available area of the accordion.
| Accordion with a Flex Box |
Copy Code
|
NAccordion accordion = new NAccordion();
NAccordionFlexBoxPanel panel = new NAccordionFlexBoxPanel();
accordion.Content = panel;
// Create the sections
panel.Add(CreateAccordionSection(NResources.Image__16x16_Mail_png, "Mail", CreateMailTreeView(), false));
panel.Add(CreateAccordionSection(NResources.Image__16x16_Calendar_png, "Calendar", CreateCalendar(), true));
panel.Add(CreateAccordionSection(NResources.Image__16x16_Contacts_png, "Contacts", CreateContactsTreeView(), false));
panel.Add(CreateAccordionSection(NResources.Image__16x16_Tasks_png, "Tasks", CreateTasksView(), false));
private NExpandableSection CreateAccordionSection(NImage image, string text, NWidget content, bool expanded)
{
NPairBox header = NPairBox.Create(image, text);
NExpandableSection section = new NExpandableSection(header, content);
section.Expanded = expanded;
return section;
}
|
Generic Accordion
If you want the accordion to size to the content of its collapsed section's headers and the header and content of the expanded section, you can use any other of the layout panels to host the expandable sections of the accordion. For example, here's how to use a stack panel:
| Accordion with a Stack Panel |
Copy Code
|
NAccordion accordion = new NAccordion();
NStackPanel panel = new NStackPanel();
panel.VerticalSpacing = 0;
accordion.Content = panel;
// Create the sections
panel.Add(CreateAccordionSection(NResources.Image__16x16_Mail_png, "Mail", CreateMailTreeView(), false));
panel.Add(CreateAccordionSection(NResources.Image__16x16_Calendar_png, "Calendar", CreateCalendar(), true));
panel.Add(CreateAccordionSection(NResources.Image__16x16_Contacts_png, "Contacts", CreateContactsTreeView(), false));
panel.Add(CreateAccordionSection(NResources.Image__16x16_Tasks_png, "Tasks", CreateTasksView(), false));
private NExpandableSection CreateAccordionSection(NImage image, string text, NWidget content, bool expanded)
{
NPairBox header = NPairBox.Create(image, text);
NExpandableSection section = new NExpandableSection(header, content);
section.Expanded = expanded;
return section;
}
|
See Also
