Xamarin.Forms CollectionView レイアウト

サンプルのダウンロード サンプルをダウンロードする

CollectionView では、レイアウトを制御する次のプロパティを定義します。

これらのプロパティは オブジェクトによってサポートされます。これは、プロパティがデータ バインディングのターゲット BindableProperty になることができます。

既定では、 は CollectionView 項目を垂直リストに表示します。 ただし、次のレイアウトを使用できます。

  • 垂直リスト – 新しい項目が追加されるにつれて垂直方向に拡大する 1 つの列リスト。
  • 水平リスト – 新しい項目が追加されるにつれて水平方向に拡大する 1 つの行リスト。
  • 垂直グリッド – 新しい項目が追加されるにつれて垂直方向に拡大する複数列のグリッド。
  • 水平グリッド – 新しい項目が追加されるにつれて水平方向に拡大する複数行グリッド。

これらのレイアウトは、Xamarin_Forms _StructuredItemsView_ItemsLayout" data-linktype="absolute-path">プロパティを クラスから派生したクラスに設定することで ItemsLayout 指定 ItemsLayout できます。 このクラスでは、次のプロパティが定義されています。

これらのプロパティは オブジェクトによってサポートされます。これは、プロパティがデータ バインディングのターゲット BindableProperty になることができます。 スナップ ポイントの詳細については、ガイドの 「スナップ ポイント」 を参照 してください。

ItemsLayoutOrientation 列挙体を使って、次のメンバーを定義できます。

  • Vertical は、項目が CollectionView 追加されるに合って が垂直方向に展開されます。
  • Horizontal は、項目が CollectionView 追加されるに合って を水平方向に展開します。

クラスは クラスを継承し、各項目の周囲の空き領域を表す 型の LinearItemsLayoutItemsLayoutItemSpacingdouble プロパティを定義します。 このプロパティの既定値は 0 であり、その値は常に 0 以上である必要があります。 クラス LinearItemsLayout では、静的メンバーとメンバー VerticalHorizontal 定義されます。 これらのメンバーは、それぞれ垂直リストまたは水平リストを作成するために使用できます。 または、列挙 LinearItemsLayout 型メンバーを引数として指定して、 オブジェクト ItemsLayoutOrientation を作成できます。

クラス GridItemsLayout は クラスを継承 ItemsLayout し、次のプロパティを定義します。

  • VerticalItemSpacing型の double 。各項目の周囲の垂直方向の空き領域を表します。 このプロパティの既定値は 0 であり、その値は常に 0 以上である必要があります。
  • HorizontalItemSpacing型の double 。各項目の周囲の水平方向の空き領域を表します。 このプロパティの既定値は 0 であり、その値は常に 0 以上である必要があります。
  • Span: 型 int 。グリッドに表示する列または行の数を表します。 このプロパティの既定値は 1 であり、その値は常に 1 以上である必要があります。

これらのプロパティは オブジェクトによってサポートされます。これは、プロパティがデータ バインディングのターゲット BindableProperty になることができます。

Note

CollectionView は、ネイティブ レイアウト エンジンを使用してレイアウトを実行します。

垂直リスト

既定では、 CollectionView は項目を縦のリスト レイアウトで表示します。 したがって、このレイアウトを使用するために Xamarin_Forms _StructuredItemsView_ItemsLayout" data-linktype="absolute-path">プロパティを設定 ItemsLayout する必要はありません。

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Image Grid.RowSpan="2"
                       Source="{Binding ImageUrl}"
                       Aspect="AspectFill"
                       HeightRequest="60"
                       WidthRequest="60" />
                <Label Grid.Column="1"
                       Text="{Binding Name}"
                       FontAttributes="Bold" />
                <Label Grid.Row="1"
                       Grid.Column="1"
                       Text="{Binding Location}"
                       FontAttributes="Italic"
                       VerticalOptions="End" />
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

