The Container Set control allows multiple container controls (referred to as Pages) to occupy the same visible space on a form with only one of the Pages visible at any time. The Pages can be moved through in a forward or backward direction or any page can be brought to the front at any time. Changing pages can also invoke graphical transitions sliding pages in from left to right, right to left, top to bottom or bottom to top. Other Morfik controls, including Container Sets and Subforms, may be placed on any of the pages.

View live demo

ContainerSetIcon.png Key properties: Active Page Index, Animate Scroll, Infinite Loop, Page Orientation
Key events: On Active Page Change
Server Code: ContainerSet = Class(TWebControlContainer)
Browser Code: ContainerSet = Class(TWebControl)


Property Description
Active Page Index Specifies which of the Pages of the control is the Active page at both Design time and Run time.
Animate Scroll When True, a scrolling transition will be displayed when the Active page is changed. When False the Active page will simply be replaced by the new page.
Border Color The BorderColor property specifies the color that should be used for drawing a rectangular border around the Control. Note: the border will not be visible unless the BorderStyle and BorderWidth properties are also set.
Border Sides The BorderSides property specifies the parts of a control's border that are displayed.
Border Style The BorderStyle property of the control defines how and if a border will be drawn around the control.
Border width The Border Width property specifies the line width used to draw the rectangular border around the Control. Note: the border will not be visible unless the BorderColor and BorderStyle properties are also set.
Color The Color property specifies the background color of the Control.
Cursor The Cursor property, if set, causes the appearance of the mouse cursor to change as it moves over the Control.
Height The Height property specifies the vertical extent of the Control. Note: if the CanGrow or CanShrink properties are set, the actual height of the Control at run time may be different.
Hint The Hint property, if set, specifies the text of a tooltip that is displayed when the user moves the cursor over the control.
Infinite Loop The value of Infinite Loop determines whether or not the Active Page Index will automatically cycle to the first page or last page when the maximum page is reached going forward or the minimum page is reached going backward.
Left The Left property specifies the horizontal position of the Control in the form.
Margins The Margins property clears an area around control (outside its border).
Name The Name property specifies the identifier used to reference the control from browser- or server-side code.
Opacity The Opacity property determines the extent to which the Control obscures any controls placed in its background. A value of 0 means that background controls are fully visible, whereas a value of 100 means that background controls are completely obscured.
Page Orientation This property determines if transitions between pages will display left to right and right to left (poHorizontal) or top to bottom and bottom to top (poVertical).
Shared Style The SharedStyle property can be used to force several controls always have the same appearance.
Tag The Tag property is used to store user data that is associated with the control.
Top The Top property specifies the vertical position of the Control in the form.
Width The Width property specifies the horizontal extent of the Form/control.

Events (browser-side)

Event Description
On Active Page Change When Animate Scroll is True, this event will fire once the transition to a new page has completed.



Run-time behavior

Runtime Methods can be used to change the active page of a Container Set. The methods NextContainer and PrevContainer increment and decrement the Active Page Index respectively and display the corresponding page. A page may also be displayed by just setting the ActivePageIndex property.

The Page Orientation property determines whether page transitions occur horizontally (poHorizontal) or vertically (poVertical). Vertical transitions will be from left to right using NextContainer and right to left using PrevContainer. Horizontal transitions will be from top to bottom using NextContainer and bottom to top using PrevContainer.

Other Considerations

Since Pages in a Container Set are themselves containers, any Morfik controls or widgets can be placed within any of the pages, including other container sets and subforms.

Related Topics