Introdução do xamarin. Forms CollectionViewXamarin.Forms CollectionView Introduction

Baixar Exemplo Baixar o exemploDownload Sample Download the sample

CollectionView é um modo de exibição para apresentar as listas de dados usando as especificações de layout diferente.CollectionView is a view for presenting lists of data using different layout specifications. Tem como objetivo fornecer uma mais flexível e alternativa de alto desempenho para o ListView .It aims to provide a more flexible, and performant alternative to ListView. Por exemplo, capturas de tela as seguir mostram um CollectionView que usa uma grade vertical de duas colunas, e que permite que a 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 AndroidScreenshot of a CollectionView vertical grid layout, on iOS and Android

CollectionView está disponível no xamarin. Forms 4.0.CollectionView is available in Xamarin.Forms 4.0. No entanto, ele é atualmente experimental e só pode ser usado, adicionando a seguinte linha de código para seus AppDelegate classe no iOS, ou para seus MainActivity classe no Android, antes de chamar Forms.Init:However, it is currently experimental and can only be used by adding the following line of code to your AppDelegate class on iOS, or to your MainActivity class on Android, before calling Forms.Init:

Forms.SetFlags("CollectionView_Experimental");

Importante

CollectionView está disponível no iOS e Android, mas é apenas parcialmente disponível na 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

Enquanto o CollectionView e ListView APIs são semelhantes, existem algumas diferenças importantes: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 a ser apresentado verticalmente ou horizontalmente, em uma lista ou 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 a única e seleção múltipla.CollectionView supports single and multiple selection.
  • CollectionView não tem nenhum 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.

Mover de ListView para CollectionViewMove from ListView to CollectionView

ListView implementações em implementações existentes do xamarin. Forms podem ser migradas para CollectionView implementações com a Ajuda da tabela a seguir:ListView implementations in existing Xamarin.Forms implementations can be migrated to CollectionView implementations with the help of the following table:

ConceitoConcept API de ListViewListView API CollectionViewCollectionView
DadosData ItemsSource Um CollectionView é preenchida com dados, definindo seu ItemsSource propriedade.A CollectionView is populated with data by setting its ItemsSource property. Para obter mais informações, consulte popular um CollectionView de dados.For more information, see Populate a CollectionView with data.
Aparência do itemItem appearance ItemTemplate A aparência de cada item em uma CollectionView pode ser definida ao configurar o ItemTemplate propriedade a um 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 definem a aparência do item.For more information, see Define item appearance.
CélulasCells TextCell, ImageCell, ViewCellTextCell, ImageCell, ViewCell CollectionView não tem nenhum 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.
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 a única e seleção múltipla.CollectionView supports single and multiple selection. Para obter mais informações, consulte xamarin. Forms CollectionView seleção.For more information, see Xamarin.Forms CollectionView Selection.
Altura da linhaRow height HasUnevenRows, RowHeightHasUnevenRows, RowHeight Em um CollectionView, a altura da linha de cada item é determinada pelo ItemSizingStrategy propriedade.In a CollectionView, the row height of each item is determined by the ItemSizingStrategy property. Para obter mais informações, consulte dimensionamento 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 Cabeçalhos e rodapés não são atualmente suportados no CollectionView, mas será adicionado em uma versão futura.Headers and footers are currently unsupported in CollectionView, but will be added in a future release.
AgrupamentoGrouping GroupDisplayBinding, GroupHeaderTemplate, GroupShortNameBinding, IsGroupingEnabledGroupDisplayBinding, GroupHeaderTemplate, GroupShortNameBinding, IsGroupingEnabled Agrupamento não é suportado atualmente no CollectionView, mas será adicionado em uma versão futura.Grouping is currently unsupported in CollectionView, but will be added in a future release.
Deslizar para atualizarPull to refresh IsPullToRefreshEnabled, IsRefreshing, RefreshAllowed, RefreshCommand, RefreshControlColor, BeginRefresh(), EndRefresh()IsPullToRefreshEnabled, IsRefreshing, RefreshAllowed, RefreshCommand, RefreshControlColor, BeginRefresh(), EndRefresh() Deslizar para atualizar não é suportado atualmente no CollectionView, mas será adicionado em uma versão futura.Pull to refresh is currently unsupported in CollectionView, but will be added in a future release.
Ações de contextoContext actions ContextActions Ações de contexto não têm suporte no momento no CollectionView, mas será adicionado em uma versão futura.Context actions are currently unsupported in CollectionView, but will be added in a future release.
RolagemScrolling ScrollTo() CollectionView define ScrollTo métodos, que rolagem os itens na exibição.CollectionView defines ScrollTo methods, that scroll items into view. Para obter mais informações, consulte rolagem.For more information, see Scrolling.