ただし、完全に行う場合、XAML では CollectionView 、Xamarin_Forms CollectionView _StructuredItemsView_ItemsLayout" data-linktype="absolute-path">プロパティを に設定することで、項目を垂直リストに表示するために を設定 ItemsLayout できます VerticalList

<CollectionView ItemsSource="{Binding Monkeys}"
                ItemsLayout="VerticalList">
    ...
</CollectionView>

または、Xamarin_Forms _StructuredItemsView_ItemsLayout" data-linktype="absolute-path">プロパティを オブジェクトに設定し、列挙型メンバーをプロパティ値として指定することで、これを ItemsLayoutLinearItemsLayoutVerticalItemsLayoutOrientationOrientation 実現できます。

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
        <LinearItemsLayout Orientation="Vertical" />
    </CollectionView.ItemsLayout>
    ...
</CollectionView>

これに相当する C# コードを次に示します。

CollectionView collectionView = new CollectionView
{
    ...
    ItemsLayout = LinearItemsLayout.Vertical
};

これにより、1 つの列リストが作成され、新しい項目が追加されるにつれて垂直方向に増加します。

CollectionView の垂直リスト レイアウトのスクリーンショット。iOSおよび Android

水平リスト

XAML では、 の項目を水平方向のリストに表示するには CollectionView 、Xamarin_Forms CollectionView _StructuredItemsView_ItemsLayout" data-linktype="absolute-path">プロパティを に ItemsLayout 設定します HorizontalList

<CollectionView ItemsSource="{Binding Monkeys}"
                ItemsLayout="HorizontalList">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="35" />
                    <RowDefinition Height="35" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="70" />
                    <ColumnDefinition Width="140" />
                </Grid.ColumnDefinitions>
                <Image Grid.RowSpan="2"
                       Source="{Binding ImageUrl}"
                       Aspect="AspectFill"
                       HeightRequest="60"
                       WidthRequest="60" />
                <Label Grid.Column="1"
                       Text="{Binding Name}"
                       FontAttributes="Bold"
                       LineBreakMode="TailTruncation" />
                <Label Grid.Row="1"
                       Grid.Column="1"
                       Text="{Binding Location}"
                       LineBreakMode="TailTruncation"
                       FontAttributes="Italic"
                       VerticalOptions="End" />
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

または、このレイアウトを実現するには、Xamarin_Forms _StructuredItemsView_ItemsLayout" data-linktype="absolute-path">プロパティを オブジェクトに設定し、列挙型メンバーをプロパティ値として ItemsLayoutLinearItemsLayoutHorizontalItemsLayoutOrientation 指定します Orientation

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
        <LinearItemsLayout Orientation="Horizontal" />
    </CollectionView.ItemsLayout>
    ...
</CollectionView>

これに相当する C# コードを次に示します。

CollectionView collectionView = new CollectionView
{
    ...
    ItemsLayout = LinearItemsLayout.Horizontal
};

これにより、1 つの行リストが作成され、新しい項目が追加されるにつれて水平方向に拡大されます。

iOSおよび Androidの水平リスト レイアウトのスクリーンショット

垂直グリッド

XAML では、 の CollectionView Xamarin_Forms CollectionView _StructuredItemsView_ItemsLayout" data-linktype="absolute-path">プロパティを に設定することで、その項目を垂直グリッドに表示 ItemsLayout できます VerticalGrid

<CollectionView ItemsSource="{Binding Monkeys}"
                ItemsLayout="VerticalGrid, 2">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="35" />
                    <RowDefinition Height="35" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="70" />
                    <ColumnDefinition Width="80" />
                </Grid.ColumnDefinitions>
                <Image Grid.RowSpan="2"
                       Source="{Binding ImageUrl}"
                       Aspect="AspectFill"
                       HeightRequest="60"
                       WidthRequest="60" />
                <Label Grid.Column="1"
                       Text="{Binding Name}"
                       FontAttributes="Bold"
                       LineBreakMode="TailTruncation" />
                <Label Grid.Row="1"
                       Grid.Column="1"
                       Text="{Binding Location}"
                       LineBreakMode="TailTruncation"
                       FontAttributes="Italic"
                       VerticalOptions="End" />
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

