IMAGE_GROUP_BOX
Passive element (it does not respond to mouse or keyboard) that displays a image composed of 9 parts:

This enables this special image to be resized without stretching. That's the reason why it's named 'group box': it can be a cell that groups several widgets and offer a frame around those widgets, without having to bother about the size of these widgets.
Top, left, center, right and bottom images are tiled according to the size of the image set with the 'width' and 'height' attributes or computed from the children cells.
For more information about image files, see the Images section.
Attributes brief detailed show all inherited
Example
You may want to have a look at the examples for the IMAGE widget, which is simpler than the IMAGE_GROUP_BOX but similar.
If the size is not set, but the group box contains other widgets, the group box will adapt its size to its content and its layout properties (see the CELL element for more information about layout properties).
Here's an example of factory group boxes included with the default PnS Skin.
- <!-- groups from the modern BCA theme -->
- <ROW spacing="10">
- <IMAGE_GROUP_BOX image="$PLUGIN_DATA_PATH$/Skins/Modern-Theme/group_boxes/graph_box.png">
- <TEXT value="graph_box" width="150" height="80" text_color="#FFFFFF" />
- </IMAGE_GROUP_BOX>
- <IMAGE_GROUP_BOX image="$PLUGIN_DATA_PATH$/Skins/Modern-Theme/group_boxes/graph_bg.png" image_scaling="2">
- <TEXT value="graph_bg" width="150" height="80" text_color="#FFFFFF" />
- </IMAGE_GROUP_BOX>
- <IMAGE_GROUP_BOX image="$PLUGIN_DATA_PATH$/Skins/Modern-Theme/group_boxes/graph_glass.png" stretch="true" >
- <TEXT value="graph_glass" width="150" height="80" />
- </IMAGE_GROUP_BOX>
- </ROW>
- <!-- groups from the standard BCA theme -->
- <ROW spacing="10">
- <IMAGE_GROUP_BOX image="$PLUGIN_DATA_PATH$/Skins/Controls/Groups/FORK_LARGE.png">
- <TEXT value="FORK_LARGE" width="150" height="80" />
- </IMAGE_GROUP_BOX>
- <IMAGE_GROUP_BOX image="$PLUGIN_DATA_PATH$/Skins/Controls/Groups/full.png">
- <TEXT value="full" width="150" height="80" />
- </IMAGE_GROUP_BOX>
- <IMAGE_GROUP_BOX image="$PLUGIN_DATA_PATH$/Skins/Controls/Groups/plain.png">
- <TEXT value="plain" width="150" height="80" />
- </IMAGE_GROUP_BOX>
- </ROW>
- <!-- you can define a group box to re-use it easily -->
- <MY_GROUP_BOX base_type="IMAGE_GROUP_BOX" image="/PATH/TO/FILES/group_box.png"/>

The same on light skin.

In the appropriate folders we see several image files for each group box:


Other options
You could also use inline svg or CANVAS to draw custom group boxes without using external images. In LM Skin you could use the built-in LM_BOX element.
- <!-- draw background layer using LM_BOX/CANVAS with 100% height/width -->
- <LM_BOX round="10" opacity="1.00" fill_opacity="0.37" fill_pos="40" stroke_width="2.5" stroke_opacity="0.6" stroke_color="#077dbe" gradient_type="1" fill_color2="#077dbe" fill_opacity2="0.2" min_width="20" min_height="20" />
- <!-- write text on top -->
- <CELL margin="10">
- <TEXT value="This group box uses no external graphics." />
- <TEXT value="It's made with help of LM_BOX element," />
- </CELL>
- </LAYER_STACK>

Comments
Please, authorize to view and post comments.