Xamarin CollectionView 布局Xamarin.Forms CollectionView Layout

下载示例 下载示例Download Sample Download the sample

CollectionView定义控件布局的以下属性:CollectionView defines the following properties that control layout:

这些属性是由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:

这些属性是由BindableProperty对象支持的,这意味着属性可以是数据绑定的目标。These properties are backed by BindableProperty objects, which means that the properties can be targets of data bindings. 有关对齐点的详细信息,请参阅Xamarin CollectionView 滚动指南中的 "对齐点"。For more information about snap points, see Snap points in the Xamarin.Forms CollectionView Scrolling guide.

@No__t_1枚举定义以下成员: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.

@No__t_0 类继承自ItemsLayout类,并定义了一个类型 doubleItemSpacing 属性,该属性表示每个项周围的空白区域。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. @No__t_0 类还定义静态 VerticalHorizontal 成员。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.

@No__t_1类继承自ItemsLayout类,并定义以下属性:The GridItemsLayout class inherits from the ItemsLayout class, and defines the following properties:

  • double 类型的 VerticalItemSpacing,表示每个项周围的垂直空白空间。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.
  • double 类型的 HorizontalItemSpacing,它表示每个项周围的水平空白空间。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.
  • int 类型的 Span,它表示要在网格中显示的列数或行数。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.

备注

CollectionView使用本机布局引擎来执行布局。CollectionView uses the native layout engines to perform layout.

垂直列表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>

但是,为了完整性,可以通过将CollectionViewItemsLayout属性设置为 VerticalList,将其设置为在垂直列表中显示其项:However, for completeness, 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
};

这会生成单个列列表,该列表将在添加新项时垂直增长:This results in a single column list, which grows vertically as new items are added:

IOS 和 Android 上的 CollectionView 垂直列表布局屏幕截图Screenshot of a CollectionView vertical list layout, on iOS and Android

水平列表Horizontal list

CollectionView可以通过将其ItemsLayout属性设置为 HorizontalList,在水平列表中显示其项: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
};

这会生成单个行列表,该列表在添加新项时水平增长:This results in a single row list, which grows horizontally as new items are added:

IOS 和 Android 上的 CollectionView 水平列表布局屏幕截图Screenshot of a CollectionView horizontal list layout, on iOS and Android

垂直网格Vertical grid

CollectionView可以通过将其ItemsLayout属性设置为其Orientation属性设置为 VerticalGridItemsLayout对象,在垂直网格中显示其项:CollectionView can display its items in a vertical grid by setting its 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.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>

等效 C# 代码如下:The equivalent C# code is:

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

默认情况下,垂直GridItemsLayout将显示单个列中的项。By default, a vertical GridItemsLayout will display items in a single column. 但是,此示例将 GridItemsLayout.Span 属性设置为2。However, this example sets the GridItemsLayout.Span property to 2. 这会生成一个两列网格,这会在添加新项时垂直增长:This results in a two-column grid, which grows vertically as new items are added:

IOS 和 Android 上的 CollectionView 垂直网格布局的屏幕截图Screenshot of a CollectionView vertical grid layout, on iOS and Android

水平网格Horizontal grid

CollectionView可以通过将其ItemsLayout属性设置为其Orientation属性设置为 HorizontalGridItemsLayout对象,在水平网格中显示其项:CollectionView can display its items in a horizontal grid by setting its ItemsLayout property to a GridItemsLayout object whoseOrientation property is set to Horizontal:

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
       <GridItemsLayout Orientation="Horizontal"
                        Span="4" />
    </CollectionView.ItemsLayout>
    <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>

等效 C# 代码如下:The equivalent C# code is:

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

默认情况下,水平GridItemsLayout将在单个行中显示项。By default, a horizontal GridItemsLayout will display items in a single row. 但是,此示例将 GridItemsLayout.Span 属性设置为4。However, this example sets the GridItemsLayout.Span property to 4. 这会导致四行网格,这会在添加新项时水平增长:This results in a four-row grid, which grows horizontally as new items are added:

IOS 和 Android 上的 CollectionView 水平网格布局屏幕截图Screenshot of a CollectionView horizontal grid layout, on iOS and Android

页眉和页脚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,指定用于设置 Header 格式的 DataTemplateHeaderTemplate, 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,指定用于设置 Footer 格式的 DataTemplateFooterTemplate, 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.

