- Managing Projects
- Data Connection
- Creating an Application View
- Binding Editors to Data
- Creating a Parameterized View
- Configuring Navigation and Device-Specific App Layout
- Setting Up Application Security
- Adding Commands to the Application Toolbar
- How to Layout Views with 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:
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: center, 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.
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.