FrameworkElement.FlowDirection プロパティ

定義

レイアウトを制御する任意の親要素内でテキストやその他の UI 要素が流れる方向を取得または設定します。 このプロパティは、 LeftToRight または RightToLeft のいずれかに設定できます。 任意の要素で FlowDirection を RightToLeft に設定すると、配置が右に設定され、読み取り順序が右から左に設定され、コントロールのレイアウトが右から左にフローします。

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"/>

プロパティ値

テキストとその他の UI 要素が、列挙体の値として親要素内で流れる方向。 既定値は LeftToRight です

次の XAML の例は、 Grid などのレイアウト コンテナーが RightToLeft の値を解釈する方法を示しています。 この XAML によって生成される UI を見ると、FlowDirection が既定の LeftToRight の場合と同様に、左上ではなく、" Chartreuse" 四角形が右上に表示されます。

<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>

注釈

FlowDirection は、アプリの右から左へのレイアウトのサポートを目的としています。 基本的に、FlowDirection を RightToLeft に設定すると、適切な右から左への動作と、適用される XAML コントロールのレンダリングが生成されます。 特定の XAML コントロールは、このトピックに記載されていない RightToLeft の FlowDirection に応答するテンプレートまたはロジック内でさらに処理を行う場合があり、これらの XAML コントロールのリファレンス トピックに記載されている場合があります。

オブジェクトは、オブジェクト ツリー内の親から FlowDirection 値を継承します。 どの要素でも、親から取得した値をオーバーライドできます。 指定しない場合、既定の FlowDirectionLeftToRight です

オブジェクトの FlowDirection 値が RightToLeft の場合、 FrameworkElement の特定の値と動作が変更されます。

  • 要素内では、"(0, 0)" が右上隅になるように、参照の座標フレームが水平方向に反転されます。 これは、ヒット テスト API によって返される値 ( FindElementsInHostCoordinates など) に影響します。
  • FrameworkElementPath またはその他の Shape の場合、そのビジュアル コンテンツは水平方向に反転されます。
  • レイアウト コンテナーの場合、参照の座標フレームが変更されます。 キャンバスの "(0, 0)" が右上隅にあります。 Grid.Column を目的とした Grid の "0" 列は、右端の列です。
  • コントロールのテンプレートコンポジション内では、同じレイアウト変更が適用されます。 たとえば、FlowDirection を RadioButtonRightToLeft に設定した場合、RadioButton テンプレート内のグリッドで "0" が右端の列として扱われ、テキスト ラベルが右揃えになっているため、クリック可能なボタン グラフィックがテキスト ラベルコンテンツの右側に表示されます。
  • 画像 には特別な動作があります。後述の「FlowDirection for Image」セクションを参照してください。

FlowDirection が RightToLeft の場合、TextBlockTextBox などのテキスト コンテナー内のテキストは水平方向に反転しません。文字列全体も個々の文字やグリフも反転されません。 InlineCollection 内の Inline 要素の順序も変更されません。 これにより、アラビア語 UI に意図的な英語の文字列を含めるなど、それ以外の場合は右から左のアプリでコンテンツを混在できます。 目的の言語が右から左の言語であるテキスト コンテナーのテキスト ソースを意図した文字列は、テキスト コンテナーに正しく表示される適切な Unicode 表現でその文字列を指定する必要があります。 ただし、テキスト コンテナーの RightToLeft として FlowDirection の値を指定すると、テキストの右端がテキスト コンテナーの境界と右揃えになるように、既定の TextAlignment 値が変更されます。

FlowDirection は Glyphs 要素のテキストには表示されませんが、要素のヒット テストと参照の座標フレームは変更されます。

Image と MediaElement の FlowDirection

FlowDirection を ImageRightToLeft に設定すると、Image のビジュアル コンテンツは水平方向に反転されます。 ただし、 Image 要素は、親要素から FlowDirection 値を継承しません。 通常は、レイアウトに関連する画像の画像反転動作のみが必要ですが、テキストやその他のコンポーネントが埋め込まれている要素が右から左の対象ユーザーに対して反転しても意味がない場合は必ずしも必要ありません。 イメージ反転動作を取得するには、 Image 要素の FlowDirection 要素を RightToLeft に設定するか、分離コードで FlowDirection プロパティを設定する必要があります。 Image 要素を x:Uid ディレクティブで識別し、FlowDirection 値を RESW リソースとして指定して、ローカライズの専門家が XAML またはコードを変更せずに後でこの値を変更できるようにすることを検討してください。

MediaElement は、親要素から FlowDirection 値も継承しません。 MediaElement で FlowDirection を RightToLeft として明示的に設定すると、イメージの反転と同様に、メディア ビュー領域が水平方向に反転されます。 ローカライズされたコンテンツで使用されるメディア ソースには、ソース メディア ファイルで修正された右から左への問題が既に存在する可能性があるため、意図的にこれを行うことは Image よりもさらにまれである必要があります。

WebView および WebViewBrush の FlowDirection

WebViewWebViewBrush では、HTML の読み込み方法に対する右から左への情報は昇格されません。 HTML コンテンツに左から右への考慮事項がある場合は、WebView 要素に x:Uid ディレクティブを設定し、任意の WebView.Source Uniform Resource Identifier (URI) 値を文字列形式の RESW リソースとして指定することを検討してください。 WebViewWebViewBrush は、親要素から FlowDirection も継承しません。 WebView とWebViewBrush で FlowDirection を設定しても例外は発生しませんが、設定した値はランタイムによって無視されます。

適用対象

こちらもご覧ください