Try Xenarius Free

Stackpanel

Stack panel is the main layouting container in Xenarius. Combining two or more stack panels you can build almost any layout you may need. You may also use stackpanels to align components on a view.

How stackpanel aligns components

Depending on the orientation property value, StackPanel stacks child components along horizontal or vertical axises. Default orientation is vertical.

Vertically stacked components:

Vertically stacked components

Horizontally stacked components:

Horizontally stacked components

Horizontal Align property specify alignment across the horizontal axis. Possible values left, center and right. These will align the components by the left or right border, or center them.

Vertical Align property controls component alignment across vertical axis. Possible values are top, middle and bottom.

These properties can be used for both orientation values. For example: Orientation: vertical, Horizontal Align: left, Vertical Align: middle

Orientation: vertical, Horizontal Align: left, Vertical Align: middle

Orientation: vertical, Horizontal Align: center, Vertical Align: middle Orientation: vertical, Horizontal Align: center, Vertical Align: middle

Orientation: horizontal, Horizontal Align: left, Vertical Align: middle Orientation: horizontal, Horizontal Align: left, Vertical Align: middle

How stackpanel set component sizes

There are several options to specify component sizes with stackpanel. If you specify component size in pixels, stackpanel won’t change them, the component will have the size you specified.

If you specify the size in percents for width for vertical orientation or for height for horizontal orientation, stackpanel will multiply the cross-axis size in pixels by the percent you specified. For example, the stackpanel has size 400x200 pixels, vertical orientation and you specify child component width 50%. With this settings, the child component will have width 200 pixels.

  • If you specify size in percents for height for vertical orientation or for width for horizontal orientation, the behaviour will be different:

  • If there is enough place to accommodate all components, the calculation will be the same as cross-axis. When the stackpanel cannot accommodate all its child components, it resizes child components based on sizes they have. Priority will be given to components with size in pixels. Remaining space will be occupied by components with size in percents. Components will never get smaller than size necessary to display their text contents. You can find some examples below. All of them shows a stackpanel with vertical orientation.

stackpanel example 1

Component paddings and margins

You can specify paddings inside stackpanel. They will reduce stackpanel’s content area. Layout rules will stay the same.

Margins add space around child components but don’t shrink them. This means that if you add a child component with 100% width and specify margin, the component may be larger than containing stackpanel.