集合和清單Collections and lists

集合和清單都可用來表示會一起出現的多個相關資料項目。Collections and lists both refer to the representation of multiple related data items that appear together. 集合可透過多種方式以不同的集合控制項 (也可能稱為集合檢視) 來表示。Collections can be represented in multiple ways, by different collection controls (also may be referred to as collection views). 集合控制項會顯示並實現與集合型內容的互動,例如連絡人清單、日期清單、影像集合等等。Collection controls display and enable interactions with collection-based content, such as a list of contacts, a list of dates, a collection of images, and so on.

重要 APIListView 類別GridView 類別FlipView 類別TreeView 類別ItemsRepeater 類別Important APIs: ListView class, GridView class, FlipView class, TreeView class, ItemsRepeater class

本文涵蓋的控制項包括:The controls covered in this article include:

  • 清單檢視,主要用來顯示大量文字內容集合List views, which are primarily used to display text-heavy content collections
  • 資料格檢視,主要用來顯示大量影像內容集合Grid views, which are primarily used to display image-heavy content collections
  • 翻轉視圖,主要用來顯示有大量影像內容、且一次只需要聚焦在一個項目的集合Flip views, which are primarily used to display image-heavy content collections that require exactly one item to be in focus at a time
  • 樹狀檢視,主要用來顯示特定階層中有大量影像內容的集合Tree views, which are primarily used to display text-heavy content collections in a specific hierarchy
  • ItemsRepeater,可用來建立自訂集合控制項的可自訂建置組塊ItemsRepeater, which is a customizable building block to create custom collection controls

下面會提供每個控制項的設計指導方針、功能和範例。Design guidelines, features, and examples are given below for each control.

每個控制項 (ItemsRepeater 除外) 都會提供內建的樣式和互動。Each of these controls (with the exception of ItemsRepeater) provide built-in styling and interaction. 不過,若要進一步自訂集合檢視及其內部項目的視覺外觀,請使用 DataTemplateHowever, to further customize the visual look of your collection view and the items inside it, a DataTemplate is used. 如需資料範本和集合檢視外觀自訂方式的詳細資訊,請參閱項目容器和範本頁面。Detailed information on data templates and customizing the look of a collection view can be found on the Item containers and templates page.

每個控制項 (ItemsRepeater 除外) 也都有內建行為,可讓您選取單一或多個項目。Each of these controls (with the exception of ItemsRepeater) also have built-in behavior to allow for the selection of single or multiple items. 如需深入了解,請參閱選取模式概觀See Selection modes overview to learn more.

本文未涵蓋的其中一個案例是在資料表中或跨多個資料欄顯示集合。One of the scenarios not covered in this article is displaying collections in a table or across multiple columns. 如果您想要以這種格式顯示集合,請考慮使用 Windows 社群工具組中的 DataGrid 控制項If you're looking to display a collection in this format, consider using the DataGrid control from the Windows Community Toolkit.

Windows 10 Fall Creators 更新 - 行為變更 根據預設,主動式手寫筆現在會在 Windows 應用程式中捲動/移動瀏覽清單 (如同觸控、觸控板和被動式手寫筆),而不會執行選取。Windows 10 Fall Creators Update - Behavior change By default, instead of performing selection, an active pen now scrolls/pans a list in Windows apps (like touch, touchpad, and passive pen). 如果您的應用程式需仰賴先前的行為,則可以覆寫手寫筆捲動並還原至先前的行為。If your app depends on the previous behavior, you can override pen scrolling and revert to the previous behavior. 如需詳細資料,請參閱針對 ScrollViewer 類別 的 API 參照主題。For details, see the API reference topic for the Scroll Viewer Class.

範例Examples

XAML 控制項庫XAML Controls Gallery
XAML controls gallery

如果您已安裝 XAML 控制項庫應用程式,請參閱 ListViewGridViewFlipViewTreeViewItemsRepeater 的實際運作。If you have the XAML Controls Gallery app installed, see the ListView, GridView, FlipView, TreeView, and ItemsRepeater in action.

清單檢視List views

清單檢視可表示有大量文字的項目,其通常具有單一資料行的垂直堆疊版面配置。List views represent text-heavy items, typically in a single-column, vertically-stacked layout. 清單檢視可讓您將項目分類並指派群組標頭、拖放項目、規劃內容,以及重新排序項目。They let you categorize items and assign group headers, drag and drop items, curate content, and reorder items.

這是正確的控制項嗎?Is this the right control?

