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.
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 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