Container

As the name suggests, a container holds controls and other containers within it. The container provides the ability to position the controls within it in a simple and intuitive manner.

General

• Tooltip - Tooltip to be displayed on the container. Use this to provide additional information on the control.
• Data Context - A container for a single entity record. When this is set on a container, all controls that are part of that container can access the data context bound to the container.
• Hidden- If selected, hides the control in the runtime.
• Disabled - If selected, disables the control in the runtime.

Events

• Clicked on - Configure what happens when the container is clicked.

Style

• Control Alignment - By default, inherits the parent alignment. A different alignment other than the parent can be set. To default to Parent's alignment, toggle the selected alignment icons to switch off the specific alignment.

  Note: Alignment is dependent on Parent's layout (Vertical vs. Horizontal).

• Layout - Determine how the controls within the container are positioned:

  • Direction (Horizontal/Vertical) - Controls are arranged one below the other (vertical) or side by side (horizontal).
  • Alignment- Controls alignment within the container ( Left, Center, Right & Stretch for Vertical direction and Top, Middle, Bottom, Stretch for Horizontal direction).
  • Justify- Top, Middle, Bottom & Distribute for Vertical direction and Left, Center, Right & Distribute for Horizontal direction.

  • Allow wrapping - if enabled, it wraps the control in the container if there isn't enough space.

Note: When the Allow wrapping property is enabled, the controls within the container wrap if they cannot fit in a line.

• Allow Scrolling - if enabled, a scroll bar is added to the container if the content cannot fit within the space. To enable Allow Scrolling, the container must have a fixed height (vertical layout) or fixed width (horizontal layout).
• Background Color - Sets the background color of the container.
• Border - Sets the border for the control. Border Thickness, Border Color, and Corner Radius can be configured for the border.
• Font - Sets the font family for the container. All the controls within the container will have the same font family as that of the container.
• Margin- Sets the margin of the container. By default 0px margin is set. Top/Bottom and Left/Right margin properties are combined. These properties can be unlinked using the unlink button on the right side of the Margin section heading.
• Padding - Sets the padding of the container. Top/Bottom and Left/Right padding properties are combined. These properties can be unlinked using the unlink icon on the right side of the padding section heading if different padding values needed to set for each side.

• Size - The width and height of the container can be set in the size section. Min Width/ Min Height and Max Width/ Max Height is available under more (...) in the size section.

Important: If the container size is set to a fixed value and if the controls within them occupy more space than the fixed value, then Justify - Middle,Justify - Bottom doesn't apply in Vertical direction, and Justify - Center,Justify - Right doesn't apply in Horizontal direction.