:::no-loc(Xamarin.Forms)::: CollectionView レイアウト:::no-loc(Xamarin.Forms)::: CollectionView Layout

• 07/20/2020
• • d
  • o
  • L

サンプルのダウンロード Download the sample

CollectionView レイアウトを制御する次のプロパティを定義します。CollectionView defines the following properties that control layout:

• ItemsLayout型ので、 IItemsLayout 使用するレイアウトを指定します。ItemsLayout, of type IItemsLayout, specifies the layout to be used.
• ItemSizingStrategy型のは、 ItemSizingStrategy 使用される項目メジャー戦略を指定します。ItemSizingStrategy, of type ItemSizingStrategy, specifies the item measure strategy to be used.

これらのプロパティは、オブジェクトによって支えられてい BindableProperty ます。これは、プロパティをデータバインディングのターゲットにできることを意味します。These properties are backed by BindableProperty objects, which means that the properties can be targets of data bindings.

既定では、の CollectionView 項目が縦の一覧に表示されます。By default, a CollectionView will display its items in a vertical list. ただし、次のいずれかのレイアウトを使用できます。However, any of the following layouts can be used:

• 縦方向の一覧–新しい項目が追加されたときに垂直方向に拡張される単一の列リスト。Vertical list – a single column list that grows vertically as new items are added.
• 横方向の一覧–新しい項目が追加されたときに水平方向に拡張される単一行のリストです。Horizontal list – a single row list that grows horizontally as new items are added.
• 垂直グリッド-新しいアイテムが追加されると、垂直方向に拡張される複数列のグリッドです。Vertical grid – a multi-column grid that grows vertically as new items are added.
• 水平グリッド-新しいアイテムが追加されると、水平方向に拡張される複数行のグリッドです。Horizontal grid – a multi-row grid that grows horizontally as new items are added.

これらのレイアウトは、 ItemsLayout クラスから派生するクラスにプロパティを設定することによって指定でき ItemsLayout ます。These layouts can be specified by setting the ItemsLayout property to class that derives from the ItemsLayout class. このクラスでは、次のプロパティが定義されています。This class defines the following properties:

• Orientation型の。は、を ItemsLayoutOrientation CollectionView 項目として追加する方向を指定します。Orientation, of type ItemsLayoutOrientation, specifies the direction in which the CollectionView expands as items are added.
• SnapPointsAlignment(型) では、 SnapPointsAlignment スナップポイントを項目と整列する方法を指定します。SnapPointsAlignment, of type SnapPointsAlignment, specifies how snap points are aligned with items.
• SnapPointsType型のは、 SnapPointsType スクロール時のスナップポイントの動作を指定します。SnapPointsType, of type SnapPointsType, specifies the behavior of snap points when scrolling.

これらのプロパティは、オブジェクトによって支えられてい BindableProperty ます。これは、プロパティをデータバインディングのターゲットにできることを意味します。These properties are backed by BindableProperty objects, which means that the properties can be targets of data bindings. スナップポイントの詳細については、「 :::no-loc(Xamarin.Forms)::: CollectionView スクロールガイド」の「スナップポイント」を参照してください。For more information about snap points, see Snap points in the :::no-loc(Xamarin.Forms)::: CollectionView Scrolling guide.

ItemsLayoutOrientation列挙体は、次のメンバーを定義します。The ItemsLayoutOrientation enumeration defines the following members:

• Vertical 項目が追加されると、が垂直方向に展開されることを示し CollectionView ます。Vertical indicates that the CollectionView will expand vertically as items are added.
• Horizontal 項目が追加されると、が水平方向に展開されることを示し CollectionView ます。Horizontal indicates that the CollectionView will expand horizontally as items are added.

