Skip to main content

Layout Sites

  • 4 minutes to read

Layout sites provide advanced docking capabilities when arranging dock controls on a dock site. They are dynamically created when docking controls to a dock site and can also hold their own child dock controls. For reference information about layout sites, please refer to the TdxLayoutDockSite class description.

When Layout Sites are Created


When docking a control to a dock site, the control becomes the child of the site. Also, the neighboring layout site is created. The image below illustrates such a control layout.

Once a layout site has been created, you can dock controls to it. When a control is docked to a layout site, it becomes the site’s child. Also, the control’s neighboring layout site is created that fills the area of the first layout site that is not occupied by the docked control. The image below shows an example. (Since the structure of dock controls becomes complex, the first layout site is shown individually.)

The next image shows the Object TreeView window corresponding to such control layout.

Note that there is one additional way layout sites can be created. When there are controls already docked to a dock site you don’t necessarily have to dock other controls to layout sites. You can also dock them to the edge of the dock site itself. In this instance, all the previously docked controls together with neighboring layout sites are moved to a newly created layout site that becomes a neighbor of the docked control. The image below illustrates the layout of controls if the Folders panel was docked to the edge of the dock site rather than layout site.

What we’ve described so far in this topic give you the basic principles of creating layout sites. Perhaps the best way to understand the technology is to dock controls to dock sites and see the changes in the Object TreeView window. Also, this window can be used to select layout sites. Thus, you will see their actual arrangement.

The Purpose of Layout Sites


The best way to explain the purpose of layout sites is to provide an example of creating a layout of panels on a form. The form will correspond to a dock site and panels will correspond to dock panels.

Suppose you want to create the layout of panels as shown in the image below.

If you try to set the Align property of blue and green panels to alLeft and alBottom respectively, you will not get the desired layout. Actually, the layout will be as displayed in the image below. (The bottom aligned panel occupies the entire edge of the form.)

To create the desired layout, you need to perform the following steps:

  • Create a blue panel and set its Align property to alLeft;

  • Create one additional panel (yellow in the image below) and set its Align property to alClient. This panel will occupy all the form space not occupied by the blue panel;

  • Place a green panel onto the second panel (yellow) and set its Align property to alBottom.

The image below illustrates the result.

As you can see, the yellow panel is the analog of a layout site. It is used to enable different layouts of panels. In other words, it gives you the choice of whether to align a panel at the entire edge of the owning form, or to partially occupy this edge.

Feature Specifics


Since layout sites merely provide advanced arrangement capabilities, they do not support many of the features provided by dock panels. They cannot be docked or resized, cannot display caption buttons and the auto hide feature cannot be enabled for them.

See Also