使用清單檢視:Use a list view to:

  • 顯示主要由文字型項目組成的集合,且這些項目全都應該有相同的視覺和互動行為。Display a collection that primarily consists of text-based items, where all of the items should have the same visual and interaction behavior.
  • 表示單一或分類的內容集合。Represent a single or categorized collection of content.
  • 因應各種使用案例,包括下列常見情況:Accommodate a variety of use cases, including the following common ones:
    • 建立訊息或訊息記錄的清單。Create a list of messages or message log.
    • 建立連絡人清單。Create a contacts list.
    • 主要/詳細資料模式中建立主要窗格。Create the master pane in the master/details pattern. 主要/詳細資料是經常用於電子郵件應用程式的模式,其中一個窗格 (主要) 具有可選取項目的清單,而另一個窗格 (詳細資料) 具有已選取項目的詳細資料檢視。A master/details pattern is often used in email apps, in which one pane (the master) has a list of selectable items while the other pane (details) has a detailed view of the selected item.

注意

如果您需要在可捲動的檢視中處理 UIElement 的指標事件 (例如 ScrollViewer 或 ListView),則必須藉由呼叫 UIElement.CancelDirectmanipulation(),明確停用對於此檢視元素上操作事件的支援。If you need to handle pointer events for a UIElement in a scrollable view (such as a ScrollViewer or ListView), you must explicitly disable support for manipulation events on the element in the view by calling UIElement.CancelDirectmanipulation(). 若要在檢視中重新啟用操作事件,請呼叫 UIElement.TryStartDirectManipulation()To re-enable manipulation events in the view, call UIElement.TryStartDirectManipulation().

範例Examples

下面的簡單清單視圖會顯示連絡人清單,並依字母順序將資料項目分組。Here's a simple list view that shows a contacts list, and groups the data items alphabetically. 群組標頭 (在此範例中為每個英文字母) 也可以自訂為保持「固定」,讓其在捲動時一律會出現在 ListView 頂端。The group headers (each letter of the alphabet in this example) can also be customized to stay "sticky", as in they will always appear at the top of the ListView while scrolling.

具有分組資料的清單檢視

這是會顯示訊息記錄的已反轉 ListView,其會讓最新的訊息出現在底部。This is a ListView that has been inverted to display a log of messages, with the newest messages appearing at the bottom. 透過已反轉的 ListView,項目就會出現在畫面底部,並具有內建動畫。With an inverted ListView, items appear at the bottom of the screen with a built-in animation.

已反轉的清單檢視

主題Topic 說明Description

清單檢視和方格檢視List view and grid view

了解在應用程式中使用清單檢視或方格檢視的基本資訊。Learn the essentials of using a list view or grid view in your app.

項目容器與範本Item containers and templates

您以清單或方格檢視顯示的項目,將能在應用程式整體外觀上扮演重要的角色。The items you display in a list or grid view can play a major role in the overall look of your app. 透過修改控制項範本和資料範本來自訂集合項目的外觀,讓應用程式擁有良好外觀。Make your app look great by customizing the look of your collection items through modifying control templates and data templates.

清單檢視的項目範本Item templates for list view

使用這些適用於 ListView 的範例項目範本來取得常見應用程式類型的外觀。Use these example item templates for a ListView to get the look of common app types.

反轉清單Inverted lists

反轉清單會從底部開始加入新項目,例如聊天應用程式。Inverted lists have new items added at the bottom, like in a chat app. 請遵循此文章的指導方針以在應用程式中使用反轉清單。Follow this article's guidance to use an inverted list in your app.

拖動以重新整理Pull-to-refresh

拖動以重新整理的機制可讓使用者以觸控的方式將資料清單向下拖動以抓取更多資料。The pull-to-refresh mechanism lets a user pull down on a list of data using touch in order to retrieve more data. 請使用此文章的指導方針以在清單檢視中實作拖動重新整理。Use this article to implement pull-to-refresh in your list view.

巢狀 UINested UI

巢狀 UI 是一種使用者介面 (UI),能夠公開包含在容器中的可動作控制項,供使用者採取動作。Nested UI is a user interface (UI) that exposes actionable controls enclosed inside a container that a user can also take action on. 例如,您有一個包含按鈕的清單檢視項目,而使用者可以選取該清單項目,或按下巢嵌在其中的按鈕。For example, you might have list view item that contains a button, and the user can select the list item, or press the button nested within it. 請遵循這些最佳做法來為使用者提供最佳的巢狀 UI 體驗。Follow these best practices to provide the best nested UI experience for your users.

方格檢視Grid views

資料格檢視適合用來排列和瀏覽以影像為基礎的內容集合。Grid views are suited for arranging and browsing image-based content collections. 資料格檢視版面配置垂直捲動和水平移動瀏覽。A grid view layout scrolls vertically and pans horizontally. 項目會採用換行的版面配置,其會以由左至右、由上而下的讀取順序出現。Items are in a wrapped layout, as they appear in a left-to-right, then top-to-bottom reading order.

這是正確的控制項嗎?Is this the right control?

