FlexLayout

  • [アーティクル]

Browse sample. サンプル アプリを参照する

.NET MAUI FlexLayout.

.NET マルチプラットフォーム アプリ UI (.NET MAUI) FlexLayout は、子を水平方向および垂直方向にスタックに配置できるレイアウトであり、子が多すぎて 1 つの行または列に収まらない場合は子をラップすることもできます。 さらに、FlexLayout は向きと配置を制御し、さまざまな画面サイズに適応することができます。 FlexLayout は、カスケード スタイル シート (CSS) フレキシブル ボックス レイアウト モジュールに基づいています。

FlexLayout クラスでは、次のプロパティが定義されます。

  • FlexAlignContent 型の AlignContent は、レイアウト エンジンが複数の行にレイアウトされた子の間および子の周囲にスペースをどのように配分するかを決定します。 このプロパティの既定値は Stretch です。 詳細については、「AlignContent」を参照してください。
  • FlexAlignItems 型の AlignItems は、レイアウト エンジンが交差軸に沿って子の間および子の周囲にスペースをどのように配分するかを示します。 このプロパティの既定値は Stretch です。 詳細については、「AlignItems」を参照してください。
  • FlexDirection 型の Direction は、子の方向とメイン軸を定義します。 このプロパティの既定値は Row です。 詳細については、方向を参照してください。
  • FlexJustify 型の JustifyContent は、主軸に沿って子の間および子の周囲にスペースを配分する方法を指定します。 このプロパティの既定値は Start です。 詳細については、「JustifyContent」を参照してください。
  • FlexPosition 型の Position は、子の位置が相互に相対的か、固定値を使用するかを決定します。 このプロパティの既定値は Relative です。
  • FlexWrap 型の Wrap は、子を 1 行に配置するか、複数行に配置するかを制御します。 このプロパティの既定値は NoWrap です。 詳細については、「Wrap」を参照してください。
  • FlexAlignSelf 型の AlignSelf は、レイアウト エンジンがクロス軸に沿って特定の子の間と子の周りにスペースを分散させる方法を示す添付プロパティです。 このプロパティの既定値は Auto です。 詳細については、「AlignSelf」を参照してください。
  • FlexBasis 型の Basis は、他のプロパティ値に従って空き領域が分散される前の子の初期メイン サイズを定義する添付プロパティです。 このプロパティの既定値は Auto です。 詳細については、「Basis」を参照してください。
  • float 型の Grow は、子がメイン軸で使用する必要がある空き領域の量を指定する添付プロパティです。 このプロパティの既定値は 0.0 です。 検証コールバックにより、プロパティが設定されるときに、その値が 0 以上であることが保証されます。 詳細については、「成長」を参照してください。
  • int 型の Order は、子をコンテナー内の他の子の前または後に配置するかどうかを決定する添付プロパティです。 このプロパティの既定値は 0です。 詳細については、「Order」を参照してください。
  • float 型の Shrink は、すべての子がコンテナー内に収まるように子を縮小する方法を制御する添付プロパティです。 このプロパティの既定値は 1.0 です。 検証コールバックにより、プロパティが設定されるときに、その値が 0 以上であることが保証されます。 詳細については、「Shrink」を参照してください。

これらのプロパティは、BindableProperty オブジェクトを基盤としています。つまり、プロパティをデータ バインディングの対象にして、スタイル設定することができます。

重要

FlexLayout 内のアイテムが列に配置されている場合、FlexLayout には垂直の主軸と水平の交差軸があります。 FlexLayout 内のアイテムが行に配置されている場合、FlexLayout には水平の主軸と垂直の交差軸があります。

FlexLayout とその子は、カスケード スタイル シート (CSS) を使用して部分的にスタイルを設定できます。 詳細については、「カスケード スタイル シート (CSS) を使用したアプリのスタイル設定」を参照してください。

向きと配置

Wrap、Direction、JustifyContent、AlignItems、AlignContent、Position のバインド可能なプロパティは、すべての子の向きと配置を制御するために FlexLayout に設定できます。

方向

FlexDirection 型の Direction プロパティは、子の方向と主軸を定義します。 FlexDirection 列挙体を使って、次のメンバーを定義できます。

  • Column は、子を垂直方向に積み重ねる必要があることを示します。
  • ColumnReverse (XAML では "column-reverse") は、子を逆の順序で垂直方向に積み上げる必要があることを示します。
  • Row は、子を水平方向に積み重ねる必要があることを示します。 これは、Direction プロパティの既定値です。
  • RowReverse (XAML では "row-reverse") は、子を逆の順序で水平方向に積み重ねる必要があることを示します。

Direction プロパティが Column または ColumnReverse に設定されている場合、主軸が Y 軸になり、アイテムは垂直に積み重ねられます。 Direction プロパティが Row または RowReverse に設定されている場合、主軸が X 軸になり、子は水平に積み重ねられます。

