Dock Panel
The dock panel control arranges its child controls along specified 'docking edges' (top, bottom, left, and right) with the last child filling any remaining space. The dock panel can maintain the child control's dimension that is parallel to the docking edge, so that the child fills all the available space along the docking edge.
For example, if the docking edge on a child control is defined as 'top' and it has a height defined, but no width, it will draw like this:
You must define the child control dimension perpendicular to the docking edge, or it will not show.
You can optionally define the dimension that is parallel to the docking edge. In this case, the child will be drawn according to the alignment setting in the same direction. For example, a child with a defined width, docked to the top edge, will obey its horizontal alignment property (default center).
Child controls are docked in the sequence that they are defined in the XAML. When Avalonia UI is sizing a child control, the presence of any previously drawn controls is taken into account. That means there is never any overlap.
The last child control defined will fill any remaining space.
You must always define a last child control (with no dock property), or the docking calculation will not perform correctly. This means that a dock panel requires a minimum of two child controls.
Useful Properties
You will probably use these properties most often:
| Property | Description |
|---|---|
DockPanel.Dock.Left | Attached to a child control - dock this to the left side. |
DockPanel.Dock.Top | Attached to a child control - dock this to the top edge. |
DockPanel.Dock.Right | Attached to a child control - dock this to the right side. |
DockPanel.Dock.Bottom | Attached to a child control - dock this to the bottom edge. |
Example
Setting the opacity of the orange rectangle to 0.5 demonstrates that there are no overlaps.
<DockPanel Width="300" Height="300">
<Rectangle Fill="Red" Height="100" DockPanel.Dock="Top"/>
<Rectangle Fill="Blue" Width="100" DockPanel.Dock="Left" />
<Rectangle Fill="Green" Height="100" DockPanel.Dock="Bottom"/>
<Rectangle Fill="Orange" Width="100" DockPanel.Dock="Right" Opacity="0.5"/>
<Rectangle Fill="Gray" />
</DockPanel>
More Information
For the complete API documentation about this control, see here.
View the source code on GitHub DockPanel.cs