Dynamic control layout tells MegunoLink how to adjust the layout of controls on an Interface Panel visualizer when the size of the visualizer changes. It is useful to ensure all the controls remain accessible when used on computers with smaller displays.
There are 4 methods for dealing with control layout as the size of the visualizer window changes:
- scroll bars,
- docking, and
- flow layout panel.
The first 3 options are implemented by setting properties on controls. The Flow Layout Panel is a control that you can add to your Interface Panel using the Designer. Combine the different options to achieve the layout you want.
Control Layout Properties
The following properties can be edited in the Designer to control layout.
|Anchor||AnchorStyles||Top, Left, Bottom, Right||Top, Left||Use the Anchor property to define how a control is automatically resized as its parent control is resized. Anchoring a control to its parent control ensures that the anchored edges remain in the same position relative to the edges of the parent control when the parent control is resized.|
You can anchor a control to one or more edges of its container. For example, if you anchor a button to both Top and Bottom edges, the height of the button will be changed to maintain the distance to the top and bottom edges of the parent control.
|AutoSize||bool||True | False||False||Determines if the control resizes automatically based on its contents.|
|AutoSizeMode||AutoSizeMode||GrowOnly | GrowAndShrink||GrowOnly||Specifies how a control behaves when its AutoSize property is True. If |
|Dock||string||Top | Left | Bottom | Right | Fill | None||None||The control will be docked to an edge of its parent, or fill the space remaining after other controls are docked.|
|Location||Point||—||—||Position of the control, relative to its parent.|
|Margin||Padding||—||3||Sets the space between adjacent controls inside layout containers (such as the (|
|MaximumSize||Size||—||0, 0||The largest size of the control when automatic sizing is enabled.|
|MinimumSize||Size||—||0, 0||The smallest size of the control when automatic sizing is enabled.|
|Padding||Padding||—||0, 0, 0, 0||The amount of space between the control chrome and its content.|
|Size||Size||—||—||The size of the control.|
Scroll Bar Layout
When a container control’s
AutoScroll property is
True scroll-bars will be shown automatically if the size of the container becomes smaller than the controls inside it. This applies to:
- Design surface
- Flow Layout Panel
- Split Container
- Tab Control
- Table Layout Panel
Anchoring locks the distance between one edge of a control and the same edge on its parent. For example, if you anchor the left and right edges of a button on the design surface then the size of the button will grow and shrink as the Interface Panel window is resized.
Docking a control attaches it either to one edge of its parent container, or causes it to fill its parent container. The control size will change automatically when the parent is resized. A common arrangement is to dock a Panel container to one edge of the design surface and fill the remainder with another control. The Panel provides a container for other controls. Turn on
AutoScroll and scroll bars will appear automatically if the Panel becomes smaller than the controls inside it.
Flow Layout Panel
The Flow Layout Panel is a handy container for other controls. It will layout its content from left to right wrapping the controls to a new line if the Flow Layout Panel is too narrow for its content, by default. Use the
FlowDirection property to control the layout direction.
AutoSize is true, the Flow Layout Panel will grow to accommodate its contents. The Flow Layout Panel is commonly docked to an edge of its parent container with a second control filling the remaining space. This helps make sure the controls inside the panel remain visible when the Interface Panel changes size.
Use the child control’s
Margin property to control the spacing between children. For more control over the layout, use a Panel container.