Note

XAML では、列挙要素の名前を小文字、大文字、または大文字と小文字の混在で指定するか、かっこで囲んだ 2 つの追加の文字列を使用して、このプロパティの値を指定できます。

折り返す

FlexWrap 型の Wrap プロパティは、子を 1 行に配置するか、複数行に配置するかを制御します。 FlexWrap 列挙体を使って、次のメンバーを定義できます。

  • NoWrap は、子が 1 行にレイアウトされていることを示します。 これは、Wrap プロパティの既定値です。
  • Wrap は、必要に応じて項目が複数行にレイアウトされることを示します。
  • Reverse (XAML では "wrap-reverse") は、必要に応じて項目が逆の順序で複数行にレイアウトされることを示します。

Wrap プロパティが NoWrap に設定されており、主軸が制限されていて、主軸の幅または高さがすべての子を収めるのに十分でない場合、FlexLayout はアイテムを小さくしようとします。 Shrink に添付されたバインド可能なプロパティを使用して、子の縮小率を制御できます。

Wrap プロパティが Wrap または WrapReverse に設定されている場合、AlignContent プロパティを使用して行を分散する方法を指定できます。

JustifyContent

FlexJustify 型の JustifyContent プロパティは、主軸に沿って子の間と周囲の領域がどのように配分されるかを指定します。 FlexJustify 列挙体を使って、次のメンバーを定義できます。

  • Start (XAML では "flex-start") は、子を先頭に配置する必要があることを示します。 これは、JustifyContent プロパティの既定値です。
  • Center は、子を中心に配置する必要があることを示します。
  • End (XAML では "flex-end") は、子を最後に配置する必要があることを示します。
  • SpaceBetween (XAML では "space-between") は、最初の子を先頭に、最後の子を末尾に配置して、子を均等に分散する必要があることを示します。
  • SpaceAround (XAML では "space-around") は、最初と最後の子に半分のサイズのスペースを与えて、子を均等に分散する必要があることを示します。
  • SpaceEvenly は、すべての子の周囲に等しいスペースを持たせて、子が均等に分散する必要があることを示します。

AlignItems

FlexAlignItems 型の AlignItems プロパティは、レイアウト エンジンがクロス軸に沿って子の間と周囲にスペースを配分する方法を示します。 FlexAlignItems 列挙体を使って、次のメンバーを定義できます。

  • Stretch は、子を引き伸ばす必要があることを示します。これは AlignItems プロパティの既定値です。
  • Center は、子を中心に配置する必要があることを示します。
  • Start (XAML では "flex-start") は、子を先頭に配置する必要があることを示します。
  • End (XAML では "flex-end") は、子を最後に配置する必要があることを示します。

これは、子がクロス軸にどのように配置されるかを示す 2 つのプロパティのうちの 1 つです。 各行内では、子は各項目の開始、中央、または末尾に引き伸ばされるか、整列されます。

個々の子の AlignItems 設定は、AlignSelf に添付されたバインド可能なプロパティでオーバーライドできます。

AlignContent

FlexAlignContent 型の AlignContent プロパティは、レイアウト エンジンが複数行にレイアウトされている子の間と周囲のスペースを配分する方法を決定します。 FlexAlignContent 列挙体を使って、次のメンバーを定義できます。

  • Stretch は、子を引き伸ばす必要があることを示します。これは AlignContent プロパティの既定値です。
  • Center は、子を中心に配置する必要があることを示します。
  • Start (XAML では "flex-start") は、子を先頭に配置する必要があることを示します。
  • End (XAML では "flex-end") は、子を最後に配置する必要があることを示します。
  • SpaceBetween (XAML では "space-between") は、最初の子を先頭に、最後の子を末尾に配置して、子を均等に分散する必要があることを示します。
  • SpaceAround (XAML では "space-around") は、最初と最後の子に半分のサイズのスペースを与えて、子を均等に分散する必要があることを示します。
  • SpaceEvenly は、すべての子の周囲に等しいスペースを持たせて、子が均等に分散する必要があることを示します。

AlignContent プロパティは、行または列が 1 つしかない場合は効果がありません。

子の配置とサイズ設定

Order、AlignSelf、Basis、Grow、Shrink のアタッチされたバインド可能なプロパティを FlexLayout の子に設定すると、子の向き、配置、サイズ設定を制御できます。

AlignSelf

FlexAlignSelf 型の AlignSelf プロパティは、レイアウト エンジンがクロス軸に沿って特定の子の間と子の周りにスペースを配分する方法を示します。 FlexAlignSelf 列挙体を使って、次のメンバーを定義できます。

  • Auto は、親の配置値に従って子を配置する必要があることを示します。 これは、AlignSelf プロパティの既定値です。
  • Stretch は、子を引き伸ばす必要があることを示します。
  • Center は、子を中心に配置する必要があることを示します。
  • Start (XAML では "flex-start") は、子を先頭に配置する必要があることを示します。
  • End (XAML では "flex-end") は、子を末尾に配置する必要があることを示します。