または、このレイアウトを実現するには、Xamarin_Forms _StructuredItemsView_ItemsLayout" data-linktype="absolute-path">プロパティを、Xamarin_Forms ItemsLayoutGridItemsLayoutItemsLayout _ItemsLayout_Orientation" data-linktype="absolute-path">OrientationVertical プロパティが に設定されているオブジェクトに設定します。

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
       <GridItemsLayout Orientation="Vertical"
                        Span="2" />
    </CollectionView.ItemsLayout>
    ...
</CollectionView>

これに相当する C# コードを次に示します。

CollectionView collectionView = new CollectionView
{
    ...
    ItemsLayout = new GridItemsLayout(2, ItemsLayoutOrientation.Vertical)
};

既定では、垂直では GridItemsLayout 1 つの列に項目が表示されます。 ただし、この例では、 プロパティ GridItemsLayout.Span を 2 に設定します。 その結果、2 列のグリッドが作成され、新しい項目が追加されるにつれて垂直方向に拡大されます。

CollectionView の垂直グリッド レイアウトのスクリーンショット。iOSおよび Android

水平グリッド

XAML では、 の Xamarin_Forms CollectionViewCollectionView _StructuredItemsView_ItemsLayout" data-linktype="absolute-path">プロパティを に設定することで、その項目を水平グリッドに ItemsLayout 表示できます HorizontalGrid

<CollectionView ItemsSource="{Binding Monkeys}"
                ItemsLayout="HorizontalGrid, 4">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="35" />
                    <RowDefinition Height="35" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="70" />
                    <ColumnDefinition Width="140" />
                </Grid.ColumnDefinitions>
                <Image Grid.RowSpan="2"
                       Source="{Binding ImageUrl}"
                       Aspect="AspectFill"
                       HeightRequest="60"
                       WidthRequest="60" />
                <Label Grid.Column="1"
                       Text="{Binding Name}"
                       FontAttributes="Bold"
                       LineBreakMode="TailTruncation" />
                <Label Grid.Row="1"
                       Grid.Column="1"
                       Text="{Binding Location}"
                       LineBreakMode="TailTruncation"
                       FontAttributes="Italic"
                       VerticalOptions="End" />
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

または、このレイアウトを実現するには、Xamarin_Forms _StructuredItemsView_ItemsLayout" data-linktype="absolute-path">プロパティを、Xamarin_Forms ItemsLayoutGridItemsLayoutItemsLayout _ItemsLayout_Orientation" data-linktype="absolute-path">OrientationHorizontal プロパティが に設定されているオブジェクトに設定します。

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
       <GridItemsLayout Orientation="Horizontal"
                        Span="4" />
    </CollectionView.ItemsLayout>
    ...
</CollectionView>

これに相当する C# コードを次に示します。

CollectionView collectionView = new CollectionView
{
    ...
    ItemsLayout = new GridItemsLayout(4, ItemsLayoutOrientation.Horizontal)
};

既定では、水平では GridItemsLayout 項目が 1 行に表示されます。 ただし、この例では、 プロパティ GridItemsLayout.Span を 4 に設定します。 これにより、4 行のグリッドが作成され、新しい項目が追加されるにつれて水平方向に拡大されます。

