The Xamarin.Forms FlexLayout

サンプルのダウンロードサンプルのダウンロード

FlexLayout を使用して、子ビューのコレクションを積み重ねたり折り返したりします。

Xamarin.FormsFlexLayoutはバージョン 3.0 のXamarin.Forms新機能です。 これは CSS フレキシブル ボックス レイアウト モジュール (一般に フレックス レイアウト または フレックス ボックスと呼ばれます) に基づいています。これは、レイアウト内で子を配置するための多くの柔軟なオプションが含まれているためです。

FlexLayout は、スタック内で子を水平方向および垂直方向に配置できる 点で に似ています Xamarin.FormsStackLayout 。 ただし、 は、 FlexLayout 1 つの行または列に収まらない場合に子を折り返すこともできます。また、向き、配置、さまざまな画面サイズに適応するための多くのオプションもあります。

FlexLayoutLayout<View> から派生し、 型の IList<View>Children プロパティを継承します。

FlexLayout では、子要素のサイズ、向き、配置に影響を与える 6 つのパブリック バインド可能なプロパティと 5 つのアタッチされたバインド可能なプロパティを定義します。 (バインド可能な添付プロパティに慣れていない場合は、 添付プロパティに関する記事を参照してください)。これらのプロパティについては、以下の「 バインド可能なプロパティの詳細 」および「 添付のバインド可能なプロパティ」のセクションで詳しく説明します。 ただし、この記事では、これらのプロパティの多くをより非公式に説明する の一般的な使用シナリオFlexLayoutに関するセクションから始まります。 この記事の終わりに向かって、CSS スタイル シートと組み合わせるFlexLayout方法について説明します。

一般的な利用シナリオ

FlexLayoutDemos サンプル プログラムには、 の一般的な使用方法FlexLayoutを示すページがいくつか含まれており、そのプロパティを試すことができます。

単純なスタックに FlexLayout を使用する

[Simple Stack]\(単純なスタック\) ページには、 に置き換えるStackLayout方法FlexLayoutが示されていますが、より単純なマークアップが表示されます。 このサンプルのすべてが XAML ページで定義されています。 には FlexLayout 、次の 4 つの子が含まれています。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:FlexLayoutDemos"
             x:Class="FlexLayoutDemos.SimpleStackPage"
             Title="Simple Stack">

    <FlexLayout Direction="Column"
                AlignItems="Center"
                JustifyContent="SpaceEvenly">

        <Label Text="FlexLayout in Action"
               FontSize="Large" />

        <Image Source="{local:ImageResource FlexLayoutDemos.Images.SeatedMonkey.jpg}" />

        <Button Text="Do-Nothing Button" />

        <Label Text="Another Label" />
    </FlexLayout>
</ContentPage>

iOS、Android、ユニバーサル Windows プラットフォームで実行されているページを次に示します。

