Panelelements are components that control the rendering of elements - their size and dimensions, their position, and the arrangement of their child content. Avalonia provides a number of predefined
Panelelements as well as the ability to construct custom
Panelis the base class for all elements that provide layout support in Avalonia. Derived
Panelelements are used to position and arrange elements in XAML and code.
MeasureOverridemethods. For more information on custom layout behaviors, see Create a Custom Panel.
Panelelements support the base sizing and positioning properties defined by
Margin. For additional information on positioning properties defined by
Control, see Alignment, Margins, and Padding Overview.
Panelexposes additional properties that are of critical importance in understanding and using layout. The
Backgroundproperty is used to fill the area between the boundaries of a derived panel element with a
Childrenrepresents the child collection of elements that the
Panelis comprised of.
RelativePanel. These panel elements are easy to use, versatile, and extensible enough for most applications.
Canvaselement enables positioning of content according to absolute x- and y- coordinates. Elements can be drawn in a unique location; or, if elements occupy the same coordinates, the order in which they appear in markup determines the order in which the elements are drawn.
Canvasprovides the most flexible layout support of any
Panel. Height and Width properties are used to define the area of the canvas, and elements inside are assigned absolute coordinates relative to the area of the parent
Canvas. Four attached properties,
Canvas.Bottom, allow fine control of object placement within a
Canvas, allowing the developer to position and arrange elements precisely on the screen.
Canvascan position child elements at any position on the screen, even at coordinates that are outside of its own defined
Canvasis not affected by the size of its children. As a result, it is possible for a child element to overdraw other elements outside the bounding rectangle of the parent
Canvas. The default behavior of a
Canvasis to allow children to be drawn outside the bounds of the parent
Canvas. If this behavior is undesirable, the
ClipToBoundsproperty can be set to
true. This causes
Canvasto clip to its own size.
Canvasis the only layout element that allows children to be drawn outside its bounds.
Canvascan be instantiated simply by using XAML or code. The following example demonstrates how to use
Canvasto absolutely position content. This code produces three 100-pixel squares. The first square is red, and its top-left (x, y) position is specified as (0, 0). The second square is green, and its top-left position is (100, 100), just below and to the right of the first square. The third square is blue, and its top-left position is (50, 50), thus encompassing the lower-right quadrant of the first square and the upper-left quadrant of the second. Because the third square is laid out last, it appears to be on top of the other two squares—that is, the overlapping portions assume the color of the third box.
DockPanelelement uses the
DockPanel.Dockattached property as set in child content elements to position content along the edges of a container. When
DockPanel.Dockis set to
Bottom, it positions child elements above or below each other. When
DockPanel.Dockis set to
Right, it positions child elements to the left or right of each other. The
LastChildFillproperty determines the position of the final element added as a child of a
DockPanelto position a group of related controls, such as a set of buttons. Alternately, you can use it to create a "paned" UI.
Widthproperties are not specified,
DockPanelsizes to its content. The size can increase or decrease to accommodate the size of its child elements. However, when these properties are specified and there is no longer room for the next specified child element,
DockPaneldoes not display that child element or subsequent child elements and does not measure subsequent child elements.
DockPanelelement will "fill" the remaining, unallocated space. If this behavior is not desired, set the
Borderelements are added as children of a parent
DockPanel. Each uses a different positioning property of a
DockPanelto partition space. The final element "fills" the remaining, unallocated space.
Gridelement merges the functionality of an absolute positioning and tabular data control. A
Gridenables you to easily position and style elements.
Gridallows you to define flexible row and column groupings, and even provides a mechanism to share sizing information between multiple
Gridcan take advantage of
Starsizing in order to distribute remaining space proportionally. When
Staris selected as the Height or Width of a row or column, that column or row receives a weighted proportion of remaining available space. This is in contrast to
Auto, which will distribute space evenly based on the size of the content within a column or row. This value is expressed as
2*when using XAML. In the first case, the row or column would receive one times the available space, in the second case, two times, and so on. By combining this technique to proportionally distribute space with a
Stretchit is possible to partition layout space by percentage of screen space.
Gridis the only layout panel that can distribute space in this manner.
StackPanelenables you to "stack" elements in an assigned direction. The default stack direction is vertical. The
Orientationproperty can be used to control content flow.
DockPanelcan also "stack" child elements,
StackPaneldo not produce analogous results in some usage scenarios. For example, the order of child elements can affect their size in a
DockPanelbut not in a
StackPanel. This is because
StackPanelmeasures in the direction of stacking at
DockPanelmeasures only the available size.
StackPanelto create a set of vertically-positioned buttons. For horizontal positioning, set the
WrapPanelis used to position child elements in sequential position from left to right, breaking content to the next line when it reaches the edge of its parent container. Content can be oriented horizontally or vertically.
WrapPanelis useful for simple flowing UI scenarios. It can also be used to apply uniform sizing to all of its child elements.
Buttoncontrols that wrap when they reach the edge of their container.
Panelelements can be nested within each other in order to produce complex layouts. This can prove very useful in situations where one
Panelis ideal for a portion of a UI, but may not meet the needs of a different portion of the UI.
Gridelement can be used instead of nested panels due to its flexibility as a layout container. This can increase performance in your application by keeping unnecessary elements out of the tree.