More About Layouts

Layouts can be defined at the container level or at the object level. It is recommended that layout attributes be defined for the parent object with respect to the positioning required for the child object as shown in the examples below.

Note: It is recommended that you group objects if you have changing animations, size or positions at runtime.

Layouts are of the following types:

• StackedHorizontal: Objects are aligned from left to right. By default, the objects as a group, are center aligned. To top- or bottom-align the objects within the group, set the VerticalAlignment attribute to "Top" or "Bottom", respectively. This needs to be set in in the XML template. If you have two objects in a group, you need to specify the vertical alignment only for the second item. The second item will then be aligned relative to the first one. Use the Margin attribute to control overlap of objects. A negative margin setting will position an item closer to the object next to it.

• StackedVertical: Objects are aligned from top to bottom. By default, the objects, as a group, are center aligned. To left- or right-align the objects within the group, set the HorizontalAlignment attribute to "Left" or "Right", respectively. If you have two objects in a group, you need to specify the horizontal alignment only for the second object. The second item will then be aligned relative to the first object. This needs to be set in in the XML template. Use the Margin attribute to control overlap of objects. A negative margin setting will position an item closer to the item below it.

• Overlaid: All objects are placed at the same spot, and the order in which they are placed is controlled by the value of the ZIndex. The object with the lowest ZIndex will be at the top of the overlaid stack. Bigger objects can be stacked at the bottom and overlaid with smaller objects with the smallest object on the top.

Example: StackedHorizontal

Example: StackedVertical

Example: Overlaid