VerticalAlignment. The effects of these properties are important to understand, because they provide the basis for controlling the position of elements in Avalonia applications.
Panelelement. Fine control of positioning requires an understanding of the
Buttonelements in this illustration may appear to be placed randomly. However, their positions are actually precisely controlled by using a combination of margins, alignments, and padding.
Borderelement encapsulates a parent
StackPanel, with a
Paddingvalue of 15 device independent pixels. This accounts for the narrow
LightBlueband that surrounds the child
StackPanel. Child elements of the
StackPanelare used to illustrate each of the various positioning properties that are detailed in this topic. Three
Buttonelements are used to demonstrate both the
VerticalAlignmentproperties describe how a child element should be positioned within a parent element's allocated layout space. By using these properties together, you can position child elements precisely. For example, child elements of a
DockPanelcan specify four different horizontal alignments:
Center, or to
Stretchto fill available space. Similar values are available for vertical positioning.
Widthproperties on an element take precedence over the
Stretchproperty value. Attempting to set
Width, and a
Stretchresults in the
Stretchrequest being ignored.
HorizontalAlignmentproperty declares the horizontal alignment characteristics to apply to child elements. The following table shows each of the possible values of the
Buttonelements. Each attribute value is shown, to better illustrate the various rendering behaviors.
HorizontalAlignmentvalue are visible in the illustration.
VerticalAlignmentproperty describes the vertical alignment characteristics to apply to child elements. The following table shows each of the possible values for the
Buttonelements. Each attribute value is shown, to better illustrate the various rendering behaviors. For purposes of this sample, a
Gridelement with visible gridlines is used as the parent, to better illustrate the layout behavior of each property value.
VerticalAlignmentvalue are visible in the illustration.
Marginproperty describes the distance between an element and its child or peers.
Marginvalues can be uniform, by using syntax like
Margin="20". With this syntax, a uniform
Marginof 20 device independent pixels would be applied to the element.
Marginvalues can also take the form of four distinct values, each value describing a distinct margin to apply to the left, top, right, and bottom (in that order), like
Margin="0,10,5,25". Proper use of the
Marginproperty enables very fine control of an element's rendering position and the rendering position of its neighbor elements and children.
Buttonelements are spaced evenly with a ten-pixel margin buffer in each direction.
Marginin most respects. The Padding property is exposed on only on a few classes, primarily as a convenience:
TextBlockare samples of classes that expose a Padding property. The
Paddingproperty enlarges the effective size of a child element by the specified
Paddingto a parent
VerticalAlignmentprovide the positioning control necessary to create a complex UI. You can use the effects of each property to change child-element positioning, enabling flexibility in creating dynamic applications and user experiences.
Gridelement as a child of the
Borderin the first sample.
Paddingis applied to the parent
Gridis used to partition space between three child
Buttonelements are again used to show the various effects of
TextBlockelements are added to each
ColumnDefinitionto better define the various properties applied to the
Buttonelements in each column.