クラスは、 LinearItemsLayout クラスから継承され、 ItemsLayout ItemSpacing 各項目の周囲の空白を表す型のプロパティを定義し double ます。The LinearItemsLayout class inherits from the ItemsLayout class, and defines an ItemSpacing property, of type double, that represents the empty space around each item. このプロパティの既定値は0で、値は常に0以上である必要があります。The default value of this property is 0, and its value must always be greater than or equal to 0. クラスは、 LinearItemsLayout 静的 Vertical メンバーとメンバーも定義し Horizontal ます。The LinearItemsLayout class also defines static Vertical and Horizontal members. これらのメンバーを使用すると、縦または横のリストをそれぞれ作成できます。These members can be used to create vertical or horizontal lists, respectively. または、 LinearItemsLayout オブジェクトを作成し、 ItemsLayoutOrientation 列挙型のメンバーを引数として指定することもできます。Alternatively, a LinearItemsLayout object can be created, specifying an ItemsLayoutOrientation enumeration member as an argument.

クラスは、 GridItemsLayout クラスから継承され、 ItemsLayout 次のプロパティを定義します。The GridItemsLayout class inherits from the ItemsLayout class, and defines the following properties:

• VerticalItemSpacing型の double 。各項目の周りの垂直方向の空白を表します。VerticalItemSpacing, of type double, that represents the vertical empty space around each item. このプロパティの既定値は0で、値は常に0以上である必要があります。The default value of this property is 0, and its value must always be greater than or equal to 0.
• HorizontalItemSpacing型の double 。各項目の周りの水平方向の空白を表します。HorizontalItemSpacing, of type double, that represents the horizontal empty space around each item. このプロパティの既定値は0で、値は常に0以上である必要があります。The default value of this property is 0, and its value must always be greater than or equal to 0.
• Span``intグリッドに表示する列または行の数を表す、型の。Span, of type int, that represents the number of columns or rows to display in the grid. このプロパティの既定値は1で、その値は常に1以上である必要があります。The default value of this property is 1, and its value must always be greater than or equal to 1.

これらのプロパティは、オブジェクトによって支えられてい BindableProperty ます。これは、プロパティをデータバインディングのターゲットにできることを意味します。These properties are backed by BindableProperty objects, which means that the properties can be targets of data bindings.

縦方向の一覧Vertical list

既定では、は、項目を縦に並べ CollectionView たリストレイアウトで表示します。By default, CollectionView will display its items in a vertical list layout. このため、 ItemsLayout このレイアウトを使用するようにプロパティを設定する必要はありません。Therefore, it's not necessary to set the ItemsLayout property to use this layout:

<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 プロパティをに設定することにより、項目を垂直方向の一覧に表示するように設定できます ItemsLayout VerticalList 。However, for completeness, in XAML a CollectionView can be set to display its items in a vertical list by setting its ItemsLayout property to VerticalList:

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

または、プロパティを ItemsLayout オブジェクトに設定し LinearItemsLayout 、 Vertical ItemsLayoutOrientation 列挙型のメンバーをプロパティ値として指定することで、これを実現することもでき Orientation ます。Alternatively, this can also be accomplished by setting the ItemsLayout property to a LinearItemsLayout object, specifying the Vertical ItemsLayoutOrientation enumeration member as the Orientation property value:

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

これに相当する C# コードを次に示します。The equivalent C# code is:

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

この結果、1つの列リストが作成されます。新しい項目が追加されると、垂直方向に拡張されます。This results in a single column list, which grows vertically as new items are added:

横方向の一覧Horizontal list

XAML では、の CollectionView プロパティをに設定することによって、項目を水平方向の一覧に表示でき ItemsLayout HorizontalList ます。In XAML, a CollectionView can display its items in a horizontal list by setting its ItemsLayout property to 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>

または、プロパティを ItemsLayout オブジェクトに設定し LinearItemsLayout 、 Horizontal ItemsLayoutOrientation 列挙型のメンバーをプロパティ値として指定することで、このレイアウトを実現することもでき Orientation ます。Alternatively, this layout can also be accomplished by setting the ItemsLayout property to a LinearItemsLayout object, specifying the Horizontal ItemsLayoutOrientation enumeration member as the Orientation property value:

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

