Xamarin.Forms ListViewXamarin.Forms ListView

下載範例下載範例Download Sample Download the sample

ListView是用來呈現資料清單的視圖,特別是需要滾動的長清單。ListView is a view for presenting lists of data, especially long lists that require scrolling.

重要

CollectionView 是使用不同版面配置規格呈現資料清單的檢視。CollectionView is a view for presenting lists of data using different layout specifications. 它的目的是要提供更具彈性且更高效ListView能的替代方案。It aims to provide a more flexible, and performant alternative to ListView. 如需詳細資訊,請參閱 Xamarin.Forms CollectionViewFor more information, see Xamarin.Forms CollectionView.

使用案例Use cases

在您要顯示可滾動資料清單的任何情況下,都可以使用控制項。ListViewA ListView control can be used in any situation where you're displaying scrollable lists of data. ListView類別支援內容動作和資料系結。The ListView class supports context actions and data binding.

控制項不應該TableView與控制項混淆。 ListViewThe ListView control shouldn't be confused with the TableView control. 每當TableView您有選項或資料的非系結清單時,控制項就是較好的選項,因為它允許在 XAML 中指定預先定義的選項。The TableView control is a better option whenever you have a non-bound list of options or data because it allows predefined options to be specified in XAML. 例如,iOS 設定應用程式(大部分預先定義的選項組)較適合使用TableView ListView而不是。For example, the iOS settings app, which has a mostly predefined set of options, is better suited to use a TableView than a ListView.

類別不支援在 XAML 中定義清單專案,您必須搭配ItemsSource使用屬性ItemTemplate或資料系結,以定義清單中的專案。 ListViewThe ListView class doesn't support defining list items in XAML, you must use the ItemsSource property or data binding with an ItemTemplate to define items in the list.

ListView最適合用於由單一資料類型組成的集合。A ListView is best suited for a collections consisting of a single data type. 這項需求是因為清單中的每個資料列都只能使用一種資料格類型。This requirement is because only one type of cell can be used for each row in the list. TableView控制項可以支援多個資料格類型,因此當您需要顯示多個資料類型時,這是較好的選項。The TableView control can support multiple cell types, so it is a better option when you need to display multiple data types.

如需將資料系結至ListView實例的詳細資訊,請參閱ListView 資料來源For more information about binding data to a ListView instance, see ListView data sources.

元件Components

ListView控制項有許多元件可用來執行每個平臺的原生功能。The ListView control has a number of components available to exercise the native functionality of each platform. 這些元件會在下列各節中定義。These components are defined in the following sections.

頁首和頁尾Headers and footers

頁首和頁尾元件會顯示在清單的開頭和結尾,與清單的資料分開。Header and footer components display at the beginning and end of a list, separate from list's data. 頁首和頁尾可以系結至 ListView 資料來源中的個別資料來源。Headers and footers can be bound to a separate data source from the ListView's data source.

部門Groups

中的資料ListView可以分組以方便流覽。Data in a ListView can be grouped for easier navigation. 群組通常是資料系結的。Groups are typically data bound. 下列螢幕擷取畫面顯示具有ListView群組資料的:The following screenshot shows a ListView with grouped data:

(images/grouping-depth-cropped.png)](images/grouping-depth.png#lightbox "Listview 中")的「[群組資料」群組中![]的資料"Grouped data in a ListView"

儲存格Cells

中的ListView資料項目稱為資料格。Data items in a ListView are called cells. 每個資料格會對應至一個資料列。Each cell corresponds to a row of data. 有內建的儲存格可供選擇,或您可以定義您自己自訂的儲存格。There are built-in cells to choose from, or you can define your own custom cell. 內建和自訂的資料格可以是在 XAML 或程式碼中使用/定義。Both built-in and custom cells can be used/defined in XAML or code.

  • 內建資料格(例如TextCellImageCell)會對應至原生控制項,而且效能特別高。Built-in cells, such as the TextCell and ImageCell, correspond to native controls and are especially performant.
    • TextCell顯示文字字串,選擇性地包含詳細資料文字。A TextCell displays a string of text, optionally with detail text. 詳細資料的文字會轉譯為較小的字型,並且強調色彩中的第二個資料行。Detail text is rendered as a second line in a smaller font with an accent color.
    • ImageCell顯示含有文字的影像。An ImageCell displays an image with text. TextCell以影像顯示在左側。Appears as a TextCell with an image on the left.
  • 自訂資料格可用來呈現複雜的資料。Custom cells are used to present complex data. 例如,您可以使用自訂資料格來呈現包含專輯和演出者的歌曲清單。For example, a custom cell could be used to present a list of songs that includes the album and artist.

下列螢幕擷取畫面顯示ListView具有 ImageCell 專案的:The following screenshot shows a ListView with ImageCell items:

「Listview 中的 ImageCell 專案」(images/image-cell-default-cropped.png)](images/image-cell-default.png#lightbox "ImageCell listview 中的專案") [ ![ ]"ImageCell items in a ListView"

若要深入瞭解自訂中的ListView資料格,請參閱自訂 ListView 儲存格外觀To learn more about customizing cells in a ListView, see Customizing ListView Cell Appearance.

功能Functionality

ListView類別支援多種互動樣式。The ListView class supports a number of interaction styles.

  • [提取至重新整理] 可讓使用者向ListView下提取以重新整理內容。Pull-to-refresh allows the user to pull the ListView down to refresh the contents.
  • 內容動作可讓開發人員指定個別清單專案的自訂動作。Context actions allow the developer to specify custom actions on individual list items. 例如,您可以在 iOS 上,實作撥動-動作或按住在 Android 上的動作。For example, you can implement swipe-to-action on iOS, or long-tap actions on Android.
  • 選取可讓開發人員將功能附加至清單專案上的選取範圍和 deselection 事件。Selection allow the developer to attach functionality to selection and deselection events on list items.

下列螢幕擷取畫面顯示ListView具有內容動作的:The following screenshot shows a ListView with context actions:

(images/context-default-cropped.png)](images/context-default.png#lightbox "Listview 中")的「[在 listview 中的內容動作」內容動作![ ]"Context actions in a ListView"

若要深入瞭解的互動性功能ListView,請參閱使用 ListView & 互動的動作To learn more about the interactivity features of ListView, see Actions & Interactivity with ListView.