@No__t_0 和 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:

IOS 和 Android 上的 CollectionView 字符串标头和脚注的屏幕截图Screenshot of a CollectionView string header and footer, on iOS and Android

@No__t_0 和 Footer 属性都可以设置为视图。The Header and Footer properties can each be set to a view. 这可以是单个视图,也可以是包含多个子视图的视图。This can be a single view, or a view that contains multiple child views. 下面的示例演示每个 HeaderFooter 属性设置为包含Label对象的StackLayout对象: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:

在 iOS 和 Android 上使用视图的 CollectionView 标头和脚注的屏幕截图Screenshot of a CollectionView header and footer using views, on iOS and Android

可以将 HeaderTemplateFooterTemplate 属性设置为用于设置页眉和页脚格式的DataTemplate对象。The HeaderTemplate and FooterTemplate properties can be set to DataTemplate objects that are used to format the header and footer. 在此方案中,HeaderFooter 属性必须绑定到要应用的模板的当前源,如以下示例中所示: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:

在 iOS 和 Android 上使用模板的 CollectionView 标头和脚注的屏幕截图Screenshot of a CollectionView header and footer using templates, on iOS and Android

项间距Item spacing

默认情况下, CollectionView中的每一项周围没有任何空白区域。By default, each item in a CollectionView doesn't have any empty space around it. 可以通过在 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 empty space around each item:

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

备注

@No__t_0 属性具有一个验证回调集,它可确保属性的值始终大于或等于0。The LinearItemsLayout.ItemSpacing property has a validation callback set, which ensures that the value of the property is always greater than or equal to 0.

等效 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 around each item:

在 iOS 和 Android 上具有项间距的 CollectionView 的屏幕截图Screenshot of a CollectionView with item spacing, on iOS and Android

CollectionView将其ItemsLayout属性设置为一个GridItemsLayout对象时,可以将 GridItemsLayout.VerticalItemSpacingGridItemsLayout.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 around each item:

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

备注

@No__t_0 和 GridItemsLayout.HorizontalItemSpacing 属性设置了验证回叫,这可确保属性的值始终大于或等于0。The GridItemsLayout.VerticalItemSpacing and GridItemsLayout.HorizontalItemSpacing properties have validation callbacks set, which ensure that the values of the properties are always greater than or equal to 0.

等效 C# 代码如下:The equivalent C# code is:

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

此代码生成垂直的两列网格,每个项周围的垂直间距为20,每个项周围的水平间距为30:This code results in a vertical two-column grid, that has a vertical spacing of 20 around each item, and a horizontal spacing of 30 around each item:

Android 上具有项间距的 CollectionView 的屏幕截图Screenshot of a CollectionView with item spacing, on Android

项大小调整Item sizing

默认情况下, CollectionView中的每个项分别进行测量和调整大小,前提是DataTemplate中的 UI 元素不指定固定的大小。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.

重要

如果在项大小旨在跨所有项进行统一,则使用 MeasureFirstItem 大小调整策略会提高性能。The MeasureFirstItem sizing strategy will result in increased performance when used in situations where the item size is intended to be uniform across all items.

下面的代码示例演示如何设置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

@No__t_1中的项可以在运行时通过更改DataTemplate中元素的与布局相关的属性,在运行时动态调整大小。Items in a CollectionView can be dynamically resized at runtime by changing layout related properties of elements within the DataTemplate. 例如,下面的代码示例更改Image对象的HeightRequestWidthRequest属性: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;
}

@No__t_0 事件处理程序将执行,以响应点击的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:

在 iOS 和 Android 上动态调整项大小的 CollectionView 屏幕截图Screenshot of a CollectionView with dynamic item sizing, on iOS and Android

从右到左布局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>

具有父级的元素的默认FlowDirectionMatchParentThe default FlowDirection for an element with a parent is MatchParent. 因此, CollectionViewStackLayout继承 FlowDirection 属性值,而该属性值又从ContentPage继承 FlowDirection 属性值。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:

IOS 和 Android 上的 CollectionView 从右到左垂直列表布局的屏幕截图Screenshot of a CollectionView right-to-left vertical list layout, on iOS and Android

有关流方向的详细信息,请参阅从右到左的本地化For more information about flow direction, see Right-to-left localization.