Panel
. These Panel
elements enable many complex layouts. For example, stacking elements can easily be achieved by using the StackPanel
element, while more complex and free flowing layouts are possible by using a Canvas
.Panel
controls:Panel
Panel
Canvas
DockPanel
Grid
RelativePanel
StackPanel
WrapPanel
Panel
is an abstract class and laying out multiple controls to fill the available space is usually done with a Grid
with no rows/columns. In Avalonia Panel
is a usable control that has the same layout behavior as a Grid
with no rows/columns, but with a lighter runtime footprint.Control
consumed by the layout system can be thought of as a rectangle that is slotted into the layout. The Bounds
property returns the boundaries of an element's layout allocation. The size of the rectangle is determined by calculating the available screen space, the size of any constraints, layout-specific properties (such as margin and padding), and the individual behavior of the parent Panel
element. Processing this data, the layout system is able to calculate the position of all the children of a particular Panel
. It is important to remember that sizing characteristics defined on the parent element, such as a Border
, affect its children.Panel
element's Children
collection. Layout is an intensive process. The larger the Children
collection, the greater the number of calculations that must be made. Complexity can also be introduced based on the layout behavior defined by the Panel
element that owns the collection. A relatively simple Panel
, such as Canvas
, can have significantly better performance than a more complex Panel
, such as Grid
.Control
are evaluated, such as Width
, Height
, and Margin
.Panel
-specific logic is applied, such as Dock
direction or stacking Orientation
.Children
collection is drawn on the screen.Children
are added to the collectionChildren
collection, a measure pass and an arrange pass. Each child Panel
provides its own MeasureOverride
and ArrangeOverride
methods to achieve its own specific layout behavior.Children
collection is evaluated. The process begins with a call to the Measure
method. This method is called within the implementation of the parent Panel
element, and does not have to be called explicitly for layout to occur.Visual
such as Clip
and IsVisible
are evaluated. This generates a constraint that is passed to MeasureCore
.Control
, such as its Height
, Width
and Margin
. Each of these properties can change the space that is necessary to display the element. MeasureOverride
is then called with the constraint as a parameter.Bounds
is a calculated value, you should be aware that there could be multiple or incremental reported changes to it as a result of various operations by the layout system. The layout system may be calculating required measure space for child elements, constraints by the parent element, and so on.DesiredSize
, which occurs during the MeasureCore
call. The DesiredSize
value is stored by Measure
for use during the content arrange pass.Arrange
method. During the arrange pass, the parent Panel
element generates a rectangle that represents the bounds of the child. This value is passed to the ArrangeCore
method for processing.ArrangeCore
method evaluates the DesiredSize
of the child and evaluates any additional margins that may affect the rendered size of the element. ArrangeCore
generates an arrange size, which is passed to the ArrangeOverride
method of the Panel
as a parameter. ArrangeOverride
generates the finalSize of the child. Finally, the ArrangeCore
method does a final evaluation of offset properties, such as margin and alignment, and puts the child within its layout slot. The child does not have to (and frequently does not) fill the entire allocated space. Control is then returned to the parent Panel
and the layout process is complete.