:::no-loc(Xamarin.Forms)::: Introdução de CollectionView:::no-loc(Xamarin.Forms)::: CollectionView Introduction

Baixar Exemplo Baixar o exemploDownload Sample Download the sample

CollectionView é uma exibição para apresentar listas de dados usando especificações de layout diferentes.CollectionView is a view for presenting lists of data using different layout specifications. Ele visa fornecer uma alternativa mais flexível e de alto desempenho para o ListView .It aims to provide a more flexible, and performant alternative to ListView. Por exemplo, as capturas de tela a seguir mostram um CollectionView que usa uma grade vertical de duas colunas e que permite seleção múltipla:For example, the following screenshots show a CollectionView that uses a two column vertical grid, and which allows multiple selection:

Captura de tela de um layout de grade vertical CollectionView, no iOS e no AndroidScreenshot of a CollectionView vertical grid layout, on iOS and Android

CollectionView deve ser usado para apresentar listas de dados que exigem rolagem ou seleção.CollectionView should be used for presenting lists of data that require scrolling or selection. Um layout vinculável pode ser usado quando os dados a serem exibidos não exigem rolagem ou seleção.A bindable layout can be used when the data to be displayed doesn't require scrolling or selection. Para obter mais informações, consulte layouts vinculáveis no :::no-loc(Xamarin.Forms)::: .For more information, see Bindable Layouts in :::no-loc(Xamarin.Forms):::.

CollectionView está disponível em :::no-loc(Xamarin.Forms)::: 4,3.CollectionView is available from :::no-loc(Xamarin.Forms)::: 4.3.

Importante

CollectionView está disponível no iOS e no Android, mas está disponível apenas parcialmente no plataforma universal do Windows.CollectionView is available on iOS and Android, but is only partially available on the Universal Windows Platform.

Diferenças de CollectionView e ListViewCollectionView and ListView differences

Embora as CollectionView ListView APIs e sejam semelhantes, há algumas diferenças notáveis:While the CollectionView and ListView APIs are similar, there are some notable differences:

  • CollectionView tem um modelo de layout flexível, que permite que os dados sejam apresentados vertical ou horizontalmente, em uma lista ou em uma grade.CollectionView has a flexible layout model, which allows data to be presented vertically or horizontally, in a list or a grid.
  • CollectionView dá suporte à seleção única e múltipla.CollectionView supports single and multiple selection.
  • CollectionView Não tem conceito de células.CollectionView has no concept of cells. Em vez disso, um modelo de dados é usado para definir a aparência de cada item de dados na lista.Instead, a data template is used to define the appearance of each item of data in the list.
  • CollectionView utiliza automaticamente a virtualização fornecida pelos controles nativos subjacentes.CollectionView automatically utilizes the virtualization provided by the underlying native controls.
  • CollectionView reduz a superfície de API do ListView .CollectionView reduces the API surface of ListView. Muitas propriedades e eventos do ListView não estão presentes no CollectionView .Many properties and events from ListView are not present in CollectionView.
  • CollectionView Não inclui separadores internos.CollectionView does not include built-in separators.
  • CollectionView gerará uma exceção se sua ItemsSource for atualizada fora do thread da interface do usuário.CollectionView will throw an exception if its ItemsSource is updated off the UI thread.

Mover de ListView para CollectionViewMove from ListView to CollectionView

ListView as implementações em :::no-loc(Xamarin.Forms)::: aplicativos existentes podem ser migradas para CollectionView implementações com a ajuda da seguinte tabela:ListView implementations in existing :::no-loc(Xamarin.Forms)::: applications can be migrated to CollectionView implementations with the help of the following table:

