FrameworkElement.FlowDirection Property

Reference

Definition

Namespace:: Windows.UI.Xaml

Important

Some information relates to prerelease product that may be substantially modified before it’s released. Microsoft makes no warranties, express or implied, with respect to the information provided here.

Edit

Gets or sets the direction in which text and other UI elements flow within any parent element that controls their layout. This property can be set to either LeftToRight or RightToLeft. Setting FlowDirection to RightToLeft on any element sets the alignment to the right, the reading order to right-to-left and the layout of the control to flow from right to left.

public:
 property FlowDirection FlowDirection { FlowDirection get(); void set(FlowDirection value); };

FlowDirection FlowDirection();

void FlowDirection(FlowDirection value);

public FlowDirection FlowDirection { get; set; }

var flowDirection = frameworkElement.flowDirection;
frameworkElement.flowDirection = flowDirection;

Public Property FlowDirection As FlowDirection

<frameworkElement FlowDirection="flowDirectionMemberName"/>

Property Value

FlowDirection

The direction that text and other UI elements flow within their parent element, as a value of the enumeration. The default value is LeftToRight.

Examples

This XAML example illustrates how a layout container such as Grid interprets a value of RightToLeft. If you look at the UI that this XAML produces, the "Chartreuse" rectangle appears in the top right, not the top left as it would when FlowDirection is the default LeftToRight.

<Grid FlowDirection="RightToLeft">
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Rectangle Fill="Chartreuse" Width="30" Height="30"/>
    <Rectangle Grid.Row="1" Fill="Purple" Width="30" Height="30"/>
    <Rectangle Grid.Column="1" Fill="Pink" Width="30" Height="30"/>
    <Rectangle Grid.Row="1" Grid.Column="1" Fill="Orange" Width="30" Height="30"/>
</Grid>

Remarks

FlowDirection is intended for support of right-to-left layout for apps. Basically, setting FlowDirection to RightToLeft should produce an appropriate right-to-left behavior and rendering of any XAML control that it is applied to. Specific XAML controls may have further handling within their templates or logic that responds to FlowDirection of RightToLeft that isn't noted in this topic, and this might be noted in the reference topics for those XAML controls.

An object inherits the FlowDirection value from its parent in the object tree. Any element can override the value it gets from its parent. If not specified, the default FlowDirection is LeftToRight.

If the FlowDirection value on an object is RightToLeft, certain values and behavior of the FrameworkElement will change:

Within the element, the coordinate frame of reference is flipped horizontally such that "(0, 0)" will be the top right corner. This affects the values returned by hit test API such as FindElementsInHostCoordinates.
If the FrameworkElement is a Path or other Shape, its visual content is flipped horizontally.
For layout containers, the coordinate frame of reference changes. "(0, 0)" in a Canvas is the top right corner. The "0" column in a Grid for purposes of Grid.Column is the rightmost column.
Within a control's template composition, the same layout changes apply. For example, if you set FlowDirection as RightToLeft for a RadioButton, the clickable button graphic will appear to the right of the text label content, because the Grid within the RadioButton template now treats "0" as the rightmost column, and the text label is right-aligned.
Image has a special behavior, see "FlowDirection for Image" section below.

Text in text containers such as TextBlock or TextBox does not flip horizontally if FlowDirection is RightToLeft, neither the whole string nor individual characters or glyphs are flipped. The order of Inline elements in an InlineCollection does not change either. This enables mixing content in an otherwise right-to-left app, such as including deliberate English language strings in an Arabic language UI. Any string that is intended to be a text source for a text container where the intended language is a right-to-left language should specify that string in the appropriate Unicode representation, which will be correctly presented in a text container. However, a value of FlowDirection as RightToLeft in a text container does change the default TextAlignment value such that the right edge of the text is right-aligned with the text container bounds.

FlowDirection has no visible effect on text in a Glyphs element but does change the element's hit testing and coordinate frame of reference.

FlowDirection for Image and MediaElement

If you set FlowDirection as RightToLeft for an Image, the visual content of an Image is flipped horizontally. However, an Image element does not inherit the FlowDirection value from any parent element. Typically you only want image-flipping behavior in images that are relevant to layout, but not necessarily to elements that have embedded text or other components that wouldn't make sense flipped for a right-to-left audience. To get image-flip behavior, you must set the FlowDirection element on the Image element specifically to RightToLeft, or set the FlowDirection property in code-behind. Consider identifying the Image element by x:Uid directive, and specifying FlowDirection values as a RESW resource, so that your localization experts can change this value later without changing the XAML or code.

MediaElement also does not inherit FlowDirection value from any parent element. If you do explicitly set FlowDirection as RightToLeft on MediaElement, then the media view area is flipped horizontally, similar to how an Image flips. Doing this deliberately should be even more rare than Image, because it's likely that any media source used in localized content already has any right-to-left issues corrected in the source media file.

FlowDirection for WebView and WebViewBrush

WebView and WebViewBrush don't promote any right-to-left information to how the HTML is loaded. If there are any left-to-right considerations in the HTML content, consider setting x:Uid directive on the WebView element and specifying any WebView.Source Uniform Resource Identifier (URI) value as a string-form RESW resource. WebView and WebViewBrush also don't inherit FlowDirection from any parent elements. Setting FlowDirection on WebView and WebViewBrush doesn't cause exceptions, but any value you set is ignored by the runtime.

Applies to

Share via