これに相当する C# コードを次に示します。The equivalent C# code is:

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

これにより、新しい項目が追加されたときに水平方向に拡張される1行のリストが生成されます。This results in a single row list, which grows horizontally as new items are added:

垂直グリッドVertical grid

XAML では、の CollectionView プロパティをに設定することにより、項目を垂直グリッドに表示でき ItemsLayout VerticalGrid ます。In XAML, a CollectionView can display its items in a vertical grid by setting its ItemsLayout property to 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>

または、プロパティを ItemsLayout GridItemsLayout Orientation プロパティがに設定されているオブジェクトに設定することによって、このレイアウトを実現することもでき Vertical ます。Alternatively, this layout can also be accomplished by setting the ItemsLayout property to a GridItemsLayout object whose Orientation property is set to Vertical:

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

これに相当する C# コードを次に示します。The equivalent C# code is:

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

既定では、縦のは GridItemsLayout 1 つの列に項目が表示されます。By default, a vertical GridItemsLayout will display items in a single column. ただし、この例では、プロパティを2に設定して GridItemsLayout.Span います。However, this example sets the GridItemsLayout.Span property to 2. これにより、新しい項目が追加されたときに垂直方向に拡大する2列のグリッドが生成されます。This results in a two-column grid, which grows vertically as new items are added:

水平グリッドHorizontal grid

XAML では、の CollectionView プロパティをに設定することにより、項目を水平グリッドに表示でき ItemsLayout HorizontalGrid ます。In XAML, a CollectionView can display its items in a horizontal grid by setting its ItemsLayout property to 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>

または、プロパティを ItemsLayout GridItemsLayout Orientation プロパティがに設定されているオブジェクトに設定することによって、このレイアウトを実現することもでき Horizontal ます。Alternatively, this layout can also be accomplished by setting the ItemsLayout property to a GridItemsLayout object whose Orientation property is set to Horizontal:

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

これに相当する C# コードを次に示します。The equivalent C# code is:

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

既定では、水平方向には GridItemsLayout 1 行に項目が表示されます。By default, a horizontal GridItemsLayout will display items in a single row. ただし、この例では、プロパティを4に設定して GridItemsLayout.Span います。However, this example sets the GridItemsLayout.Span property to 4. これにより、新しい項目が追加されたときに水平方向に拡大する4行のグリッドが生成されます。This results in a four-row grid, which grows horizontally as new items are added:

ヘッダーとフッターHeaders and footers

CollectionView リスト内の項目と共にスクロールするヘッダーとフッターを表示できます。CollectionView can present a header and footer that scroll with the items in the list. ヘッダーとフッターには、文字列、ビュー、またはオブジェクトを指定でき DataTemplate ます。The header and footer can be strings, views, or DataTemplate objects.

CollectionView ヘッダーとフッターを指定するための次のプロパティを定義します。CollectionView defines the following properties for specifying the header and footer:

• Header型のは、 object リストの先頭に表示される文字列、バインド、またはビューを指定します。Header, of type object, specifies the string, binding, or view that will be displayed at the start of the list.
• HeaderTemplate型のは、の DataTemplate DataTemplate 書式設定に使用するを指定し Header ます。HeaderTemplate, of type DataTemplate, specifies the DataTemplate to use to format the Header.
• Footer型のは、 object リストの末尾に表示される文字列、バインド、またはビューを指定します。Footer, of type object, specifies the string, binding, or view that will be displayed at the end of the list.
• FooterTemplate型のは、の DataTemplate DataTemplate 書式設定に使用するを指定し Footer ます。FooterTemplate, of type DataTemplate, specifies the DataTemplate to use to format the Footer.

これらのプロパティは、オブジェクトによって支えられてい BindableProperty ます。これは、プロパティをデータバインディングのターゲットにできることを意味します。These properties are backed by BindableProperty objects, which means that the properties can be targets of data bindings.

