Xamarin.Forms FlexLayoutThe Xamarin.Forms FlexLayout

サンプルのダウンロードサンプルをダウンロードします。Download Sample Download the sample

FlexLayout を使用して、子ビューのコレクションの配置と折り返しを行う。Use FlexLayout for stacking or wrapping a collection of child views.

Xamarin.Forms FlexLayout は Xamarin.Forms 3.0 の新機能です。The Xamarin.Forms FlexLayout is new in Xamarin.Forms version 3.0. これは CSS フレキシブル ボックス レイアウト モジュール に基づいており、通常 flex layoutflex-box として知られています。これはレイアウトに子を整列するための多くの柔軟なオプションが含まれているためそう呼ばれています。It is based on the CSS Flexible Box Layout Module, commonly known as flex layout or flex-box, so called because it includes many flexible options to arrange children within the layout.

FlexLayout は スタックに水平および垂直方向に配置することができる Xamarin.Forms の StackLayout に似ています。FlexLayout is similar to the Xamarin.Forms StackLayout in that it can arrange its children horizontally and vertically in a stack. ただし、FlexLayout は、1行または1列に多すぎて収められない場合に子を折り返す機能もあります。また配置方向や配置属性やさまざまな画面サイズへ対応するための多くのオプションもあります。However, the FlexLayout is also capable of wrapping its children if there are too many to fit in a single row or column, and also has many options for orientation, alignment, and adapting to various screen sizes.

FlexLayoutLayout<View> から派生し、IList<View> 型の Children プロパティを継承しています。FlexLayout derives from Layout<View> and inherits a Children property of type IList<View>.

