Creating a Visual Studio .NET like Interface

Dec 28, 2020
2 minutes to read

This topic will guide you through creating an application with docking functionality similar to Microsoft’s Visual Studio .NET IDE. The resulting application will display a memo editor and a number of dock panels that can be docked to form’s edges, combined into tab containers and side containers.

Follow the steps below:

Create a new application.
Place a TdxDockSite control on the form and set the control’s Align property to alClient. The dock site will always occupy the form’s entire area.

Place a TdxDockPanel control on the form so that it fills the dock site’s entire area. Set the dock panel’s ShowCaption property to False to hide the panel’s caption. The panel created will represent the form’s client area.

Place a memo control on the panel and set the memo control’s Align property to alClient. The memo editor will occupy the entire panel (and thus the entire form).

Select the dock panel using the Object TreeView window. Set all the values of the AllowDockClients property to False. This will prevent other dock panels from being docked to the panel and panels will only be allowed to be docked to the underlying site. This prevents side containers and tab containers from being created which would include the panel representing the form’s client area.

Select the dock site using the Object TreeView window. Set the dtTop flag of the AllowDockClients property to False. This will prevent panels from being docked to the form’s top edge.

All the preparatory steps are now complete. You are now able to add dock panels to represent tool windows and fill them with the controls desired. These panels will be allowed to float, to be docked to the form’s edges (except the top edge) and to be joined into containers. Note: when a panel or a container is docked to a form’s edge, you can enable its auto hide feature. This can be done by pressing the auto hide button (highlighted in the image below).

The image below displays an arrangement of dock panels. The auto hide feature is enabled for the panel that is docked to the left edge. The panels at the bottom edge are joined into a side container. The panels at the right are in a tab container. A floating panel is also illustrated.