水平方向に拡張されるレイアウトにヘッダーが追加されると、左から右にヘッダーが表示されます。When a header is added to a layout that grows horizontally, from left to right, the header is displayed to the left of the list. 同様に、水平方向に拡大するレイアウトにフッターを追加すると、一覧の右側にフッターが表示されます。Similarly, when a footer is added to a layout that grows horizontally, from left to right, the footer is displayed to the right of the list.

ヘッダーとフッターに文字列を表示するDisplay strings in the header and footer

Headerプロパティと Footer プロパティは、次の string 例に示すように、値に設定できます。The Header and Footer properties can be set to string values, as shown in the following example:

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

これに相当する C# コードを次に示します。The equivalent C# code is:

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

このコードを実行すると、次のスクリーンショットが表示され、iOS のスクリーンショットにヘッダーが表示され、Android のスクリーンショットに示されたフッターが表示されます。This code results in the following screenshots, with the header shown in the iOS screenshot, and the footer shown in the Android screenshot:

ヘッダーとフッターにビューを表示するDisplay views in the header and footer

Headerプロパティと Footer プロパティはそれぞれ、ビューに設定できます。The Header and Footer properties can each be set to a view. 1つのビュー、または複数の子ビューを含むビューを指定できます。This can be a single view, or a view that contains multiple child views. 次の例では Header 、 Footer オブジェクトを含むオブジェクトにそれぞれ設定されているプロパティとプロパティを示して StackLayout い Label ます。The following example shows the Header and Footer properties each set to a StackLayout object that contains a Label object:

<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# コードを次に示します。The equivalent C# code is:

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 のスクリーンショットに示されたフッターが表示されます。This code results in the following screenshots, with the header shown in the iOS screenshot, and the footer shown in the Android screenshot:

テンプレート化されたヘッダーとフッターを表示するDisplay a templated header and footer

HeaderTemplateプロパティと FooterTemplate プロパティは、 DataTemplate ヘッダーとフッターの書式設定に使用されるオブジェクトに設定できます。The HeaderTemplate and FooterTemplate properties can be set to DataTemplate objects that are used to format the header and footer. このシナリオでは、 Header Footer 次の例に示すように、プロパティとプロパティを、適用するテンプレートの現在のソースにバインドする必要があります。In this scenario, the Header and Footer properties must bind to the current source for the templates to be applied, as shown in the following example:

<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# コードを次に示します。The equivalent C# code is:

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 のスクリーンショットに示されたフッターが表示されます。This code results in the following screenshots, with the header shown in the iOS screenshot, and the footer shown in the Android screenshot:

項目の間隔Item spacing

既定では、内の各項目の間にスペースはありません CollectionView 。By default, there is no space between each item in a CollectionView. この動作は、によって使用される項目のレイアウトのプロパティを設定することによって変更でき CollectionView ます。This behavior can be changed by setting properties on the items layout used by the CollectionView.

が CollectionView ItemsLayout プロパティをオブジェクトに設定すると、 LinearItemsLayout プロパティは、 LinearItemsLayout.ItemSpacing double 項目間のスペースを表す値に設定できます。When a CollectionView sets its ItemsLayout property to a LinearItemsLayout object, the LinearItemsLayout.ItemSpacing property can be set to a double value that represents the space between items:

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

これに相当する C# コードを次に示します。The equivalent C# code is:

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

このコードを実行すると、項目間に20の間隔がある垂直方向の単一列リストが生成されます。This code results in a vertical single column list, that has a spacing of 20 between items:

が CollectionView ItemsLayout プロパティをオブジェクトに設定すると、 GridItemsLayout GridItemsLayout.VerticalItemSpacing プロパティとプロパティは、 GridItemsLayout.HorizontalItemSpacing double 項目間の垂直方向および水平方向の空白を表す値に設定できます。When a CollectionView sets its ItemsLayout property to a GridItemsLayout object, the GridItemsLayout.VerticalItemSpacing and GridItemsLayout.HorizontalItemSpacing properties can be set to double values that represent the empty space vertically and horizontally between items:

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