FlexLayout は、6 つのパブリックなバインド可能なプロパティと、サイズ・向き・およびその子要素の配置に影響する 5 つのバインド可能な添付プロパティが定義されています。FlexLayout defines six public bindable properties and five attached bindable properties that affect the size, orientation, and alignment of its child elements. (バインド可能な添付プロパティについてご不明な点があれば、 添付プロパティ の記事を参照してください。)これらのプロパティは、以下の 添付プロパティの詳細バインド可能な添付プロパティの詳細 のセクションで詳しく説明されています。(If you're not familiar with attached bindable properties, see the article Attached properties.) These properties are described in detail in the sections below on The bindable properties in detail and The attached bindable properties in detail. しかし、この記事はこれらのプロパティの多くをより簡略に説明する FlexLayout一般的な使用シナリオ のセクションから始まります。However, this article begins with a section on some Common usage scenarios of FlexLayout that describes many of these properties more informally. この記事の最後に、FlexLayoutCSS スタイルシート を組み合わせる方法を参照できます。Towards the end of the article, you'll see how to combine FlexLayout with CSS style sheets.

一般的な使用シナリオCommon usage scenarios

FlexLayoutDemos サンプル プログラムにはの一般的な使用方法を説明するいくつかのページが含まれていますFlexLayoutし、そのプロパティを実験することができます。The FlexLayoutDemos sample program contains several pages that demonstrate some common uses of FlexLayout and allows you to experiment with its properties.

単純なスタックで FlexLayout を使用するUsing FlexLayout for a simple stack

Simple Stack のページは、FlexLayoutStackLayout の代わりにどのように、よりシンプルなマークアップで使用できるかを示します。The Simple Stack page shows how FlexLayout can substitute for a StackLayout but with simpler markup. このサンプルは全てXAMLで定義されています。Everything in this sample is defined in the XAML page. この FlexLayout は 4 つの子が含まれています。The FlexLayout contains four children:

<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、および Universal Windows Platform で実行したページを次に示します。Here's that page running on iOS, Android, and the Universal Windows Platform:

Simple Stack ページThe Simple Stack Page

FlexLayoutSimpleStackPage.xamlファイルに の 3 つのプロパティが示されています。Three properties of FlexLayout are shown in the SimpleStackPage.xaml file:

  • Directionプロパティは、FlexDirection列挙型の値が設定されます。The Direction property is set to a value of the FlexDirection enumeration. 既定値は Row です。The default is Row. このプロパティを Column に設定すると、 FlexLayout の子はアイテムを 1 つの列に配置します。Setting the property to Column causes the children of the FlexLayout to be arranged in a single column of items.

    FlexLayout のアイテムが1列で配置されたとき、 FlexLayout は垂直の 主軸 と水平の 交差軸 を持つとされます。When items in a FlexLayout are arranged in a column, the FlexLayout is said to have a vertical main axis and a horizontal cross axis.

  • AlignItemsプロパティは、FlexAlignItems 型で、交差軸上にアイテムを配置する方法を指定します。The AlignItems property is of type FlexAlignItems and specifies how items are aligned on the cross axis. Centerオプションは、各アイテムを水平方向に中央揃えにします。The Center option causes each item to be horizontally centered.

    もしこのタスクに FlexLayout ではなく StackLayout を使用していたら、各アイテムの HorizontalOptionsCenter に設定することで、全てのアイテムを中央揃えにする必要があったでしょう。If you were using a StackLayout rather than a FlexLayout for this task, you would center all the items by assigning the HorizontalOptions property of each item to Center. HorizontalOptions プロパティは、 FlexLayout の子では動作しませんが、 1つの AlignItems プロパティだけで同じ目標を達成できます。The HorizontalOptions property doesn't work for children of a FlexLayout, but the single AlignItems property accomplishes the same goal. 必要であれば、 AlignSelf の添付されたバインド可能なプロパティを使って、個別のアイテムの AlignItems プロパティを上書きできます。If you need to, you can use the AlignSelf attached bindable property to override the AlignItems property for individual items:

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

    この変更によって、 この Label は、読み順が左から右の場合、FlexLayout の左の端に配置されます。With that change, this one Label is positioned at the left edge of the FlexLayout when the reading order is left-to-right.

  • JustifyContentプロパティは、FlexJustify 型で、主軸上にアイテムを配置する方法を指定します。The JustifyContent property is of type FlexJustify, and specifies how items are arranged on the main axis. SpaceEvenlyオプションは、全ての垂直の余白を全てのアイテム間と最初のアイテムの上と最後のアイテムの下とで均等に割り当てます。The SpaceEvenly option allocates all leftover vertical space equally between all the items, and above the first item, and below the last item.

    もし StackLayout を使用していたら、同様の効果を実現するために、各アイテムの VerticalOptions プロパティに CenterAndExpand を設定する必要があったでしょう。If you were using a StackLayout, you would need to assign the VerticalOptions property of each item to CenterAndExpand to achieve a similar effect. しかしCenterAndExpand オプションは、最初のアイテムの前と最後のアイテムの後の余白の2倍の余白を各アイテム間に割り当ててしまいます。But the CenterAndExpand option would allocate twice as much space between each item than before the first item and after the last item. FlexLayoutJustifyContent プロパティを SpaceAround に設定することで、 VerticalOptionsCenterAndExpand オプションを再現できます。You can mimic the CenterAndExpand option of VerticalOptions by setting the JustifyContent property of FlexLayout to SpaceAround.

これらの FlexLayout プロパティは、下にある バインド可能なプロパティの詳細 セクションでより詳しく説明します。These FlexLayout properties are discussed in more detail in the section The bindable properties in detail below.

FlexLayout を使ってアイテムを折り返すUsing FlexLayout for wrapping items

FlexLayoutDemos サンプルの Photo Wrapping のページでは、FlexLayoutがどのように行または列に追加された子を折り返すことができるかを説明します。The Photo Wrapping page of the FlexLayoutDemos sample demonstrates how FlexLayout can wrap its children to additional rows or columns. 次のXAML ファイルでは FlexLayout をインスタンス化し、2 つのプロパティを割り当てます。The XAML file instantiates the FlexLayout and assigns two properties of it:

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

この FlexLayoutDirection プロパティは未設定なので、規定の設定 Row になり、子が行に配置されて主軸が水平方向になることを意味します。The Direction property of this FlexLayout is not set, so it has the default setting of Row, meaning that the children are arranged in rows and the main axis is horizontal.

Wrapプロパティは、 FlexWrap列挙型です。The Wrap property is of an enumeration type FlexWrap. アイテムが多くて行に収まらない場合は、このプロパティの設定によってアイテムを次の行に折り返すことができます。If there are too many items to fit on a row, then this property setting causes the items to wrap to the next row.

FlexLayoutScrollView の子であることに注意してください。Notice that the FlexLayout is a child of a ScrollView. ページに収まらないほどの多くの行がある場合、 ScrollView は、Vertical という既定の Orientation プロパティを持ち、 垂直スクロールできるようになります。If there are too many rows to fit on the page, then the ScrollView has a default Orientation property of Vertical and allows vertical scrolling.

JustifyContentプロパティは、各アイテムが同じ量の空白によって囲まれるように、主軸(水平方向軸)の余った領域を割り当てます。The JustifyContent property allocates leftover space on the main axis (the horizontal axis) so that each item is surrounded by the same amount of blank space.

次の分離コード ファイルでは、サンプル写真のコレクションにアクセスし、 FlexLayoutChildren コレクションに追加します。The code-behind file accesses a collection of sample photos and adds them to the Children collection of the 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;
    }
}

下にスクロールされる上から実行されている、段階的にプログラムを次に示します。Here's the program running, progressively scrolled from top to bottom:

Photo Wrapping ページThe Photo Wrapping Page

FlexLayout を使ったページレイアウトPage layout with FlexLayout

非常に望ましいレイアウト形式ですが、完全に実現することがしばしば困難であることから、 聖杯と呼ばれる webデザインの標準的なレイアウトがあります。There is a standard layout in web design called the holy grail because it's a layout format that is very desirable, but often hard to realize with perfection. そのレイアウトは、ページの上部にあるヘッダーと下部にあるフッターで構成され、そのどちらもページの幅全体に及びます。The layout consists of a header at the top of the page and a footer at the bottom, both extending to the full width of the page. ページの中央を占めるものは、メインコンテンツですが、しばしばコンテンツの左側に縦型のメニューと右側に補助的な情報(aside エリア とも呼ばれる)があります。Occupying the center of the page is the main content, but often with a columnar menu to the left of the content and supplementary information (sometimes called an aside area) at the right. Section 5.4.1 of the CSS Flexible Box Layout specification 5.4.1 で 聖杯レイアウトを flex box を使って実現する方法について説明されています。Section 5.4.1 of the CSS Flexible Box Layout specification describes how the holy grail layout can be realized with a flex box.

