DockPanel - SirePi/duality-ui GitHub Wiki

The DockPanel layouts its child Controls along its sides or in the center, according to each child's Docking property; loosely based upon Winform's Dock property. Derives from ControlsContainer.

Dock

The Dock enumerator is used to set a Control's place and size inside a DockPanel. It allows the following values:

  • Center - default value
  • Left
  • Right
  • Top
  • Bottom

This picture shows the areas taken by each docking location. The yellow part is the exclusive area, while the orange ones are taken by the first child Control that is added in the appropriate location.

image

The child Controls's Position and Size property are automatically recalculated according to the following table, assuming that FreeSpace (FS) starts out as a rectangle with its origin in the DockPanel's ActualPosition, and with size equals to the DockPanel's ActualSize - Margin.

Docking ActualPosition ActualSize
Center [FS.Left, FS.Top] [FS.Width, FS.Height]
Left [FS.Left, FS.Top] [Child.Width, FS.Height]
Right [FS.Right - Child.Width, FS.Top] [Child.Width, FS.Height]
Top [FS.Left, FS.Top] [FS.Width, Child.Height]
Bottom [FS.Left, FS.Bottom - Child.Height] [FS.Width, Child.Height]

After each child Control has been added, the FreeSpace available is recalculated; this means that the order in which the children are added to the DockPanel affects their layout. The only exception is for the Center-docked child (of which there should be only one - no checks are made to enforce it), which is added last, to take up the remaining space.


The following images show the results of adding the same children in different order:

Yellow, Green: Docking Left; Red, Blue: Docking Bottom

[Yellow, Red, Green, Blue] [Yellow, Green, Red, Blue]
image image

If the child Control's StretchToFill property is set to false, it will use both its Size dimensions, and will appear centered in the desired Docking slot, as shown in the following image for the Red block.

image