ExpandingContainer

Overview

The Ardisia ExpandingContainer component is a container that expands/contracts in response to user interaction on the header or by setting the "open" property directly.

Easy to chain these components together into a accordion like control.

Creating an ExpandingContainer

The ExpandingContainer extends SkinnableContainer and can be added to any container that implements IVisualElementContainer.

Using the Component

The ExpandingContainer can parent any child visual element that implements IVisualElement, exactly like the SkinnableContainer.

Add an optional label and icon via the "label" and "icon" properties respectively.

To open/close the container without user interaction, set the "open" property programmatically. Only the "change" event will fire when open is changed this way and no animations will run.

Animations & Effects

Each ExpandingContainer can animate the expand/contract animation via the "duration" and "easer" property. Set the "duration" property to 0 to skip the animation entirely.

Using a Bounce easer creates a rather nifty effect.

Layout

By default, an open ExpandingContainer will size itself to the measured dimensions of its content. A closed ExpandingContainer will size itself to the size of the header button defined by the skins.

The header button will automatically adjust its size to fit the header content.

Accessibility

Can be tabbed to and opened/closed via the space bar.

Events

Dispatches three custom events:

EXPANDED
ardisia.components.expandingContainer.events.ExpandingContainerEvent
Dispatched when the component expands, or opens, via user interaction. Dispatched at the end of any animations.

COLLAPSED
ardisia.components.expandingContainer.events.ExpandingContainerEvent
Dispatched when the component contracts, or closes, via user interaction. Dispatched at the end of any animations.

CHANGE
ardisia.components.expandingContainer.events.ExpandingContainerEvent
Dispatched when the component's "open" property changes. Dispatched immediately before animations run.

Themes & Skinning

Skins for the Spark, London, and Stockholm themes are provided.

Example:

See the ExpandingContainerDemo application for example code.

Back To Top