ConceitoConcept API de ListViewListView API CollectionViewCollectionView
DadosData ItemsSource Um CollectionView é preenchido com dados definindo sua ItemsSource propriedade.A CollectionView is populated with data by setting its ItemsSource property. Para obter mais informações, consulte popular um CollectionView com dados.For more information, see Populate a CollectionView with data.
Aparência do itemItem appearance ItemTemplate A aparência de cada item em um CollectionView pode ser definida definindo a ItemTemplate propriedade como a DataTemplate .The appearance of each item in a CollectionView can be defined by setting the ItemTemplate property to a DataTemplate. Para obter mais informações, consulte definir a aparência do item.For more information, see Define item appearance.
CélulasCells TextCell, ImageCell, ViewCellTextCell, ImageCell, ViewCell CollectionView Não tem conceito de células e, portanto, não há conceito de indicadores de divulgação.CollectionView has no concept of cells, and therefore no concept of disclosure indicators. Em vez disso, um modelo de dados é usado para definir a aparência de cada item de dados na lista.Instead, a data template is used to define the appearance of each item of data in the list.
Separadores de linhaRow separators SeparatorColor, SeparatorVisibilitySeparatorColor, SeparatorVisibility CollectionView Não inclui separadores internos.CollectionView does not include built-in separators. Eles podem ser fornecidos, se desejado, no modelo de item.These can be provided, if desired, in the item template.
SeleçãoSelection SelectionMode, SelectedItemSelectionMode, SelectedItem CollectionView dá suporte à seleção única e múltipla.CollectionView supports single and multiple selection. Para obter mais informações, consulte :::no-loc(Xamarin.Forms)::: seleção CollectionView.For more information, see :::no-loc(Xamarin.Forms)::: CollectionView Selection.
Altura da linhaRow height HasUnevenRows, RowHeightHasUnevenRows, RowHeight Em um CollectionView , a altura da linha de cada item é determinada pela ItemSizingStrategy propriedade.In a CollectionView, the row height of each item is determined by the ItemSizingStrategy property. Para obter mais informações, consulte dimensionamento de item.For more information, see Item sizing.
CacheCaching CachingStrategy CollectionView usa automaticamente a virtualização fornecida pelos controles nativos subjacentes.CollectionView automatically uses the virtualization provided by the underlying native controls.
Cabeçalhos e rodapésHeaders and footers Header, HeaderElement, HeaderTemplate, Footer, FooterElement, FooterTemplateHeader, HeaderElement, HeaderTemplate, Footer, FooterElement, FooterTemplate CollectionView pode apresentar um cabeçalho e um rodapé que rolam com os itens da lista, por meio das Header Footer Propriedades,, e HeaderTemplate FooterTemplate .CollectionView can present a header and footer that scroll with the items in the list, via the Header, Footer, HeaderTemplate, and FooterTemplate properties. Para obter mais informações, consulte cabeçalhos e rodapés.For more information, see Headers and footers.
AgrupamentoGrouping GroupDisplayBinding, GroupHeaderTemplate, GroupShortNameBinding, IsGroupingEnabledGroupDisplayBinding, GroupHeaderTemplate, GroupShortNameBinding, IsGroupingEnabled CollectionView exibe dados agrupados corretamente definindo sua IsGrouped propriedade como true .CollectionView displays correctly grouped data by setting its IsGrouped property to true. Cabeçalhos de grupo e rodapés de grupo podem ser personalizados definindo GroupHeaderTemplate as GroupFooterTemplate Propriedades e como DataTemplate objetos.Group headers and group footers can be customized by setting the GroupHeaderTemplate and GroupFooterTemplate properties to DataTemplate objects. Para obter mais informações, consulte :::no-loc(Xamarin.Forms)::: agrupamento CollectionView.For more information, see :::no-loc(Xamarin.Forms)::: CollectionView Grouping.
Puxar para atualizarPull to refresh IsPullToRefreshEnabled, IsRefreshing, RefreshAllowed, RefreshCommand, RefreshControlColor, BeginRefresh(), EndRefresh()IsPullToRefreshEnabled, IsRefreshing, RefreshAllowed, RefreshCommand, RefreshControlColor, BeginRefresh(), EndRefresh() Há suporte para a funcionalidade de pull para atualizar ao definir um CollectionView como o filho de um RefreshView .Pull to refresh functionality is supported by setting a CollectionView as the child of a RefreshView. Para obter mais informações, consulte pull to Refresh.For more information, see Pull to refresh.
Itens de menu de contextoContext menu items ContextActions Os itens de menu de contexto têm suporte ao definir um SwipeView como a exibição raiz no DataTemplate que define a aparência de cada item de dados no CollectionView .Context menu items are supported by setting a SwipeView as the root view in the DataTemplate that defines the appearance of each item of data in the CollectionView. Para obter mais informações, consulte menus de contexto.For more information, see Context menus.
RolagemScrolling ScrollTo() CollectionView define ScrollTo métodos, que rolam itens para exibição.CollectionView defines ScrollTo methods, that scroll items into view. Para obter mais informações, consulte rolagem.For more information, see Scrolling.