使用方格檢視來:Use a grid view to:

  • 顯示內容集合,在此集合中,每個項目的焦點都是一個影像,而且每個項目都應該有相同的視覺和互動行為。Display a content collection in which the focal point of each item is an image, and each item should have the same visual and interaction behavior.
  • 顯示內容庫。Display content libraries.
  • 將與語意式縮放關聯的兩個內容檢視格式化。Format the two content views associated with semantic zoom.
  • 因應各種使用案例,包括下列常見情況:Accommodate a variety of use cases, including the following common ones:
    • 店面類型的使用者介面 (即瀏覽應用程式、歌曲、產品)Storefront-type user interface (i.e. browsing apps, songs, products)
    • 互動式圖庫Interactive photo libraries

注意

如果您需要在可捲動的檢視中處理 UIElement 的指標事件 (例如 ScrollViewer 或 ListView),則必須藉由呼叫 UIElement.CancelDirectmanipulation(),明確停用對於此檢視元素上操作事件的支援。If you need to handle pointer events for a UIElement in a scrollable view (such as a ScrollViewer or ListView), you must explicitly disable support for manipulation events on the element in the view by calling UIElement.CancelDirectmanipulation(). 若要在檢視中重新啟用操作事件,請呼叫 UIElement.TryStartDirectManipulation()To re-enable manipulation events in the view, call UIElement.TryStartDirectManipulation().

範例Examples

這個範例顯示典型的資料格檢視版面配置 ,在此案例中是針對瀏覽應用程式。This example shows a typical grid view layout, in this case for browsing apps. 資料格檢視項目的中繼資料通常受限於幾行文字與項目評等。Metadata for grid view items is usually restricted to a few lines of text and an item rating.

資料格檢視配置範例

資料格檢視是內容庫的理想解決方案,通常用來呈現如圖片和視訊等等的媒體。A grid view is an ideal solution for a content library, which is often used to present media such as pictures and videos. 在內容庫中,使用者預期能夠點選項目來叫用動作。In a content library, users expect to be able to tap an item to invoke an action.

內容庫範例

主題Topic 說明Description

清單檢視和方格檢視List view and grid view

了解在應用程式中使用清單檢視或方格檢視的基本資訊。Learn the essentials of using a list view or grid view in your app.

項目容器與範本Item containers and templates

您以清單或方格檢視顯示的項目,將能在應用程式整體外觀上扮演重要的角色。The items you display in a list or grid view can play a major role in the overall look of your app. 透過修改控制項範本和資料範本來自訂集合項目的外觀,讓應用程式擁有良好外觀。Make your app look great by customizing the look of your collection items through modifying control templates and data templates.

方格檢視的項目範本Item templates for grid view

使用這些適用於 GridView 的範例項目範本來取得常見應用程式類型的外觀。Use these example item templates for GridView to get the look of common app types.

巢狀 UINested UI

巢狀 UI 是一種使用者介面 (UI),能夠公開包含在容器中的可動作控制項,供使用者採取動作。Nested UI is a user interface (UI) that exposes actionable controls enclosed inside a container that a user can also take action on. 例如,您有一個包含按鈕的方格檢視項目,而使用者可以選取該方格項目,或按下巢嵌在其中的按鈕。For example, you might have grid view item that contains a button, and the user can select the grid item, or press the button nested within it. 請遵循這些最佳做法來為使用者提供最佳的巢狀 UI 體驗。Follow these best practices to provide the best nested UI experience for your users.

翻轉檢視Flip views

翻轉檢視適用於瀏覽影像型內容集合,特別是在一次只需要顯示一個影像的體驗時。Flip views are suited for browsing image-based content collections, specifically where the desired experience is for only one image to be visible at a time. 翻轉檢視可讓使用者移動過或快速「翻轉」過集合項目 (垂直或水準),讓每個項目在使用者有所互動後一次只出現一個。A flip view allows the user to move or "flip" through the collection items (either vertically or horizontally), having each item appear one at a time after the user interaction.

這是正確的控制項嗎?Is this the right control?

使用翻轉檢視來:Use a flip view to:

  • 顯示小型到中型 (少於 25 個項目) 的集合,這些集合會由幾乎不含中繼資料的影像所組成。Display a small to medium (less than 25 items) collection, where the collection is made up of images with little to no metadata.
  • 一次顯示一個項目,並讓使用者依自己的步調來翻轉過每個項目。Display items one at a time, and allow the end-user to flip through the items at their own pace.
  • 因應各種使用案例,包括下列常見情況:Accommodate a variety of use cases, including the following common ones:
    • 圖庫Photo galleries
    • 產品庫或展示Product galleries or showcases

範例Examples

下列兩個範例會分別顯示水平和垂直翻轉的 FlipView。The following two examples show a FlipView that flips horizontally and vertically, respectively.

水平翻轉檢視

垂直翻轉檢視

主題Topic 說明Description

翻轉檢視Flip view

