Containers, as I mentioned, may also be docked.
This docking can be to any edge of its container, or to the
container as a whole.
If docked to an edge, the container will resize
to ‘fit’ that edge and its two adjacent edges. If
docked to the top, for example, it will fill across the top to the
left and right edges, and retain its original height. At this point
only the height may be adjusted.
Other containers may also be docked, either to
the same edge, or other edges. Obviously not all containers may
take up the full width in all cases, due to other docked
containers. In these cases, the container at the ‘back’
(using the ‘send to back’ option) will take precedence.
This is also the case of two containers are docked to the same
edge. Non-docked containers are ignored in this
precedence.
Why would you want to dock containers to the same
edge? Well, here is where it can get clever. If you have two
containers docked to the same edge, and the ‘first’ (in
precedence) is hidden, the second is docked flush with that edge.
If the first becomes visible, the second will be
‘moved’ out of the way to accommodate the
first.
This is not easy to appreciate initially, as,
unlike resizing, you cannot adjust it a design time. What is really
allows you to do, is have a set of fields in a container that is
‘pushed’ out of the way when other fields are made
visible. Effectively, instead of having empty space of we want to
hide fields, we can move everything up the form, thus making the
form much neater and easier to use.
The special case in all this is a container that
is docked to ‘fill’ another container. If there are
other docked containers, the ‘fill’ container will move
out of the way and resize to accommodate them. This means the
‘fill’ container must be at the ‘front’ or
it will overshadow other containers. This precedence is based on
what is drawn first, ie at the back, gets first dibs on the
space.
In our Demo Docking example Solution we show what
happens to a set of docked panels. To demonstrate the way panels
and fields may move about, we have coloured each of the panels
differently, and added a Frame field to each panel and anchored the
Frame to all edges (to demonstrate how contained fields
behave).
In the Designer:
And at run time:
Docking containers in ‘competing’
positions is actually the only way to resize any container. Only
containers in the same container may resize each other like this,
or the changing size of the parent container. No container can
change the size of its parent container by filling it until it
overflows. The exception is a form, as that can scroll, but it does
not actually grow. Effectively, other containers have no scroll
facility, so fields will just get moved out of the visible area of
the panel and be hidden. This can, in fact, be potentially useful,
but more complex to design.
Dynamic field size and position.