これに相当する C# コードを次に示します。The equivalent C# code is:

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

このコードを実行すると、2列の垂直グリッドが表示されます。このグリッドには、項目間に20の垂直方向の間隔があり、項目間には30の水平方向の間隔があります。This code results in a vertical two-column grid, that has a vertical spacing of 20 between items, and a horizontal spacing of 30 between items:

項目のサイズ変更Item sizing

既定では、の各項目 CollectionView は個別に測定およびサイズ設定されます。これは、内の UI 要素が固定サイズを指定しない場合に限り DataTemplate ます。By default, each item in a CollectionView is individually measured and sized, provided that the UI elements in the DataTemplate don't specify fixed sizes. この動作は変更可能ですが、プロパティ値によって指定され CollectionView.ItemSizingStrategy ます。This behavior, which can be changed, is specified by the CollectionView.ItemSizingStrategy property value. このプロパティ値は、列挙体のいずれかのメンバーに設定でき ItemSizingStrategy ます。This property value can be set to one of the ItemSizingStrategy enumeration members:

• MeasureAllItems –各項目は個別に測定されます。MeasureAllItems – each item is individually measured. これが既定値です。This is the default value.
• MeasureFirstItem –最初の項目のみが測定され、後続のすべての項目には最初の項目と同じサイズが割り当てられます。MeasureFirstItem – only the first item is measured, with all subsequent items being given the same size as the first item.

次のコード例は、プロパティの設定を示してい ItemSizingStrategy ます。The following code example shows setting the ItemSizingStrategy property:

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

これに相当する C# コードを次に示します。The equivalent C# code is:

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

項目の動的なサイズ変更Dynamic resizing of items

内の項目は CollectionView 、内の要素のレイアウトに関連するプロパティを変更することで、実行時に動的に変更でき DataTemplate ます。Items in a CollectionView can be dynamically resized at runtime by changing layout related properties of elements within the DataTemplate. たとえば、次のコード例では、 HeightRequest WidthRequest オブジェクトのプロパティとプロパティを変更し Image ます。For example, the following code example changes the HeightRequest and WidthRequest properties of an Image object:

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

OnImageTappedイベントハンドラーは、タップされるオブジェクトに応答して実行され、 Image より簡単に表示されるようにイメージのサイズを変更します。The OnImageTapped event handler is executed in response to an Image object being tapped, and changes the dimensions of the image so that it's more easily viewed:

右から左へのレイアウトRight-to-left layout

CollectionView では、プロパティをに設定することによって、右から左へのフロー方向にコンテンツをレイアウトでき FlowDirection RightToLeft ます。CollectionView can layout its content in a right-to-left flow direction by setting its FlowDirection property to RightToLeft. ただし、 FlowDirection プロパティはページまたはルートレイアウトで設定することをお勧めします。これにより、ページ内のすべての要素、またはルートレイアウトがフロー方向に応答するようになります。However, the FlowDirection property should ideally be set on a page or root layout, which causes all the elements within the page, or root layout, to respond to the flow direction:

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

親を FlowDirection 持つ要素の既定値は MatchParent です。The default FlowDirection for an element with a parent is MatchParent. したがって、は、 CollectionView からプロパティ値を継承し、 FlowDirection さらにからプロパティ値を StackLayout 継承し FlowDirection ContentPage ます。Therefore, the CollectionView inherits the FlowDirection property value from the StackLayout, which in turn inherits the FlowDirection property value from the ContentPage. この結果、次のスクリーンショットに示されている右から左のレイアウトになります。This results in the right-to-left layout shown in the following screenshots:

フローの方向の詳細については、「 右から左へのローカライズ」を参照してください。For more information about flow direction, see Right-to-left localization.

関連リンクRelated links

• CollectionView (サンプル)CollectionView (sample)
• 右から左へのローカライズRight-to-left localization
• :::no-loc(Xamarin.Forms)::: CollectionView スクロール:::no-loc(Xamarin.Forms)::: CollectionView Scrolling