FlexLayoutDemos サンプル の Holy Grail Layout のページは、FlexLayout の入れ子を使った聖杯レイアウトの簡単な実装を示しています。The Holy Grail Layout page of the FlexLayoutDemos sample shows a simple implementation of this layout using one FlexLayout nested in another. このページは縦向きモードの電話用にデザインされているため、コンテンツ領域の右側および左側の領域は50ピクセル幅です。Because this page is designed for a phone in portrait mode, the areas to the left and right of the content area are only 50 pixels wide:

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

ここでは、実行します。Here it is running:

Holy Grail Layout ページThe Holy Grail Layout Page

ナビゲーションと aside エリアは、左側と右側に BoxView を使ってレンダリングしています。The navigation and aside areas are rendered with a BoxView on the left and right.

XAML ファイルの最初の FlexLayout は垂直の主軸を持ち、列に配置された3つの子を含んでいます。The first FlexLayout in the XAML file has a vertical main axis and contains three children arranged in a column. それらは ヘッダー、ページ本体、フッターとなります。These are the header, the body of the page, and the footer. 入れ子の FlexLayout は水平の主軸と行に配置された3つの子を持ちます。The nested FlexLayout has a horizontal main axis with three children arranged in a row.

このプログラムでは、次の 3 つのバインド可能な添付プロパティについて説明します。Three attached bindable properties are demonstrated in this program:

  • Orderのバインド可能な添付プロパティは、最初の BoxView にセットされています。The Order attached bindable property is set on the first BoxView. このプロパティは、既定値 0 を持つ整数型です。This property is an integer with a default value of 0. このプロパティを使ってレイアウトの順序を変更することができます。You can use this property to change the layout order. 一般的に開発者は、ナビゲーション項目と aside 項目より前にページのコンテンツがマークアップに表示されることを好みます。Generally developers prefer the content of the page to appear in markup prior to the navigation items and aside items. 最初の BoxViewOrder プロパティに他の兄弟要素より小さい値を設定すると、その行の最初のアイテムとして表示することができます。Setting the Order property on the first BoxView to a value less than its other siblings causes it to appear as the first item in the row. 同様に、Order プロパティに兄弟要素より大きい値を設定することでアイテムを最後に表示させることができます。Similarly, you can ensure that an item appears last by setting the Order property to a value greater than its siblings.

  • Basis添付プロパティは、2 つの BoxView に 50 ピクセル幅を与えるために設定されています。The Basis attached bindable property is set on the two BoxView items to give them a width of 50 pixels. このプロパティは、 FlexBasis 型で、 Auto という名前の FlexBasis 型の静的プロパティが定義されている構造体で、Auto が既定値となります。This property is of type FlexBasis, a structure that defines a static property of type FlexBasis named Auto, which is the default. Basis を使って、ピクセルのサイズまたは主軸上でそのアイテムが占める領域の量を示すパーセンテージを指定することができます。You can use Basis to specify a pixel size or a percentage that indicates how much space the item occupies on the main axis. basis と呼ばれる理由は、全ての後続のレイアウトの基本となるアイテムのサイズを指定するためです。It is called a basis because it specifies an item size that is the basis of all subsequent layout.

  • Growプロパティは、 入れ子の Layout と コンテンツを表す子の Label に設定されています。The Grow property is set on the nested Layout and on the Label child representing the content. このプロパティは float 型で、既定値は 0 です。This property is of type float and has a default value of 0. 正の値を設定すると、主軸上にある残りの全ての領域が、そのアイテムと正の値の Grow を持つ兄弟要素に割り当てられます。その領域は Grow の値の比率にしたがって割り当てられます。When set to a positive value, all the remaining space along the main axis is allocated to that item and to siblings with positive values of Grow. これは Grid の星形のプロパティにやや似ています。The space is allocated proportionally to the values, somewhat like the star specification in a Grid.

    最初の Grow 添付プロパティは、 入れ子の FlexLayout 上に設定されており、この FlexLayout が外側の FlexLayout 内の未使用の垂直の領域全てを使用することを示しています。The first Grow attached property is set on the nested FlexLayout, indicating that this FlexLayout is to occupy all the unused vertical space within the outer FlexLayout. 2つめの Grow 添付プロパティは、コンテンツを表す Label 上に設定されており、このコンテンツが 内部の FlexLayout の未使用の水平の領域全てを使用することを示します。The second Grow attached property is set on the Label representing the content, indicating that this content is to occupy all the unused horizontal space within the inner FlexLayout.

    同様に、子のサイズの合計が (折り返ししない) FlexLayout のサイズを超える場合に使うことができる Shrink のバインド可能な添付プロパティもあります。There is also a similar Shrink attached bindable property that you can use when the size of children exceeds the size of the FlexLayout but wrapping is not desired.

FlexLayout を使ったカタログアイテムCatalog items with FlexLayout

FlexLayoutDemos サンプルの Catalog Items ページは、水平スクロールによって一連の3匹のサルの写真と説明が表示される点以外は、CSS フレックス レイアウト ボックス仕様の1.1のセクションの例1 に似ています。The Catalog Items page in the FlexLayoutDemos sample is similar to Example 1 in Section 1.1 of the CSS Flex Layout Box specification except that it displays a horizontally scrollable series of pictures and descriptions of three monkeys:

Catalog Items ページThe Catalog Items Page