[Simple Stack]\(単純なスタック\

の 3 つのプロパティ FlexLayoutSimpleStackPage.xaml ファイルに表示されます。

  • プロパティは Direction 列挙の値に FlexDirection 設定されます。 既定値は、Row です。 プロパティを に Column 設定すると、 の子が項目の FlexLayout 1 つの列に配置されます。

    内のFlexLayout項目が列に配置されている場合、 FlexLayout は垂直メイン軸と横クロス軸を持つと言われます。

  • プロパティは AlignItemsFlexAlignItems であり、項目をクロス軸に配置する方法を指定します。 オプションを Center 指定すると、各項目は水平方向に中央揃えになります。

    このタスクに ではなく をStackLayoutFlexLayout使用していた場合は、各項目の プロパティを に割り当てることで、すべてのアイテムを中央にCenter配置HorizontalOptionsします。 プロパティは HorizontalOptions の子 FlexLayoutには機能しませんが、1 つの AlignItems プロパティでも同じ目標が達成されます。 必要に応じて、添付されたバインド可能なプロパティを AlignSelf 使用して、個々のアイテムの プロパティを AlignItems オーバーライドできます。

    <Label Text="FlexLayout in Action"
           FontSize="Large"
           FlexLayout.AlignSelf="Start" />
    

    この変更により、読み取り順序が左から右のFlexLayout場合、これは Label の左端に配置されます。

  • プロパティのJustifyContentFlexJustifyは であり、項目をメイン軸に配置する方法を指定します。 オプションは SpaceEvenly 、すべての項目の間、および最初の項目の上、および最後の項目の下に、残りのすべての垂直領域を均等に割り当てます。

    を使用 StackLayoutしていた場合は、同様の効果を VerticalOptions 得るために、各項目の プロパティを に CenterAndExpand 割り当てる必要があります。 ただし、オプションでは、最初の CenterAndExpand 項目の前と最後の項目の後の 2 倍の領域が各項目の間に割り当てられます。 の プロパティを にCenterAndExpand設定することで、 JustifyContentFlexLayoutオプションVerticalOptionsSpaceAround模倣できます。

これらの FlexLayout プロパティについては、以下の 「バインド可能なプロパティ」セクションで詳しく説明 します。

折り返しアイテムに FlexLayout を使用する

FlexLayoutDemos サンプルの [写真の折り返し] ページでは、その子を追加の行または列にラップする方法をFlexLayout示します。 XAML ファイルは を FlexLayout インスタンス化し、その 2 つのプロパティを割り当てます。

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

        <ActivityIndicator x:Name="activityIndicator"
                           IsRunning="True"
                           VerticalOptions="Center" />
    </Grid>
</ContentPage>

この FlexLayout プロパティはDirection設定されていないため、 の既定のRow設定は です。つまり、子は行に配置され、メイン軸は水平です。

プロパティは Wrap 列挙型 FlexWrapです。 行に収まらない項目が多すぎる場合、このプロパティ設定により項目が次の行に折り返されます。

は の子ScrollViewであることにFlexLayout注意してください。 ページに収まらない行が多すぎる場合、 には の既定OrientationVerticalプロパティがあり、ScrollView垂直スクロールが許可されます。

プロパティはJustifyContent、メイン軸 (横軸) に残りの領域を割り当てて、各項目が同じ量の空白で囲まれるようにします。

分離コード ファイルは、サンプル写真のコレクションにアクセスし、 の Children コレクションに追加します FlexLayout

public partial class PhotoWrappingPage : ContentPage
{
    // Class for deserializing JSON list of sample bitmaps
    [DataContract]
    class ImageList
    {
        [DataMember(Name = "photos")]
        public List<string> Photos = null;
    }

    public PhotoWrappingPage ()
    {
        InitializeComponent ();

        LoadBitmapCollection();
    }

    async void LoadBitmapCollection()
    {
        using (WebClient webClient = new WebClient())
        {
            try
            {
                // Download the list of stock photos
                Uri uri = new Uri("https://raw.githubusercontent.com/xamarin/docs-archive/master/Images/stock/small/stock.json");
                byte[] data = await webClient.DownloadDataTaskAsync(uri);

                // Convert to a Stream object
                using (Stream stream = new MemoryStream(data))
                {
                    // Deserialize the JSON into an ImageList object
                    var jsonSerializer = new DataContractJsonSerializer(typeof(ImageList));
                    ImageList imageList = (ImageList)jsonSerializer.ReadObject(stream);

                    // Create an Image object for each bitmap
                    foreach (string filepath in imageList.Photos)
                    {
                        Image image = new Image
                        {
                            Source = ImageSource.FromUri(new Uri(filepath))
                        };
                        flexLayout.Children.Add(image);
                    }
                }
            }
            catch
            {
                flexLayout.Children.Add(new Label
                {
                    Text = "Cannot access list of bitmap files"
                });
            }
        }

        activityIndicator.IsRunning = false;
        activityIndicator.IsVisible = false;
    }
}

上から下に徐々にスクロールして実行されているプログラムを次に示します。

写真ラッピングページ 写真

FlexLayout を使用したページ レイアウト

それは非常に望ましいが、多くの場合、完璧で実現するのは難しいレイアウト形式であるため、 聖杯 と呼ばれるWebデザインの標準的なレイアウトがあります。 レイアウトは、ページの上部にあるヘッダーと下部のフッターで構成され、どちらもページの全幅に拡張されます。 ページの中央を占めるのはメインコンテンツですが、多くの場合、コンテンツの左側に列メニューがあり、右側に補足情報 (アサイドエリアと呼ばれることもあります) があります。 CSS フレキシブル ボックス レイアウト仕様のセクション 5.4.1 では、フレキシブル ボックスを使用して聖杯レイアウトを実現する方法について説明します。

FlexLayoutDemos サンプルの [Holy Grail Layout]\(聖杯のレイアウト\) ページは、別のレイアウトに入れ子になったレイアウトを使用してFlexLayout、このレイアウトを簡単に実装する方法を示しています。 このページは縦モードの電話用に設計されているため、コンテンツ領域の左右の領域の幅はわずか 50 ピクセルです。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FlexLayoutDemos.HolyGrailLayoutPage"
             Title="Holy Grail Layout">

    <FlexLayout Direction="Column">

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

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

            <!-- Content -->
            <Label Text="CONTENT"
                   FontSize="Large"
                   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="Large"
               BackgroundColor="Pink"
               HorizontalTextAlignment="Center" />
    </FlexLayout>
</ContentPage>

ここでは、次を実行しています。

[聖杯のレイアウト] ページ

ナビゲーションとアサイド領域は、左右に を BoxView 使用してレンダリングされます。

XAML ファイルの最初FlexLayoutの は、垂直メイン軸を持ち、列に配置された 3 つの子が含まれています。 ヘッダー、ページの本文、フッターです。 入れ子になったFlexLayoutには水平メイン軸があり、3 つの子が 1 行に配置されています。

このプログラムでは、次の 3 つの添付バインド可能なプロパティを示します。

  • Orderアタッチされたバインド可能なプロパティは、最初BoxViewの に設定されます。 このプロパティは、既定値が 0 の整数です。 このプロパティを使用して、レイアウトの順序を変更できます。 通常、開発者は、ナビゲーション項目の前や項目を除いて、ページのコンテンツをマークアップに表示することを好みます。 最初BoxViewOrder プロパティを他の兄弟よりも小さい値に設定すると、行の最初の項目として表示されます。 同様に、 プロパティを兄弟より大きい値に設定 Order することで、アイテムが最後に表示されるようにすることができます。

  • Basis添付されたバインド可能なプロパティは、50 ピクセルの幅を与えるために 2 つのBoxView項目に設定されます。 このプロパティは 型FlexBasisであり、 という名前AutoFlexBasis静的プロパティを定義する構造体です。これは既定値です。 を使用Basisして、項目がメイン軸上に占める領域の量を示すピクセル サイズまたはパーセンテージを指定できます。 後続のすべてのレイアウトの 基礎 である項目サイズを指定するため、基準と呼ばれます。

  • プロパティはGrow、入れ子になった と コンテンツをLabel表す子に設定されますLayout。 このプロパティは 型 float であり、既定値は 0 です。 正の値に設定すると、メイン軸に沿った残りの領域はすべて、その項目と、 の正のGrow値を持つ兄弟に割り当てられます。 スペースは、 のstar仕様のように、値にGrid比例して割り当てられます。

    最初 Grow の添付プロパティは、入れ子になった に設定されます FlexLayout。これは FlexLayout 、外側 FlexLayoutの 内のすべての未使用の垂直空間を占有することを示します。 2 番目 Grow の添付プロパティは、コンテンツを表す に Label 設定され、このコンテンツが内部 FlexLayout内のすべての未使用の水平空間を占有することを示します。

    また、子のサイズが のサイズを超えるが、ラップが望ましくない場合に使用できる、同様 ShrinkFlexLayout 添付バインド可能なプロパティもあります。

FlexLayout を使用したカタログ アイテム

FlexLayoutDemos サンプルの [カタログアイテム] ページは、CSS Flex Layout Box 仕様のセクション 1.1 の例 1 に似ていますが、水平方向にスクロール可能な一連の画像と 3 つのサルの説明が表示されます。

[カタログ アイテム] ページ

3 つの各サルは、 FlexLayoutFrame 含まれる であり、明示的な高さと幅が与えられ、大きい FlexLayoutの子でもあります。 この XAML ファイルでは、子の FlexLayout ほとんどのプロパティがスタイルで指定されており、そのうちの 1 つを含むすべてが暗黙的なスタイルです。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:FlexLayoutDemos"
             x:Class="FlexLayoutDemos.CatalogItemsPage"
             Title="Catalog Items">
    <ContentPage.Resources>
        <Style TargetType="Frame">
            <Setter Property="BackgroundColor" Value="LightYellow" />
            <Setter Property="BorderColor" Value="Blue" />
            <Setter Property="Margin" Value="10" />
            <Setter Property="CornerRadius" Value="15" />
        </Style>

        <Style TargetType="Label">
            <Setter Property="Margin" Value="0, 4" />
        </Style>

        <Style x:Key="headerLabel" TargetType="Label">
            <Setter Property="Margin" Value="0, 8" />
            <Setter Property="FontSize" Value="Large" />
            <Setter Property="TextColor" Value="Blue" />
        </Style>

        <Style TargetType="Image">
            <Setter Property="FlexLayout.Order" Value="-1" />
            <Setter Property="FlexLayout.AlignSelf" Value="Center" />
        </Style>

        <Style TargetType="Button">
            <Setter Property="Text" Value="LEARN MORE" />
            <Setter Property="FontSize" Value="Large" />
            <Setter Property="TextColor" Value="White" />
            <Setter Property="BackgroundColor" Value="Green" />
            <Setter Property="BorderRadius" Value="20" />
        </Style>
    </ContentPage.Resources>

    <ScrollView Orientation="Both">
        <FlexLayout>
            <Frame WidthRequest="300"
                   HeightRequest="480">

                <FlexLayout Direction="Column">
                    <Label Text="Seated Monkey"
                           Style="{StaticResource headerLabel}" />
                    <Label Text="This monkey is laid back and relaxed, and likes to watch the world go by." />
                    <Label Text="  &#x2022; Doesn't make a lot of noise" />
                    <Label Text="  &#x2022; Often smiles mysteriously" />
                    <Label Text="  &#x2022; Sleeps sitting up" />
                    <Image Source="{local:ImageResource FlexLayoutDemos.Images.SeatedMonkey.jpg}"
                           WidthRequest="180"
                           HeightRequest="180" />
                    <Label FlexLayout.Grow="1" />
                    <Button />
                </FlexLayout>
            </Frame>

            <Frame WidthRequest="300"
                   HeightRequest="480">

                <FlexLayout Direction="Column">
                    <Label Text="Banana Monkey"
                           Style="{StaticResource headerLabel}" />
                    <Label Text="Watch this monkey eat a giant banana." />
                    <Label Text="  &#x2022; More fun than a barrel of monkeys" />
                    <Label Text="  &#x2022; Banana not included" />
                    <Image Source="{local:ImageResource FlexLayoutDemos.Images.Banana.jpg}"
                           WidthRequest="240"
                           HeightRequest="180" />
                    <Label FlexLayout.Grow="1" />
                    <Button />
                </FlexLayout>
            </Frame>

            <Frame WidthRequest="300"
                   HeightRequest="480">

                <FlexLayout Direction="Column">
                    <Label Text="Face-Palm Monkey"
                           Style="{StaticResource headerLabel}" />
                    <Label Text="This monkey reacts appropriately to ridiculous assertions and actions." />
                    <Label Text="  &#x2022; Cynical but not unfriendly" />
                    <Label Text="  &#x2022; Seven varieties of grimaces" />
                    <Label Text="  &#x2022; Doesn't laugh at your jokes" />
                    <Image Source="{local:ImageResource FlexLayoutDemos.Images.FacePalm.jpg}"
                           WidthRequest="180"
                           HeightRequest="180" />
                    <Label FlexLayout.Grow="1" />
                    <Button />
                </FlexLayout>
            </Frame>
        </FlexLayout>
    </ScrollView>
</ContentPage>

の暗黙的なスタイルには、 Image の 2 つの添付バインド可能なプロパティの Flexlayout設定が含まれています。

<Style TargetType="Image">
    <Setter Property="FlexLayout.Order" Value="-1" />
    <Setter Property="FlexLayout.AlignSelf" Value="Center" />
</Style>

Order–1 を設定すると、Image子コレクション内での位置に関係なく、入れ子になったFlexLayout各ビューに要素が最初に表示されます。 AlignSelfCenter プロパティを使用すると、 が Image 内の中央に配置されますFlexLayout。 これにより、 プロパティの AlignItems 設定がオーバーライドされます。既定値 Stretchは です。つまり Label 、 と Button の子は の FlexLayout全幅に拡張されます。

3 つのFlexLayout各ビュー内では、 の前に Button空白Labelが付きますが、Grow設定は 1 です。 つまり、余分な垂直領域はすべて、この空白 Labelに割り当てられ、 が実質的に下部にプッシュ Button されます。

バインド可能なプロパティの詳細

の一般的なアプリケーション FlexLayoutをいくつか見てきたので、 の FlexLayout プロパティについて詳しく調べることができます。 FlexLayout は、方向と配置を制御するために、コードまたは XAML で自身に FlexLayout 設定する 6 つのバインド可能なプロパティを定義します。 (これらのプロパティの 1 つである は、 Positionこの記事では説明しません)。

FlexLayoutDemos サンプルの実験ページを使用して、残りの 5 つのバインド可能なプロパティをすことができます。 このページでは、 と から子を FlexLayout 追加または削除して、バインド可能な 5 つのプロパティの組み合わせを設定できます。 のすべての子 FlexLayout は、 Label さまざまな色とサイズのビューであり、 プロパティは Text コレクション内の位置に対応する数値に設定されます Children

プログラムが起動すると、5 つの Picker ビューにこれら 5 つの FlexLayout プロパティの既定値が表示されます。 FlexLayout画面の下部には、次の 3 つの子が含まれています。

[実験] ページ: [既定]

Label各ビューには、内の領域に割り当てられたLabel領域を示す灰色の背景がありますFlexLayout。 それ自体の FlexLayout 背景はアリスブルーです。 左右に少し余白がある場合を除き、ページの下部領域全体を占めます。

Direction プロパティ

プロパティの型FlexDirectionDirection で、4 つのメンバーを持つ列挙体です。

  • Column
  • ColumnReverse (または XAML の "列逆")
  • Row (既定値)
  • RowReverse (または XAML の "行反転" )

XAML では、列挙メンバー名を小文字、大文字、または大文字の混合で指定してこのプロパティの値を指定することも、CSS インジケーターと同じかっこで囲まれた 2 つの追加文字列を使用することもできます。 ("column-reverse" 文字列と "row-reverse" 文字列は、XAML パーサーによって使用されるクラスで FlexDirectionTypeConverter 定義されます)。

[実験] ページには、(左から右へ)、方向、方向、Column方向ColumnReverseRow表示されます。

[実験] ページ: [

オプションの Reverse 場合、項目は右側または下部から始まります。

Wrap プロパティ

プロパティは WrapFlexWrapであり、次の 3 つのメンバーを持つ列挙体です。

  • NoWrap (既定値)
  • Wrap
  • Reverse (または XAML の "折り返し反転" )

左から右の画面には、12 人の NoWrap子の オプション WrapReverse オプションが表示されます。

実験ページ: 実験ページを折り返

プロパティが WrapNoWrap設定されていて、メイン軸が (このプログラムのように) 制約されていて、メイン軸がすべての子に収まるほど広くまたは高くない場合、FlexLayoutiOS のスクリーンショットが示すように、項目を小さくしようとします。 バインド可能な添付プロパティを使用して、項目の Shrink 縮小を制御できます。

JustifyContent プロパティ

プロパティの型FlexJustifyJustifyContent で、6 つのメンバーを持つ列挙体です。

  • Start (または XAML の "flex-start" )、既定値
  • Center
  • End (または XAML の "flex-end" )
  • SpaceBetween (または XAML の "space-between" )
  • SpaceAround (または XAML の "space-around" )
  • SpaceEvenly

このプロパティは、次の例の横軸であるメイン軸に項目を配置する方法を指定します。

[実験] ページ: [コンテンツの両端揃え

3 つのスクリーンショットすべてで、 Wrap プロパティが に Wrap設定されています。 既定値は Start 、前の Android のスクリーンショットに表示されます。 ここでの iOS のスクリーンショットは、 Center すべての項目が中央に移動されるオプションを示しています。 単語 Space で始まる他の 3 つのオプションは、項目が占有しない余分な領域を割り当てます。 SpaceBetween は、項目間に均等にスペースを割り当てます。 SpaceAround は各項目の周囲に等しいスペースを置き、 SpaceEvenly 各項目の間と最初の項目の前と行の最後の項目の後に等しいスペースを配置します。

AlignItems プロパティ

プロパティの型FlexAlignItemsAlignItems で、4 つのメンバーを持つ列挙体です。

  • Stretch (既定値)
  • Center
  • Start (または XAML の "flex-start" )
  • End (または XAML の "flex-end" )

これは、子が十字軸にどのように配置されるかを示す 2 つのプロパティ (もう AlignContent1 つは ) のいずれかです。 各行内では、次の 3 つのスクリーンショットに示すように、子は (前のスクリーンショットに示すように) ストレッチされるか、各項目の開始、中央、または末尾に配置されます。

[実験] ページ: [実験]

iOS のスクリーンショットでは、すべての子の上部が揃っています。 Android のスクリーンショットでは、項目は最も高い子に基づいて垂直方向に中央揃えされます。 UWP のスクリーンショットでは、すべての項目の下部が揃っています。

個々の項目に対して AlignItems 、添付されたバインド可能なプロパティを使用して設定を AlignSelf オーバーライドできます。

AlignContent プロパティ

プロパティの型FlexAlignContentAlignContent で、7 つのメンバーを持つ列挙体です。

  • Stretch (既定値)
  • Center
  • Start (または XAML の "flex-start" )
  • End (または XAML の "flex-end" )
  • SpaceBetween (または XAML の "space-between" )
  • SpaceAround (または XAML の "space-around" )
  • SpaceEvenly

と同様 AlignItemsに、 プロパティは AlignContent クロス軸上の子も配置しますが、行または列全体に影響します。

[実験] ページ: [実験

iOS のスクリーンショットでは、両方の行が一番上にあります。Android のスクリーンショットでは、それらは中央にあります。UWP のスクリーンショットでは、下部にあります。 行は、さまざまな方法で間隔を空けることもできます。

実験ページ: コンテンツの配置 2

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

バインド可能な添付プロパティの詳細

FlexLayout は、5 つのアタッチされたバインド可能なプロパティを定義します。 これらのプロパティは の子に設定され、その特定の FlexLayout 子にのみ関連します。

AlignSelf プロパティ

AlignSelfアタッチされたバインド可能なプロパティは 型FlexAlignSelfであり、5 つのメンバーを持つ列挙体です。

  • Auto (既定値)
  • Stretch
  • Center
  • Start (または XAML の "flex-start" )
  • End (または XAML の "flex-end" )

の個々の子の場合、 FlexLayoutこのプロパティ設定は、それ自体で設定された AlignItems プロパティを FlexLayout オーバーライドします。 の既定の Auto 設定は、 設定を使用することを意味します AlignItems

という名前labelLabel要素 (または例) の場合は、次のようにコードで プロパティをAlignSelf設定できます。

FlexLayout.SetAlignSelf(label, FlexAlignSelf.Center);

の親への FlexLayout 参照がないことに Label注意してください。 XAML では、 プロパティを次のように設定します。

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

Order プロパティ

Order プロパティは int 型です。 既定値は 0 です。

Orderプロパティを使用すると、 の子が配置される順序をFlexLayout変更できます。 通常、 の FlexLayout 子は、コレクションに表示される順序と同じ順序で Children 配置されます。 この順序をオーバーライドするには、アタッチされたバインド可能なプロパティを 1 つ以上の子の 0 以外の整数値に設定 Order します。 次に、 は FlexLayout 各子の プロパティの Order 設定に基づいて子を配置しますが、同じ Order 設定の子はコレクションに表示される順序で Children 配置されます。

Basis プロパティ

アタッチされたバインド可能なプロパティはBasis、メイン軸の の子に割り当てられる領域のFlexLayout量を示します。 プロパティでBasis指定されるサイズは、親 FlexLayoutのメイン軸に沿ったサイズです。 したがって、 は、 Basis 子が行に配置されている場合の子の幅、または子が列に配置されている場合の高さを示します。

プロパティの BasisFlexBasisは、 構造体です。 サイズは、デバイスに依存しない単位で指定することも、 のサイズ FlexLayoutに対する割合として指定することもできます。 プロパティの Basis 既定値は静的プロパティ FlexBasis.Autoです。これは、子の要求された幅または高さが使用されることを意味します。

コードでは、 という名前labelLabel の プロパティをBasis、次のように 40 個のデバイスに依存しない単位に設定できます。

FlexLayout.SetBasis(label, new FlexBasis(40, false));

コンストラクターの 2 番目のFlexBasis引数には という名前が付けられisRelative、サイズが相対 () か絶対false (true) かを示します。 引数の既定値 falseは であるため、次のコードを使用することもできます。

FlexLayout.SetBasis(label, new FlexBasis(40));

から float への FlexBasis 暗黙的な変換が定義されているため、さらに簡略化できます。

FlexLayout.SetBasis(label, 40);

次のように、親のサイズを 25% に FlexLayout 設定できます。

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

この小数部の値は、0 ~ 1 の範囲である必要があります。

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

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

または、0% から 100% の範囲でパーセンテージを指定できます。

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

FlexLayoutDemos サンプルの [基本実験] ページでは、 プロパティをBasis試すことができます。 ページには、背景と前景色が交互に表示される 5 つの Label 要素の折り返された列が表示されます。 2 つのSlider要素を使用すると、2 番目と 4 番目Labelの に値を指定Basisできます。

[基礎実験] ページ [

左側の iOS のスクリーンショットは、デバイスに依存しない単位で高さが指定されている 2 つの Label 要素を示しています。 Android 画面には、 の高さの合計に対する割合である高さが FlexLayout指定されていることが表示されます。 Basisが 100% に設定されている場合、子は の高さで、次のFlexLayout列に折り返され、その列の高さ全体が占められます。UWP のスクリーンショットでは、5 人の子が 1 行に配置されているかのように見えますが、実際には 5 列に配置されています。

Grow プロパティ

Growアタッチされたバインド可能なプロパティの型intは です。 既定値は 0 で、値は 0 以上である必要があります。

プロパティが GrowNoWrap設定されていて、子の行の幅が の幅より小さい場合、または子の列のFlexLayout高さが よりも短い場合Wrap、プロパティは役割をFlexLayout果たします。 プロパティは Grow 、子の残りの領域を割り当てする方法を示します。

[実験の拡大] ページでは、交互の色の 5 つのLabel要素が列に配置され、2 つの要素を使用して 2 Slider 番目と 4 Label番目の の プロパティを調整Growできます。 左端の iOS のスクリーンショットは、既定 Grow のプロパティ 0 を示しています。

[実験の拡大] ページの

いずれかの子に正 Grow の値が指定されている場合、Android のスクリーンショットに示すように、その子は残りのすべての領域を占有します。 この領域は、2 人以上の子の間で割り当てることもできます。 UWP のスクリーンショットでは、 Grow 2 番目 Label の プロパティは 0.5 に設定され Grow 、4 番目 Label の プロパティは 1.5 です。これにより、残りの領域の 4 Label 番目の 3 倍が 2 番目 Labelの と同じになります。

子ビューでそのスペースを使用する方法は、子の特定の種類によって異なります。 のLabel場合、 プロパティHorizontalTextAlignmentVerticalTextAlignmentを使用して、 の合計スペースLabel内にテキストを配置できます。

Shrink プロパティ

Shrinkアタッチされたバインド可能なプロパティの型intは です。 既定値は 1 で、値は 0 以上である必要があります。

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

[ Shrink Experiment]\(実験の縮小 \) ページでは、 FlexLayout 幅よりも多くのスペースを必要とする 5 Label つの子の 1 行を含む が作成されます FlexLayout 。 左側の iOS のスクリーンショットは、既定値が Label 1 のすべての要素を示しています。

[実験の圧縮] ページの

Android のスクリーンショットでは、 Shrink 2 番目 Label の 値は 0 に設定され、全 Label 幅で表示されます。 また、4 つ目 Label には 1 より大きい値が指定 Shrink され、縮小されています。 UWP のスクリーンショットは、可能であればShrink、両方Labelの要素に値 0 が与えられていることを示しています。

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

FlexLayout を使用した CSS スタイル設定

に関連して 3.0 でXamarin.Forms導入された CSS スタイル機能をFlexLayout使用できます。 FlexLayoutDemos サンプルの [CSS カタログアイテム] ページは、[カタログアイテム] ページのレイアウトを複製しますが、多くのスタイルの CSS スタイル シートを使用します。

[CSS カタログ アイテム] ページ

元の CatalogItemsPage.xaml ファイルのセクションには、 Style 15 個の Resources オブジェクトを含む 5 Setter つの定義があります。 CssCatalogItemsPage.xaml ファイルでは、4 つのSetterオブジェクトのみを含む 2 つのStyle定義に縮小されています。 これらのスタイルは、CSS スタイル機能が現在サポートしていないプロパティの Xamarin.Forms CSS スタイル シートを補完します。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:FlexLayoutDemos"
             x:Class="FlexLayoutDemos.CssCatalogItemsPage"
             Title="CSS Catalog Items">
    <ContentPage.Resources>
        <StyleSheet Source="CatalogItemsStyles.css" />

        <Style TargetType="Frame">
            <Setter Property="BorderColor" Value="Blue" />
            <Setter Property="CornerRadius" Value="15" />
        </Style>

        <Style TargetType="Button">
            <Setter Property="Text" Value="LEARN MORE" />
            <Setter Property="BorderRadius" Value="20" />
        </Style>
    </ContentPage.Resources>

    <ScrollView Orientation="Both">
        <FlexLayout>
            <Frame>
                <FlexLayout Direction="Column">
                    <Label Text="Seated Monkey" StyleClass="header" />
                    <Label Text="This monkey is laid back and relaxed, and likes to watch the world go by." />
                    <Label Text="  &#x2022; Doesn't make a lot of noise" />
                    <Label Text="  &#x2022; Often smiles mysteriously" />
                    <Label Text="  &#x2022; Sleeps sitting up" />
                    <Image Source="{local:ImageResource FlexLayoutDemos.Images.SeatedMonkey.jpg}" />
                    <Label StyleClass="empty" />
                    <Button />
                </FlexLayout>
            </Frame>

            <Frame>
                <FlexLayout Direction="Column">
                    <Label Text="Banana Monkey" StyleClass="header" />
                    <Label Text="Watch this monkey eat a giant banana." />
                    <Label Text="  &#x2022; More fun than a barrel of monkeys" />
                    <Label Text="  &#x2022; Banana not included" />
                    <Image Source="{local:ImageResource FlexLayoutDemos.Images.Banana.jpg}" />
                    <Label StyleClass="empty" />
                    <Button />
                </FlexLayout>
            </Frame>

            <Frame>
                <FlexLayout Direction="Column">
                    <Label Text="Face-Palm Monkey" StyleClass="header" />
                    <Label Text="This monkey reacts appropriately to ridiculous assertions and actions." />
                    <Label Text="  &#x2022; Cynical but not unfriendly" />
                    <Label Text="  &#x2022; Seven varieties of grimaces" />
                    <Label Text="  &#x2022; Doesn't laugh at your jokes" />
                    <Image Source="{local:ImageResource FlexLayoutDemos.Images.FacePalm.jpg}" />
                    <Label StyleClass="empty" />
                    <Button />
                </FlexLayout>
            </Frame>
        </FlexLayout>
    </ScrollView>
</ContentPage>

CSS スタイル シートは、セクションの最初の行で Resources 参照されます。

<StyleSheet Source="CatalogItemsStyles.css" />

また、3 つの項目のそれぞれに設定が含まれる StyleClass 2 つの要素があることにも注意してください。

<Label Text="Seated Monkey" StyleClass="header" />
···
<Label StyleClass="empty" />

これらは CatalogItemsStyles.css スタイル シートのセレクターを参照します。

frame {
    width: 300;
    height: 480;
    background-color: lightyellow;
    margin: 10;
}

label {
    margin: 4 0;
}

label.header {
    margin: 8 0;
    font-size: large;
    color: blue;
}

label.empty {
    flex-grow: 1;
}

image {
    height: 180;
    order: -1;
    align-self: center;
}

button {
    font-size: large;
    color: white;
    background-color: green;
}

バインド可能な添付プロパティをいくつか FlexLayout 参照します。 セレクターには label.empty 、 属性が表示されます flex-grow 。この属性は、 の上に空白スペースを提供するために空 Label のスタイルを設定します Buttonimageセレクターには属性と属性がalign-selforderまれており、どちらもアタッチされたバインド可能なプロパティにFlexLayout対応しています。

に直接プロパティを設定でき、 の子にFlexLayoutFlexLayoutアタッチされたバインド可能なプロパティを設定できることを確認しました。 または、従来の XAML ベースのスタイルまたは CSS スタイルを使用して、これらのプロパティを間接的に設定することもできます。 重要なのは、これらのプロパティを知り、理解しておくことです。 これらのプロパティによって、真に FlexLayout 柔軟になります。

Xamarin.University を使用した FlexLayout

Xamarin.Forms 3.0 Flex レイアウトのビデオ