FlexLayout の個々の子に対して、このプロパティは FlexLayout に設定された AlignItems プロパティをオーバーライドします。 既定値の Auto は、AlignItems 設定を使用することを意味します。

XAML では、このプロパティは、FlexLayout の親への参照なしで子に設定されます。

<Label FlexLayout.AlignSelf="Center"
       ... />

同等の C# コードを次に示します。

Label label = new Label();
FlexLayout.SetAlignSelf(label, FlexAlignSelf.Center);

受注

int 型の Order プロパティは、FlexLayout の子の配置順序を変更可能にします。 このプロパティの既定値は 0です。

通常、子は FlexLayout に追加された順序で配置されます。 ただし、この順序は、1 つまたは複数の子で、このプロパティを 0 以外の整数値に設定することでオーバーライドできます。 次に、FlexLayout は、Order プロパティ値に基づいて子を配置します。 同じ Order プロパティ値を持つ子は、FlexLayout に追加された順序で配置されます。

基準

FlexBasis 型の Basis プロパティは、他のプロパティ値に従って空き領域が配分される前に、主軸の子の初期サイズを定義します。 このプロパティで指定される値は、親 FlexLayout の主軸に沿ったサイズです。 したがって、このプロパティは、子が行に配置されている場合の子の幅、または子が列に配置されている場合の子の高さを示します。 このプロパティは、後続のすべてのレイアウトの基礎であるサイズを指定するため、basis と呼ばれます。

FlexBasis タイプは、サイズをデバイスに依存しない単位で指定できる、または FlexLayout のサイズのパーセンテージで指定できる構造体です。 Basis プロパティのデフォルト値は Auto です。これは、子が要求した幅または高さが使用されることを意味します。

XAML では、デバイスに依存しない単位でサイズの数値を使用できます。

<Label FlexLayout.Basis="40"
       ... />

同等の C# コードを次に示します。

FlexLayout.SetBasis(label, 40);

XAML では、パーセンテージは次のように指定できます。

<Label FlexLayout.Basis="25%"
       ... />

同等の C# コードを次に示します。

FlexLayout.SetBasis(label, new FlexBasis(0.25f, true));

FlexBasis コンストラクターの最初の引数は、小数 float の値であり、0 から 1 の範囲内である必要があります。 2 番目の引数は、絶対サイズではなく相対サイズであることを示します。

成長

float 型の Grow プロパティは、子が主軸で使用する必要がある使用可能な領域の量を指定します。 このプロパティの既定値は 0.0 であり、その値は 0 以上である必要があります。

Grow プロパティは、Wrap プロパティが NoWrap に設定されており、子の行の合計幅が FlexLayout の幅より小さい場合、または子の列の高さが FlexLayout よりも低い場合に使用されます。 Grow プロパティは、残りのスペースを子に割り当てる方法を示します。 1 つの子に正の Grow 値が与えられた場合、その子が残りのスペースをすべて占有します。 あるいは、残りのスペースを複数の子に割り当てることもできます。

圧縮

float 型の Shrink プロパティは、すべての子がコンテナー内に収まるように子を縮小する方法を制御します。 このプロパティの既定値は 1.0 であり、その値は 0 以上である必要があります。

Shrink プロパティは、Wrap プロパティが NoWrap に設定されており、子の行の合計幅が FlexLayout の幅より大きい場合、または子の単一の列の合計が FlexLayout の高さよりも高い場合に使用されます。 通常、FlexLayout はサイズを制限してこれらの子を表示します。 Shrink プロパティはフル サイズで表示する際にどの子が優先されているかを示すことができます。

ヒント

Grow 値と Shrink 値の両方を設定すると、集計された子サイズが FlexLayout のサイズより小さくなる場合や大きくなる場合の両方の状況に対応できます。

例

次の例は、FlexLayout のよくある使用例を示しています。

Stack

次のとおり、FlexLayout は StackLayout に置き換えることができます。

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FlexLayoutDemos.Views.SimpleStackPage"
             Title="Simple Stack">    
    <FlexLayout Direction="Column"
                AlignItems="Center"
                JustifyContent="SpaceEvenly">        
        <Label Text="FlexLayout in Action"
               FontSize="18" />
        <Image Source="dotnet_bot_branded.png"
               HeightRequest="300" />
        <Button Text="Do-Nothing Button" />
        <Label Text="Another Label" />
    </FlexLayout>
</ContentPage>