3匹のそれぞれのサルは、明示的に高さと幅を与えられた Frame に含まれた FlexLayout の中に表示します。またそれは、より大きな FlexLayout の子となっています。Each of the three monkeys is a FlexLayout contained in a Frame that is given an explicit height and width, and which is also a child of a larger FlexLayout. この XAML ファイルでは、FlexLayout の子のプロパティのほとんどは、スタイルで指定されており、そのうちの一つ以外は暗黙的なスタイルが使われています。In this XAML file, most of the properties of the FlexLayout children are specified in styles, all but one of which is an implicit style:

<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 のための暗黙的なスタイルは、Flexlayout の2つのバインド可能な添付プロパティの設定を含みます。The implicit style for the Image includes settings of two attached bindable properties of Flexlayout:

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

Orderの設定の –1 は、Image 要素を子コレクション内の位置に関係なく、それぞれの入れ子の FlexLayout で最初に表示させるようにします。The Order setting of –1 causes the Image element to be displayed first in each of the nested FlexLayout views regardless of its position within the children collection. AlignSelfプロパティの Center は、ImageFlexLayout 内で中央揃えにします。The AlignSelf property of Center causes the Image to be centered within the FlexLayout. このプロパティは AlignItems プロパティの設定を上書きします。AlignItems プロパティは規定値として Stretch を持つので、LabelButtonFlexLayout の全幅に引き延ばされるということになります。This overrides the setting of the AlignItems property, which has a default value of Stretch, meaning that the Label and Button children are stretched to the full width of the FlexLayout.

3 つの各 FlexLayout の中には、空白の LabelButton の前にあり、それには Grow に 1 が設定されています。Within each of the three FlexLayout views, a blank Label precedes the Button, but it has a Grow setting of 1. これは全ての余分な垂直の領域がこの空白の Label に割り当てられることを意味します。これによって Button を最下部に効果的に押し出すことができます。This means that all the extra vertical space is allocated to this blank Label, which effectively pushes the Button to the bottom.

バインド可能なプロパティの詳細The bindable properties in detail

FlexLayout のいくつかの一般的なアプリケーションを見てきた今なら、FlexLayout のプロパティをより詳しく調査できるはずです。Now that you've seen some common applications of FlexLayout, the properties of FlexLayout can be explored in more detail. FlexLayout 設定された 6 つのバインド可能なプロパティを定義、FlexLayout自体であるため、コードまたは XAML でコントロールの向きを配置します。FlexLayout defines six bindable properties that you set on the FlexLayout itself, either in code or XAML, to control orientation and alignment. (これらのプロパティの1つに Position がありますが、これはこの記事では説明しません。)(One of these properties, Position, is not covered in this article.)

FlexLayoutDemos サンプル の Experiment ページ を使って、残り 5 つのバインド可能なプロパティを試すことができます。You can experiment with the five remaining bindable properties using the Experiment page of the FlexLayoutDemos sample. このページは、FlexLayout から子を追加・削除したり、5 つのバインド可能なプロパティの組み合わせを設定したりすることができます。This page allows you to add or remove children from a FlexLayout and to set combinations of the five bindable properties. FlexLayout の全ての子は、様々な色やサイズの Label view で、Text プロパティには Children コレクションの位置に対応する番号がセットされます。All the children of the FlexLayout are Label views of various colors and sizes, with the Text property set to a number corresponding to its position in the Children collection.

プログラムを起動すると、5 つの Picker view に、これら 5 つの FlexLayout のプロパティの規定値が表示されます。When the program starts up, five Picker views display the default values of these five FlexLayout properties. 画面下部の FlexLayout は 3 つの子を含んでいます。The FlexLayout towards the bottom of the screen contains three children:

実験ページ:既定The Experiment Page: Default

Label view は、 FlexLayout 内で Label に割り当てられた領域を示すグレーの背景を持っています。Each of the Label views has a gray background that shows the space allocated to that Label within the FlexLayout. FlexLayout 自身の背景はアリスブルーです。The background of the FlexLayout itself is Alice Blue. それはページ下部の左右の少量の余白を除いた領域全体を占めます。It occupies the entire bottom area of the page except for a little margin at the left and right.

Direction プロパティThe Direction property

Direction プロパティは 4 つのメンバーを列挙する FlexDirection 型です。The Direction property is of type FlexDirection, an enumeration with four members:

  • Column
  • ColumnReverse ( XAML 内では "cloumn-reverse" も可 )ColumnReverse (or "column-reverse" in XAML)
  • Row 既定値Row, the default
  • RowReverse ( XAML 内では "row-reverse" も可 )RowReverse (or "row-reverse" in XAML)