了解在應用程式中使用翻轉檢視的基本知識,以及如何在翻轉檢視內自訂項目外觀。Learn the essentials of using a flip view in your app, along with how to customize the look of your items within a flip view.

樹狀檢視Tree views

樹狀檢視適用於顯示文字型集合,這些集合具有必須加以展示的重要階層。Tree views are suited for displaying text-based collections that have an important hierarchy that needs to be showcased. 樹狀檢視項目可折疊/展開、會以視覺階層顯示、可使用圖示來加以補充,並可在樹狀檢視之間拖放。Tree view items are collapsible/expandable, are shown in a visual hierarchy, can be supplmented with icons, and can be dragged and dropped between tree views. 樹狀檢視允許 N 層巢狀結構。Tree views allow for N-level nesting.

這是正確的控制項嗎?Is this the right control?

使用樹狀檢視來:Use a tree view to:

  • 顯示巢狀項目的集合,這些項目的內容和意義取決於階層或特定組織鏈結。Display a collection of nested items whose context and meaning is dependent on a hierarchy or specific organizational chain.
  • 因應各種使用案例,包括下列常見情況:Accommodate a variety of use cases, including the following common ones:
    • 檔案瀏覽器File browser
    • 公司組織圖Company organizational chart

範例Examples

以下是代表檔案總管的樹狀檢視範例,會顯示以圖示補充的眾多不同巢狀項目。Here is an example of a tree view that represents a file explorer, and displays many different nested items supplemented by icons.

具有圖示的樹狀檢視

主題Topic 說明Description

樹狀檢視Tree view

了解在應用程式中使用樹狀檢視的基本知識,以及如何自訂樹狀檢視內項目的外觀和互動行為。Learn the essentials of using a tree view in your app, along with how to customize the look and interaction behavior of your items within a tree view.

ItemsRepeaterItemsRepeater

ItemsRepeater 與本頁面上所顯示的其餘集合控制項不同,其不會提供任何現成的樣式設定或互動,也就是單純放在頁面上,而不會定義任何屬性。ItemsRepeater is different from the rest of the collection controls shown on this page because it does not provide any styling or interaction out-of-box, i.e. when simply placed on a page without defining any properties. ItemsRepeater 就是建置組塊,可供身為開發人員的您用來建立自己的自訂集合控制項,特別是無法使用本文其他控制項來實現的控制項。ItemsRepeater is rather a building block that you as a developer can use to create your own custom collections control, specifically one that cannot be achieved by using the other controls in this article. ItemsRepeater 是資料驅動的高效能面板,可根據您的確切需求量身打造。ItemsRepeater is a data-driven and high-performance panel that can be tailored to fit your exact needs.

這是正確的控制項嗎?Is this the right control?

如有下列情況,請使用 ItemsRepeater:Use an ItemsRepeater if:

  • 您已構思出具體的使用者介面和使用者體驗,但無法使用現有集合控制項加以建立。You have a specific user interface and user experience in mind that cannot be created using existing collection controls.
  • 您有項目的現有資料來源 (例如,從網際網路提取的資料、資料庫,或程式碼後置中的既有集合)。You have an existing data source for your items (such as data pulled from the internet, a database, or a pre-existing collection in your code-behind).

範例Examples

下列三個範例是繫結至相同資料來源 (數字集合) 的所有 ItemsRepeater 控制項。The following three examples are all ItemsRepeater controls that are bound to the same data source (a collection of numbers). 數字集合以三種方式表示,下列的每個 ItemsRepeater 會使用不同的自訂版面配置和不同的自訂 ItemTemplateThe collection of numbers is represented in three ways, with each of the ItemsRepeaters below using a different custom Layout and a different custom ItemTemplate.

具有橫條的 ItemsRepeater 具有直條的 ItemsRepeater 具有圓形表示的 ItemsRepeaterItemsRepeater with horizontal bars ItemsRepeater with vertical bars ItemsRepeater with circular representation

主題Topic 說明Description

ItemsRepeaterItemsRepeater

了解在應用程式中使用 ItemsRepeater 的基本知識,以及如何為集合檢視實作所有必要的互動和視覺元件。Learn the essentials of using an ItemsRepeater in your app, along with how to implement all of the necessary interaction and visual components for your collection view.

全球化和當地語系化檢查清單Globalization and localization checklist

換行Wrapping允許兩行的清單標籤。Allow two lines for the list label.
水平擴充Horizontal expansion確定欄位可以容納文字擴充,而且可捲動。Make sure fields can accomdation text expansion and are scrollable.
垂直間距Vertical spacing使用非拉丁字元的垂直間距,確保將適當地顯示非拉丁指令碼。Use non-Latin characters for vertical spacing to ensure non-Latin scripts will display properly.

取得範例程式碼Get the sample code

設計和 UX 指導方針Design and UX Guidelines

API 參考API reference