Xamarin.Forms CollectionView の概要

  • [アーティクル]

サンプルのダウンロードサンプルのダウンロード

CollectionView は、さまざまなレイアウト仕様を使用してデータを一覧表示するためのビューです。 より柔軟でパフォーマンスの高い 代替手段を 提供することを ListView目的としています。 たとえば、次のスクリーンショットは、2 列の垂直グリッドを使用し、複数の選択を許可する を示しています CollectionView 。

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

CollectionView は、スクロールまたは選択が必要なデータのリストを表示するために使用する必要があります。 表示するデータにスクロールや選択が不要な場合は、バインド可能なレイアウトを使用できます。 詳細については、「 のバインド可能なレイアウト Xamarin.Forms」を参照してください。

CollectionView は 4.3 から Xamarin.Forms 入手できます。

重要

CollectionViewは iOS と Android で使用できますが、ユニバーサル Windows プラットフォームでのみ部分的に使用できます。

CollectionView と ListView の違い

CollectionView API と ListView API は似ていますが、いくつかの顕著な違いがあります。

  • CollectionView には柔軟なレイアウト モデルがあります。これにより、データをリストまたはグリッドに垂直方向または水平方向に表示できます。
  • CollectionView では、単一選択と複数選択がサポートされます。
  • CollectionView にはセルの概念がありません。 代わりに、データ テンプレートを使用して、リスト内のデータの各項目の外観を定義します。
  • CollectionView は、基になるネイティブ コントロールによって提供される仮想化を自動的に利用します。
  • CollectionView の API サーフェスを ListView減らします。 の ListView 多くのプロパティとイベントは に CollectionView存在しません。
  • CollectionView には組み込みの区切り記号は含まれません。
  • CollectionView は、UI スレッドから更新された場合 ItemsSource に例外をスローします。

ListView から CollectionView に移動する

ListView 既存 Xamarin.Forms のアプリケーションの実装は、次の表の助けを借りて実装に移行 CollectionView できます。

概念 ListView API CollectionView
Data ItemsSource プロパティを CollectionView 設定すると、 にデータが ItemsSource 設定されます。 詳細については、「 CollectionView にデータを設定する」を参照してください。
アイテムの外観 ItemTemplate 内 CollectionView の各項目の外観は、 プロパティを ItemTemplate に DataTemplate設定することで定義できます。 詳細については、「アイテムの 外観を定義する」を参照してください。
セル TextCell, ImageCell, ViewCell CollectionView にはセルの概念がないため、開示インジケーターの概念はありません。 代わりに、データ テンプレートを使用して、リスト内のデータの各項目の外観を定義します。
行区切り記号 SeparatorColor, SeparatorVisibility CollectionView には組み込みの区切り記号は含まれません。 これらは、必要に応じて項目テンプレートに指定できます。
[選択] SelectionMode, SelectedItem CollectionView では、単一選択と複数選択がサポートされます。 詳細については、「CollectionView の選択」を参照してくださいXamarin.Forms。
行の高さ HasUnevenRows, RowHeight では、 CollectionView各項目の行の高さは プロパティによって ItemSizingStrategy 決まります。 詳細については、「アイテムの サイズ設定」を参照してください。
キャッシュ CachingStrategy CollectionView では、基になるネイティブ コントロールによって提供される仮想化が自動的に使用されます。
ヘッダーとフッター Header, HeaderElement, HeaderTemplate, Footer, FooterElement, FooterTemplate CollectionViewでは、および の各プロパティを使用して、リスト内の項目と共にスクロールするヘッダーとフッターをHeaderFooterHeaderTemplateFooterTemplate表示できます。 詳細については、「 ヘッダーとフッター」を参照してください。
グループ化 GroupDisplayBinding, GroupHeaderTemplate, GroupShortNameBinding, IsGroupingEnabled CollectionViewプロパティを に設定して、正しくグループ化されたデータをIsGroupedtrue表示します。 グループ ヘッダーとグループ フッターは、 プロパティと GroupFooterTemplate プロパティを GroupHeaderTemplate オブジェクトにDataTemplate設定することでカスタマイズできます。 詳細については、「CollectionView のグループ化」を参照してくださいXamarin.Forms。
引っ張って更新 IsPullToRefreshEnabled, IsRefreshing, RefreshAllowed, RefreshCommand, RefreshControlColor, BeginRefresh(), EndRefresh() 更新機能へのプルは、 の子RefreshViewとして をCollectionView設定することでサポートされています。 詳細については、「 更新するプル」を参照してください。
コンテキスト メニュー項目 ContextActions コンテキスト メニュー項目は、 内のデータの各項目の外観を定義する のDataTemplateルート ビューとして をCollectionView設定SwipeViewすることでサポートされます。 詳細については、「コンテキスト メニュー」を参照してください。
スクロール ScrollTo() CollectionView は、項目を ScrollTo ビューにスクロールするメソッドを定義します。 詳細については、「 スクロール」を参照してください。