XAML では、このプロパティの値を大文字や小文字、またはそれらの混在で列挙メンバー名を指定できます。また、CSSの指定方法と同様の括弧内に示す2つの追加された文字列も使用可能です。In XAML, you can specify the value of this property using the enumeration member names in lowercase, uppercase, or mixed case, or you can use two additional strings shown in parentheses that are the same as the CSS indicators. ("column-reverse" と "row-reverse" は FlexDirectionTypeConverter クラスに定義され、XAML パーサーによって使用されます。(The "column-reverse" and "row-reverse" strings are defined in the FlexDirectionTypeConverter class used by the XAML parser.)

ここに、 (左から右へ順番に) Row direction、Column direction、およびColumnReverse direction で表示した Experiment ページ を示します。Here's the Experiment page showing (from left to right), the Row direction, Column direction, and ColumnReverse direction:

![実験ページ:(flex-layout-images/ExperimentDirection.png "実験ページの方向")]The Experiment Page: Direction

Reverse オプションに注意してください。これはアイテムが右または下から始まるようになります。Notice that for the Reverse options, the items start at the right or bottom.

Wrap プロパティThe Wrap property

Wrapプロパティは 3 つのメンバーを列挙する FlexWrap 型です。The Wrap property is of type FlexWrap, an enumeration with three members:

  • NoWrap 既定値NoWrap, the default
  • Wrap
  • Reverse ( XAML 内では "wrap-reverse" も可 )Reverse (or "wrap-reverse" in XAML)

左から順番に、12 の子を持つ NoWrapWrapReverse オプションでの画面表示です。From left to right, these screens show the NoWrap, Wrap and Reverse options for 12 children:

実験ページ:折り返すThe Experiment Page: Wrap

Wrap プロパティに NoWrap が設定されていて、主軸が (このプログラム) のように制約されていると、主軸は全ての子を合わせるほどの十分な高さや幅がありません。FlexLayout は、iOSのデモのスクリーンショットのように、アイテムを小さくさせることを試みます。When the Wrap property is set to NoWrap and the main axis is constrained (as in this program), and the main axis is not wide or tall enough to fit all the children, the FlexLayout attempts to make the items smaller, as the iOS screenshot demonstrates. Shrink 添付プロパティを使って、これらのアイテムの縮小を制御することができます。You can control the shrinkness of the items with the Shrink attached bindable property.

JustifyContent プロパティThe JustifyContent property

JustifyContentプロパティは 6 つのメンバーを列挙する FlexJustify 型です。The JustifyContent property is of type FlexJustify, an enumeration with six members:

  • Start ( XAML では "flex-start" も可 )、既定値Start (or "flex-start" in XAML), the default
  • Center
  • End ( XAML では "flex-end" も可 )End (or "flex-end" in XAML)
  • SpaceBetween ( XAML では "space-between" も可 )SpaceBetween (or "space-between" in XAML)
  • SpaceAround ( XAML では "space-around" も可 )SpaceAround (or "space-around" in XAML)
  • SpaceEvenly

このプロパティは、主軸上でのアイテムを配置方法を指定します。この例では主軸は水平軸です。This property specifies how the items are spaced on the main axis, which is the horizontal axis in this example:

![実験ページ:コンテンツの調整(flex-layout-images/ExperimentJustifyContent.png "実験ページのコンテンツのジャスティフィケーション")]The Experiment Page: Justify Content

3 つのすべてのスクリーン ショットでは、Wrap プロパティには Wrap が設定されています。In all three screenshots, the Wrap property is set to Wrap. 規定値である Start は、Android のスクリーンショットで示しています。The Start default is shown in the previous Android screenshot. iOS のスクリーンショットには Center オプション (すべてのアイテムが中央に移動)が示されています。The iOS screenshot here shows the Center option: all the items are moved to the center. Space という単語で始まるその他3つのオプションは、アイテムに使用されなかった余白を割り当てます。The three other options beginning with the word Space allocate the extra space not occupied by the items. SpaceBetween はアイテムの間に余白を均等に割り当て、SpaceAround は各アイテムの両端に均等に余白を置きます。一方、SpaceEvenly は各アイテムの間と行の最初のアイテムの前と最後のアイテムの後に均等に余白を置きます。SpaceBetween allocates the space equally between the items; SpaceAround puts equal space around each item, while SpaceEvenly puts equal space between each item, and before the first item and after the last item on the row.

AlignItems プロパティThe AlignItems property

AlignItemsプロパティは、4 つのメンバーを列挙する FlexAlignItems 型です。The AlignItems property is of type FlexAlignItems, an enumeration with four members:

  • Stretch 既定値Stretch, the default
  • Center
  • Start ( XAML では "flex-start" も可 )Start (or "flex-start" in XAML)
  • End ( XAML では "flex-end" も可 )End (or "flex-end" in XAML)

これは、 交差軸上に子を整列する方法を示す 2 つのプロパティの 1 つ(もう 1 つはAlignContent)です。This is one of two properties (the other being AlignContent) that indicates how children are aligned on the cross axis. 各行内で(上のスクリーンショットで示すように)子は引き伸ばされますが、以下の3つのスクリーンショットのように、各アイテムの開始・中央・終了位置に揃えられます。Within each row, the children are stretched (as shown in the previous screenshot), or aligned on the start, center, or end of each item, as shown in the following three screenshots:

実験ページ:項目整列The Experiment Page: Align Items

iOS のスクリーンショットでは、すべての子は上揃えになっています。In the iOS screenshot, the tops of all the children are aligned. Android のスクリーンショットでは、全てのアイテムはもっとも高い子に合わせて垂直方向に中央揃えになっています。In the Android screenshots, the items are vertically centered based on the tallest child. UWP のスクリーンショットでは、すべてのアイテムは下揃えになっています。In the UWP screenshot, the bottoms of all the items are aligned.

すべての個々のアイテムは、AlignSelf 添付プロパティを使って AlignItems の設定を上書きすることができます。For any individual item, the AlignItems setting can be overridden with the AlignSelf attached bindable property.

AlignContent プロパティThe AlignContent property

AlignContentプロパティは、7 つのメンバーを列挙する FlexAlignContent 型です。The AlignContent property is of type FlexAlignContent, an enumeration with seven members:

  • Stretch 既定値Stretch, the default
  • Center
  • Start ( XAML では "flex-start" も可 )Start (or "flex-start" in XAML)
  • End ( XAML では "flex-end" も可 )End (or "flex-end" in XAML)
  • SpaceBetween ( XAML では "space-between" も可 )SpaceBetween (or "space-between" in XAML)
  • SpaceAround ( XAML では "space-around" も可 )SpaceAround (or "space-around" in XAML)
  • SpaceEvenly

AlignItems と同様に、AlignContent プロパティも交差軸上の子を整列しますが、これは行または列全体に影響を与えます。Like AlignItems, the AlignContent property also aligns children on the cross axis, but affects entire rows or columns:

![実験ページ:コンテンツの配置(flex-layout-images/ExperimentAlignContent.png "実験ページのコンテンツの整列")]The Experiment Page: Align Content

両方の行は、iOS のスクリーン ショット。 上部にあります。center; にあればの Android のスクリーン ショット下部にある UWP のスクリーン ショットになるとします。In the iOS screenshot, both rows are at the top; in the Android screenshot they're in the center; and in the UWP screenshot they're at the bottom. 行自体もさまざまな方法で配置することができます。The rows can also be spaced in various ways:

![実験ページ:コンテンツの整列]2(flex-layout-images/ExperimentAlignContent2.png "実験ページの配置 2")The Experiment Page:  Align Content 2

AlignContent は1行または1列のみの場合は影響を与えません。The AlignContent has no effect when there is only one row or column.

バインド可能な添付プロパティの詳細The attached bindable properties in detail

FlexLayout は 5 つの添付プロパティが定義されています。これらのプロパティは Flexlayout の子に設定され、その特定の子のみに影響します。FlexLayout defines five attached bindable properties. 子でこれらのプロパティを設定、FlexLayoutし、その特定の子にのみ関連します。These properties are set on children of the FlexLayout and pertain only to that particular child.

AlignSelf プロパティThe AlignSelf Property

AlignSelf 添付プロパティは、 5 つのメンバーを列挙する FlexAlignSelf 型です。The AlignSelf attached bindable property is of type FlexAlignSelf, an enumeration with five members:

  • Auto 既定値Auto, the default
  • Stretch
  • Center
  • Start ( XAML では "flex-start" も可 )Start (or "flex-start" in XAML)
  • End ( XAML では "flex-end" も可 )End (or "flex-end" in XAML)

FlexLayout の任意の個別の子のために、このプロパティの設定は FlexLayout 自身の AlignItems プロパティ設定を上書きします。For any individual child of the FlexLayout, this property setting overrides the AlignItems property set on the FlexLayout itself. 規定の設定である AutoAlignItems の設定を使用することを意味します。The default setting of Auto means to use the AlignItems setting.

例えば Label という名前の label 要素には、以下のようにコードで AlignSelf プロパティをセットすることができます。For a Label element named label (or example), you can set the AlignSelf property in code like this:

FlexLayout.SetAlignSelf(label, FlexAlignSelf.Center);

Label の親である FlexLayout への参照がないことに注意してください。Notice that there is no reference to the FlexLayout parent of the Label. XAML では、このようなプロパティを設定します。In XAML, you set the property like this:

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

Order プロパティThe Order Property

Order プロパティは int 型で、The Order property is of type int. 既定値は 0 です。The default value is 0.

Order プロパティは、FlexLayout の子が配置される順番を変更することができます。The Order property allows you to change the order that the children of the FlexLayout are arranged. 通常、FlexLayout の子は Children コレクションの出現順と同じ順番で配置されます。Usually, the children of a FlexLayout are arranged is the same order that they appear in the Children collection. この順番は、1つ以上の子の Order 添付プロパティに 0 以外の数値を設定することで上書きすることができます。You can override this order by setting the Order attached bindable property to a non-zero integer value on one or more children. FlexLayout はその場合、それぞれの子の Order プロパティの設定に基づいて自身の子を配置します。ただし、同じ Order 設定を持つ子は、Children コレクションの出現順に配置されます。The FlexLayout then arranges its children based on the setting of the Order property on each child, but children with the same Order setting are arranged in the order that they appear in the Children collection.

Basis プロパティThe Basis Property

Basis 添付プロパティは、主軸上で FlexLayout の子に割り当てられている領域の量を示します。The Basis attached bindable property indicates the amount of space that is allocated to a child of the FlexLayout on the main axis. 指定したサイズ、Basisプロパティは、メインの親の軸に沿ったサイズFlexLayoutします。The size specified by the Basis property is the size along the main axis of the parent FlexLayout. したがって、Basis は、行に子が配置された時の子の幅、または列に子が配置された時の高さを示します。Therefore, Basis indicates the width of a child when the children are arranged in rows, or the height when the children are arranged in columns.

Basisプロパティは、FlexBasis 型の構造体です。The Basis property is of type FlexBasis, a structure. サイズはデバイスに依存しない単位、または FlexLayout のサイズの割合のどちらかで指定することができます。The size can be specified in either device-independent units or as a percentage of the size of the FlexLayout. Basis プロパティの規定値は、静的プロパティの FlexBasis.Auto で、これは子に要求した幅や高さが使用されることを意味します。The default value of the Basis property is the static property FlexBasis.Auto, which means that the child's requested width or height is used.

コードでは、以下のように label という名前の LabelBasis プロパティに 40 デバイス非依存単位を設定することができます。In code, you can set the Basis property for a Label named label to 40 device-independent units like this:

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

FlexBasis コンストラクタの 2 番目の引数は isRelative という名前で、相対サイズ(true)にするか絶対サイズ(false)にするかどうかを示します。The second argument to the FlexBasis constructor is named isRelative and indicates whether the size is relative (true) or absolute (false). この引数は規定値として false を持っています。したがって次のコードのように書くこともできます。The argument has a default value of false, so you can also use the following code:

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

float から FlexBasis への暗黙的な変換が定義されているので、より簡略的に記述できます。An implicit conversion from float to FlexBasis is defined, so you can simplify it even further:

FlexLayout.SetBasis(label, 40);

以下のように、親の FlexLayout の 25% にサイズを設定できます。You can set the size to 25% of the FlexLayout parent like this:

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

この小数値は 0 ~ 1 の範囲でなければなりません。This fractional value must be in the range of 0 to 1.

XAML では、デバイス非依存単位のサイズの数値を使用できます。In XAML, you can use a number for a size in device-independent units:

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

また 0 ~ 100% の範囲も指定できます。Or you can specify a percentage in the range of 0% to 100%:

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

FlexLayoutDemos サンプルの Basis Experiment のページでは、Basis プロパティを試すことができます。The Basis Experiment page of the FlexLayoutDemos sample allows you to experiment with the Basis property. このページは交互に異なる背景色と前景色を持つ 5 つの Label 要素の折り返しする列が表示されます。The page displays a wrapped column of five Label elements with alternating background and foreground colors. 2 つの Slider 要素は 2 番目と 4 番目の LabelBasis 値を指定します。Two Slider elements let you specify Basis values for the second and fourth Label:

The Basis Experiment PageThe Basis Experiment Page

左の iOS のスクリーンショットは、2 つの Label 要素がデバイス非依存単位で高さが与えられていること示しています。The iOS screenshot at the left shows the two Label elements being given heights in device-independent units. Android のスクリーンショットは、それらの要素が FlexLayout の 合計の高さに対する割合での高さが与えられていることを示しています。The Android screen shows them being given heights that are a fraction of the total height of the FlexLayout. が 100% に設定されている場合、子はの高さFlexLayoutになり、次の列に折り返され、UWP スクリーンショットに示すように、その列の高さ全体が占められます。 Basis5つの子が1つの行に配置されているように見えますが、実際には5つの列に配置されています。If the Basis is set at 100%, then the child is the height of the FlexLayout, and will wrap to the next column and occupy the entire height of that column, as the UWP screenshot demonstrates: It appears as if the five children are arranged in a row, but they're actually arranged in five columns.

Grow プロパティThe Grow Property

Grow添付プロパティは int 型です。The Grow attached bindable property is of type int. 規定値は 0 でこの値は 0以上でなければなりません。The default value is 0, and the value must be greater than or equal to 0.

Growプロパティは、役割を果たすときに、Wrapプロパティに設定されてNoWrap子の行には、幅より小さい、幅の合計、 FlexLayout、または子の列がよりも短い高さ、 FlexLayoutThe Grow property plays a role when the Wrap property is set to NoWrap and the row of children has a total width less than the width of the FlexLayout, or the column of children has a shorter height than the FlexLayout. Grow プロパティは子に余った領域を分配する方法を示します。The Grow property indicates how to apportion the leftover space among the children.

Grow Experiment ページでは、交互に異なる色の 5 つの Label要素が列に配置されています。そして 2 つの Slider で 2 番目と 4 番目の LabelGrow プロパティを調整できます。In the Grow Experiment page, five Label elements of alternating colors are arranged in a column, and two Slider elements allow you to adjust the Grow property of the second and fourth Label. 一番左の iOS のスクリーンショットは、Grow プロパティが 0 であるデフォルトの状態を示しています。The iOS screenshot at the far left shows the default Grow properties of 0:

The Grow Experiment PageThe Grow Experiment Page

ある子要素に正の Grow 値が設定されている場合、Android のスクリーンショットで示すように、その子要素は残りの全ての領域を取得します。If any one child is given a positive Grow value, then that child takes up all the remaining space, as the Android screenshot demonstrates. この領域は2つ以上の子の間で割り当てることもできます。This space can also be allocated among two or more children. UWP のスクリーンショットでは、2 番目の LabelGrow プロパティに 0.5 を、4 番目の LabelGrow プロパティに 1.5 を設定しています。それによって 4 番目の Label に 2 番目の Label の 3 倍の領域が残りの領域から与えられます。In the UWP screenshot, the Grow property of the second Label is set to 0.5, while the Grow property of the fourth Label is 1.5, which gives the fourth Label three times as much of the leftover space as the second Label.

子ビューがその領域をどのように使用するかは、子の特定の型によって異なります。How the child view uses that space depends on the particular type of child. Label では、テキストは HorizontalTextAlignmentVerticalTextAlignment のプロパティを使って Label の合計領域内に配置することができます。For a Label, the text can be positioned within the total space of the Label using the properties HorizontalTextAlignment and VerticalTextAlignment.

Shrink プロパティThe Shrink Property

Shrink添付プロパティは int 型です。The Shrink attached bindable property is of type int. 規定値は 1 でその値は 0 以上でなければなりません。The default value is 1, and the value must be greater than or equal to 0.

Shrink プロパティは、Wrap プロパティに NoWrap が設定されていて、1行の子の合計幅が FlexLayout の幅よりも大きくなる場合、または1列の子の合計の高さが FlexLayout の高さより大きくなる場合に機能します。The Shrink property plays a role when the Wrap property is set to NoWrap and the aggregate width of a row of children is greater than the width of the FlexLayout, or the aggregate height of a single column of children is greater than the height of the FlexLayout. 通常、FlexLayout は子のサイズを収縮させることで子を表示しようとします。Normally the FlexLayout will display these children by constricting their sizes. Shrinkプロパティは、子がフルサイズで表示されることに優先度を与えることができます。The Shrink property can indicate which children are given priority in being displayed at their full sizes.

Shrink Experiment ページは、FlexLayout の幅より大きい領域を要求する 5 つの Label の子要素を1行で持つ FlexLayout を生成します。The Shrink Experiment page creates a FlexLayout with a single row of five Label children that require more space than the FlexLayout width. 左の iOS のスクリーンショットでは、全て規定値 1 の Label 要素を表示しています。The iOS screenshot at the left shows all the Label elements with default values of 1:

The Shrink Experiment PageThe Shrink Experiment Page

Android のスクリーン ショットで、Shrink値、2 番目のLabel0 に設定されているLabelがその幅いっぱいに表示されます。In the Android screenshot, the Shrink value for the second Label is set to 0, and that Label is displayed in its full width. また、4 番目の Label には Shrink に 1 より大きい値が与えられ、それは収縮しています。Also, the fourth Label is given a Shrink value greater than one, and it has shrunk. UWP のスクリーンショットは、両方の Label 要素に Shrink 値 0 が与えられ、可能であれば、それらをフルサイズで表示できることを示しています。The UWP screenshot shows both Label elements being given a Shrink value of 0 to allow them to be displayed in their full size, if that is possible.

両方を設定することができます、GrowShrink値、子の集計サイズなる可能性がのサイズよりも大きいか小さい場合に備えて、FlexLayoutします。You can set both the Grow and Shrink values to accommodate situations where the aggregate child sizes might sometimes be less than or sometimes greater than the size of the FlexLayout.

FlexLayout を使った CSS スタイルCSS styling with FlexLayout

FlexLayout に関連して Xamarin.Forms 3.0 に導入された CSS スタイル を使うことができます。You can use the CSS styling feature introduced with Xamarin.Forms 3.0 in connection with FlexLayout. FlexLayoutDemos サンプルの CSS Catalog Items ページは、Catalog Items ページのレイアウトを複写したものですが、多くのスタイルに CSS スタイルシートを使っています。The CSS Catalog Items page of the FlexLayoutDemos sample duplicates the layout of the Catalog Items page, but with a CSS style sheet for many of the styles:

The CSS Catalog Items PageThe CSS Catalog Items Page

オリジナルの CatalogItemsPage.xaml ファイルには 5 つの Style があり、自身の Resources セクション内に 15 の Setter オブジェクトが定義されています。The original CatalogItemsPage.xaml file has five Style definitions in its Resources section with 15 Setter objects. CssCatalogItemsPage.xaml ファイルでは、4 つだけの Setter オブジェクトが定義された 2 つの Style に減少しています。In the CssCatalogItemsPage.xaml file, that has been reduced to two Style definitions with just four Setter objects. これらのスタイルは、Xamarin.Forms CSS スタイル機能が現在サポートしていないプロパティのために、その CSS スタイルシートを補っています。These styles supplement the CSS style sheet for properties that the Xamarin.Forms CSS styling feature currently doesn't support:

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

Resources セクションの最初の行で CSS スタイルシートを参照しています。The CSS style sheet is referenced in the first line of the Resources section:

<StyleSheet Source="CatalogItemsStyles.css" />

3 つの各アイテム内の 2 つの要素に StyleClass 設定が含まれていることにも注目してください。Notice also that two elements in each of the three items include StyleClass settings:

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

これらは CatalogItemsStyles.css スタイルシートのセレクタを参照しています。These refer to selectors in the CatalogItemsStyles.css style sheet:

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 の添付プロパティがここを参照しています。Several FlexLayout attached bindable properties are referenced here. label.emptyセレクタでは、flex-grow 属性が確認できますが、これは Button の上の空白を埋めるために空の Label をスタイルしています。In the label.empty selector, you'll see the flex-grow attribute, which styles an empty Label to provide some blank space above the Button. imageセレクタは、order属性と align-self 属性を含んでおり、その両方が FlexLayout の添付プロパティに対応しています。The image selector contains an order attribute and an align-self attribute, both of which correspond to FlexLayout attached bindable properties.

これまで FlexLayout 上に直接プロパティを設定できることと、FlexLayout の子に添付プロパティを設定できること、You've seen that you can set properties directly on the FlexLayout and you can set attached bindable properties on the children of a FlexLayout. またこれらのプロパティに従来の XAML に基づくスタイルや CSS スタイルを使って間接的に設定できることを見てきましたOr, you can set these properties indirectly using traditional XAML-based styles or CSS styles. 重要なことはこれらのプロパティを知って理解することです。What's important is to know and understand these properties. これらのプロパティは FlexLayout を真に柔軟にさせます。These properties are what makes the FlexLayout truly flexible.

Xamarin.University で FlexLayoutFlexLayout with Xamarin.University

Xamarin. Forms 3.0 のフレックスレイアウトビデオXamarin.Forms 3.0 Flex Layout video