Culture Dependent Layout

When catering to end users globally, a user interface design benefits from accounting for both left-to-right (LTR) and right-to-left (RTL) writing systems. This chapter describes how the Layout Direction property works with different layouters. AutomaticDirection is currently the default value. You can change the interpretation of the AutomaticDirection by calling Layouter::SetAutomaticDirectionBehavior(). The default interpretation is to inherit the parent’s value. If no value is set on any parent, the culture layout direction is used. The value CultureDirection directly takes on the culture Layout Direction. The value InheritDirection takes on the Layout Direction of its parent. 
 Changing any child node’s Layout Direction property from LeftToRightDirection to RightToLeftDirection additionally results in a reinterpretation of the Horizontal Alignment property - values HLeft and HRight take on each other’s effects. The same is true for its children’s margins. 
 Grid Layouter 
 If a grid layouter’s Layout Direction property is set to RightToLeftDirection, the horizontal order in which its children are arranged will be reversed. If a child has its Column Span greater than 1, it will span across the cells on its left side instead of the right side. 
 
 
 
 
 
 
 
 
 Overlay Layouter 
 Overlay layouter’s Layout Direction property only has the general effects that all layouters share: its values HLeft and HRight take on each other’s effects and it exchanges left and right margin sizes of its children. 
 In the example screenshot below an overlay layouter’s children are a text node; two arrow buttons and a bar; and a solid color node with Stretch Behavior set to fill. The left arrow button has its left margin set to 750 (pixels), the bar to 805 and the right arrow to 1010. These left margins becomes the right margins when overlay layouter’s Layout Direction is set to RightToLeftDirection. The third example puts the two arrow buttons and the bar as children of a group node with Layout Direction set to LeftToRightDirection to prevent the three nodes from changing the order. Only the group node’s margin changes. 
 
 
 
 
 
 
 
 
 Stack Layouter 
 With the stack layouter’s Arrangement property set to Horizontal, the layout direction determines the order of its children. When the stack layouter’s Arrangement property is set to Vertical, the layout direction does not affect its children’s order. 
 
 
 
 
 
 
 
 
 Baseline Layouter 
 Changing baseline layouter’s Layout Direction property from LeftToRightDirection to RightToLeftDirection reverses the direction in which baseline layouter’s children are ordered. The horizontal alignment is similar to the StackLayouter. 
 
 
 
 
 
 
 
 
 DockPanel Layouter 
 When changing the layout direction of the DockPanel layouter to RightToLeftDirection, the left and right docks will be exchanged.