この例では、Direction プロパティは、FlexLayout の子を 1 つの列に配置する Column に設定されています。 この AlignItems プロパティは、各子を水平方向に中央揃えに配置する Center に設定されています。 この JustifyContent プロパティは、SpaceEvenly (最初の子より下位および最後の子より下位にあるすべての子の間で、残っているすべての垂直方向の領域を均等に割り当てる) に設定されています。

Vertically oriented .NET MAUI FlexLayout.

Note

この AlignSelf 添付プロパティは、特定の子の AlignItems プロパティをオーバーライドする際に使用できます。

アイテムを折り返す

FlexLayout は、その子を追加の行または列で折り返すことができます。

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FlexLayoutDemos.Views.PhotoWrappingPage"
             Title="Photo Wrapping">
    <Grid>
        <ScrollView>
            <FlexLayout x:Name="flexLayout"
                        Wrap="Wrap"
                        JustifyContent="SpaceAround" />
        </ScrollView>
        ...
    </Grid>
</ContentPage>

この例では、FlexLayout の Direction プロパティが設定されていないため、既定の Row 設定であるため、子が行に配置され、メイン軸が水平であることを意味します。 この Wrap プロパティは、子が行に収まらない場合に、子が次の行に折り返される Wrap に設定されています。 この JustifyContent プロパティは、各子が同じ領域で囲まれるように、メイン軸上のすべての残りの領域を割り当てる SpaceAround に設定されています。

Horizontally wrapping .NET MAUI FlexLayout.

この例の分離コード ファイルは、写真のコレクションを取得し、それらを FlexLayout に追加します。

また、FlexLayout は ScrollView の子です。 したがって、ページに収まらない行が多すぎる場合は、ScrollView は Vertical の既定の Orientation プロパティを持つため、垂直スクロールが可能になります。

ページのレイアウト

holy grail (聖杯) レイアウトと呼ばれる Web デザインの標準的なレイアウトがあります。これは、非常に望ましいレイアウトでも、多くの場合、完璧に実現するのは難しいレイアウト形式のためです。 このレイアウトは、ページの上部にあるヘッダーと下部のフッターで構成され、どちらもページの全幅に拡張されます。 ページの中央を占めるのはメイン コンテンツですが、多くの場合、コンテンツの左側に列メニュー、右側に補足情報 (aside (アサイド) 領域とも呼ばれます) があります。 このレイアウトは FlexLayout として認識される可能性があります。

次の例は、入れ子になった別のレイアウト (FlexLayout) を使用して、このレイアウトの実装を示しています。

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FlexLayoutDemos.Views.HolyGrailLayoutPage"
             Title="Holy Grail Layout">

    <FlexLayout Direction="Column">

        <!-- Header -->
        <Label Text="HEADER"
               FontSize="18"
               BackgroundColor="Aqua"
               HorizontalTextAlignment="Center" />

        <!-- Body -->
        <FlexLayout FlexLayout.Grow="1">

            <!-- Content -->
            <Label Text="CONTENT"
                   FontSize="18"
                   BackgroundColor="Gray"
                   HorizontalTextAlignment="Center"
                   VerticalTextAlignment="Center"
                   FlexLayout.Grow="1" />

            <!-- Navigation items-->
            <BoxView FlexLayout.Basis="50"
                     FlexLayout.Order="-1"
                     Color="Blue" />

            <!-- Aside items -->
            <BoxView FlexLayout.Basis="50"
                     Color="Green" />

        </FlexLayout>

        <!-- Footer -->
        <Label Text="FOOTER"
               FontSize="18"
               BackgroundColor="Pink"
               HorizontalTextAlignment="Center" />
    </FlexLayout>
</ContentPage>

ナビゲーション領域とアサイド領域は、左と右で BoxView を使用してレンダリングされます。 1 つ目の FlexLayout には垂直メイン軸があり、列に配置された 3 つの子が含まれています。 ヘッダー、ページの本文、フッターです。 入れ子になった FlexLayout は、横メイン軸を持ち、3 つの子が 1 行に配置されます。

Holy grail layout with the .NET MAUI FlexLayout.

この例では、最初の BoxView で Order プロパティが兄弟よりも小さい値に設定されることで、行の最初の項目に表示されます。 この Basis プロパティは、BoxView オブジェクトの両方に設定されていて、デバイスに依存しない単位としての幅 50 を指定しています。 この Grow プロパティは、入れ子の FlexLayout に設定されていて、この FlexLayout が、外側の FlexLayout 内にある、使われていない縦方向のすべてのスペースを占有する必要があることを示します。 さらに、この Grow プロパティはコンテンツを表す Label 上で設定されており、このコンテンツが入れ子の FlexLayout に含まれる未使用の水平スペースをすべて占めることを示します。

Note

また、Shrink プロパティは、子のサイズが FlexLayout のサイズを超えていても、折り返しをしない場合に使用できます。