CollectionView の水平グリッド レイアウトのスクリーンショット(iOSおよび Android

ヘッダーとフッター

CollectionView では、リスト内の項目と一緒にスクロールするヘッダーとフッターを表示できます。 ヘッダーとフッターには、文字列、ビュー、またはオブジェクトを指定 DataTemplate できます。

CollectionView では、ヘッダーとフッターを指定する次のプロパティを定義します。

  • Header型の は、リストの最初に表示される文字列、バインド、または object ビューを指定します。
  • HeaderTemplate型の DataTemplate は、 の書式設定 DataTemplate に使用する を指定します Header
  • Footer型の は、リストの末尾に表示される文字列、バインド、またはビュー object を指定します。
  • FooterTemplate型の DataTemplate は、 の書式設定 DataTemplate に使用する を指定します Footer

これらのプロパティは オブジェクトによってサポートされます。これは、プロパティがデータ バインディングのターゲット BindableProperty になることができます。

ヘッダーが左から右に水平方向に拡大するレイアウトに追加された場合、ヘッダーは一覧の左側に表示されます。 同様に、左から右に水平方向に拡大するレイアウトにフッターを追加すると、フッターが一覧の右側に表示されます。

プロパティ HeaderFooter プロパティは、次の例 string に示すように 値に設定できます。

<CollectionView ItemsSource="{Binding Monkeys}"
                Header="Monkeys"
                Footer="2019">
    ...
</CollectionView>

これに相当する C# コードを次に示します。

CollectionView collectionView = new CollectionView
{
    Header = "Monkeys",
    Footer = "2019"
};
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");

このコードの結果、次のスクリーンショットが表示され、iOS のスクリーンショットにヘッダーが表示され、フッターが Android のスクリーンショットに表示されます。

フッター CollectionView 文字列ヘッダーとフッターのスクリーンショット(iOSおよび Android CollectionView の文字列ヘッダー

プロパティ HeaderFooter プロパティは、それぞれビューに設定できます。 1 つのビュー、または複数の子ビューを含むビューを指定できます。 次の例は、 オブジェクトを含む オブジェクトに設定される プロパティと プロパティ HeaderFooterStackLayout を示 Label しています。

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.Header>
        <StackLayout BackgroundColor="LightGray">
            <Label Margin="10,0,0,0"
                   Text="Monkeys"
                   FontSize="Small"
                   FontAttributes="Bold" />
        </StackLayout>
    </CollectionView.Header>
    <CollectionView.Footer>
        <StackLayout BackgroundColor="LightGray">
            <Label Margin="10,0,0,0"
                   Text="Friends of Xamarin Monkey"
                   FontSize="Small"
                   FontAttributes="Bold" />
        </StackLayout>
    </CollectionView.Footer>
    ...
</CollectionView>

これに相当する C# コードを次に示します。

CollectionView collectionView = new CollectionView
{
    Header = new StackLayout
    {
        Children =
        {
            new Label { Text = "Monkeys", ... }
        }
    },
    Footer = new StackLayout
    {
        Children =
        {
            new Label { Text = "Friends of Xamarin Monkey", ... }
        }
    }
};
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");

このコードの結果、次のスクリーンショットが表示され、iOS のスクリーンショットにヘッダーが表示され、フッターが Android のスクリーンショットに表示されます。

:iOS および Android CollectionView ビューのヘッダーとフッターでの、ビューを使用した CollectionView ヘッダーとフッター

プロパティ HeaderTemplateFooterTemplate プロパティは、ヘッダーと DataTemplate フッターの書式設定に使用される オブジェクトに設定できます。 このシナリオでは、次の例に示すように、 プロパティと プロパティをテンプレートを適用するために現在のソース HeaderFooter にバインドする必要があります。

<CollectionView ItemsSource="{Binding Monkeys}"
                Header="{Binding .}"
                Footer="{Binding .}">
    <CollectionView.HeaderTemplate>
        <DataTemplate>
            <StackLayout BackgroundColor="LightGray">
                <Label Margin="10,0,0,0"
                       Text="Monkeys"
                       FontSize="Small"
                       FontAttributes="Bold" />
            </StackLayout>
        </DataTemplate>
    </CollectionView.HeaderTemplate>
    <CollectionView.FooterTemplate>
        <DataTemplate>
            <StackLayout BackgroundColor="LightGray">
                <Label Margin="10,0,0,0"
                       Text="Friends of Xamarin Monkey"
                       FontSize="Small"
                       FontAttributes="Bold" />
            </StackLayout>
        </DataTemplate>
    </CollectionView.FooterTemplate>
    ...
</CollectionView>

これに相当する C# コードを次に示します。

CollectionView collectionView = new CollectionView
{
    HeaderTemplate = new DataTemplate(() =>
    {
        return new StackLayout { };
    }),
    FooterTemplate = new DataTemplate(() =>
    {
        return new StackLayout { };
    })
};
collectionView.SetBinding(ItemsView.HeaderProperty, ".");
collectionView.SetBinding(ItemsView.FooterProperty, ".");
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");

このコードの結果、次のスクリーンショットが表示され、iOS のスクリーンショットにヘッダーが表示され、フッターが Android のスクリーンショットに表示されます。

フッター テンプレートを使用した CollectionView ヘッダーとフッターのScreenshot of a CollectionView header and footer using templates, on iOS and Androidスクリーンショットおよび Android CollectionView テンプレートヘッダー

項目の間隔

既定では、内の各項目の間にスペースはありません CollectionView 。 この動作は、によって使用される項目のレイアウトのプロパティを設定することによって変更でき CollectionView ます。

CollectionView よって Xamarin_Forms CollectionView _StructuredItemsView_ItemsLayout "linktype =" absolute path ">ItemsLayout プロパティがオブジェクトに設定 LinearItemsLayout されている場合、プロパティは、 LinearItemsLayout.ItemSpacingdouble 項目間のスペースを表す値に設定できます。

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
        <LinearItemsLayout Orientation="Vertical"
                           ItemSpacing="20" />
    </CollectionView.ItemsLayout>
    ...
</CollectionView>

Note

プロパティには、 LinearItemsLayout.ItemSpacing プロパティの値が常に0以上であることを保証する検証コールバックセットがあります。

これに相当する C# コードを次に示します。

CollectionView collectionView = new CollectionView
{
    ...
    ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Vertical)
    {
        ItemSpacing = 20
    }
};

このコードを実行すると、項目間に20の間隔がある垂直方向の単一列リストが生成されます。

spacingCollectionView with item spacing、iOS および Android

によっ CollectionView て Xamarin_Forms が CollectionView オブジェクトに "linktype =" absolute path ">プロパティ _StructuredItemsView_ItemsLayout 設定されている場合 ItemsLayoutGridItemsLayoutGridItemsLayout.VerticalItemSpacing プロパティとプロパティは、 GridItemsLayout.HorizontalItemSpacingdouble 項目間の垂直方向および水平方向の空白を表す値に設定できます。

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
       <GridItemsLayout Orientation="Vertical"
                        Span="2"
                        VerticalItemSpacing="20"
                        HorizontalItemSpacing="30" />
    </CollectionView.ItemsLayout>
    ...
</CollectionView>

Note

プロパティ GridItemsLayout.VerticalItemSpacingGridItemsLayout.HorizontalItemSpacing プロパティには検証コールバックが設定されています。これにより、プロパティの値が常に0以上になるようにします。

これに相当する C# コードを次に示します。

CollectionView collectionView = new CollectionView
{
    ...
    ItemsLayout = new GridItemsLayout(2, ItemsLayoutOrientation.Vertical)
    {
        VerticalItemSpacing = 20,
        HorizontalItemSpacing = 30
    }
};

このコードを実行すると、2列の垂直グリッドが表示されます。このグリッドには、項目間に20の垂直方向の間隔があり、項目間には30の水平方向の間隔があります。

spacingCollectionView with item spacing (項目間隔あり)、Android

項目のサイズ変更

既定では、の各項目 CollectionView は個別に測定およびサイズ設定されます。これは、内の UI 要素が固定サイズを指定しない場合に限り DataTemplate ます。 この動作は変更可能ですが、Xamarin_Forms _StructuredItemsView_ItemSizingStrategy "linktype =" absolute path ">プロパティ値によって指定され CollectionView.ItemSizingStrategy ます。 このプロパティ値は、列挙体のいずれかのメンバーに設定でき ItemSizingStrategy ます。

  • MeasureAllItems –各項目は個別に測定されます。 これが既定値です。
  • MeasureFirstItem –最初の項目のみが測定され、後続のすべての項目には最初の項目と同じサイズが割り当てられます。

重要

サイズ調整 MeasureFirstItem 戦略を使用すると、項目のサイズがすべての項目にわたって一様であることが意図されている場合に、パフォーマンスが向上します。

次のコード例は、Xamarin_Forms _StructuredItemsView_ItemSizingStrategy "linktype =" absolute path ">プロパティの設定を示してい ItemSizingStrategy ます。

<CollectionView ...
                ItemSizingStrategy="MeasureFirstItem">
    ...
</CollectionView>

これに相当する C# コードを次に示します。

CollectionView collectionView = new CollectionView
{
    ...
    ItemSizingStrategy = ItemSizingStrategy.MeasureFirstItem
};

項目の動的なサイズ変更

内の項目は CollectionView 、内の要素のレイアウトに関連するプロパティを変更することで、実行時に動的に変更でき DataTemplate ます。 たとえば、次のコード例では、Xamarin_Forms _VisualElement_HeightRequest "linktype =" absolute path ">HeightRequest と Xamarin_Forms HeightRequest _VisualElement_WidthRequest" linktype = "absolute path" >WidthRequest のオブジェクトのプロパティ Image を変更します。

void OnImageTapped(object sender, EventArgs e)
{
    Image image = sender as Image;
    image.HeightRequest = image.WidthRequest = image.HeightRequest.Equals(60) ? 100 : 60;
}

OnImageTappedイベントハンドラーは、タップされるオブジェクトに応答して実行され、 Image より簡単に表示されるようにイメージのサイズを変更します。

動的な項目のサイズ変更のスクリーンショット動的な項目のサイズ設定を使用する CollectionView、iOS と Android の調整

右から左へのレイアウト

CollectionViewXamarin_Forms CollectionView _VisualElement_FlowDirection "linktype =" 絶対パス ">FlowDirection プロパティを Xamarin_Forms _FlowDirection_RightToLeft" linktype = "絶対パス" >に設定する RightToLeft ことにより、右から左へのフロー方向にコンテンツをレイアウトできます。 ただし、 FlowDirection プロパティはページまたはルートレイアウトで設定することをお勧めします。これにより、ページ内のすべての要素、またはルートレイアウトがフロー方向に応答するようになります。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="CollectionViewDemos.Views.VerticalListFlowDirectionPage"
             Title="Vertical list (RTL FlowDirection)"
             FlowDirection="RightToLeft">
    <StackLayout Margin="20">
        <CollectionView ItemsSource="{Binding Monkeys}">
            ...
        </CollectionView>
    </StackLayout>
</ContentPage>

親を持つ要素の既定の Xamarin_Forms _VisualElement_FlowDirection "linktype =" absolute path ">FlowDirection は、 FlowDirection " linktype = "" _FlowDirection_MatchParent と Xamarin_Forms >MatchParent ます。 したがって、は、 CollectionView からプロパティ値を継承し、 FlowDirection さらにからプロパティ値を StackLayout 継承し FlowDirectionContentPage ます。 この結果、次のスクリーンショットに示されている右から左のレイアウトになります。

CollectionView 右から左方向のリストレイアウトスクリーンショット iOS および Androidの右から左に記述されたリストレイアウトのスクリーンショット

フローの方向の詳細については、「 右から左へのローカライズ」を参照してください。