ListView

  • 2 minutes to read
  • Contributors
    • David Britch
    • Craig Dunn
    • Wayne Loopy
    • Charles Petzold

ListView is a view for presenting lists of data, especially long lists that require scrolling. This guide will show you how to use ListView:

  1. Data Sources – Populate a ListView with data, with or without data binding.
  2. Cell Appearance – Customize the appearance of the built-in cells or create your own custom cell.
  3. List Appearance – Customize the appearance of ListView. Set headers and footers, enable groups and change the height of rows.
  4. Interactivity – Handle taps and selections, implement pull-to-refresh, and add contextual actions.
  5. Performance – Avoid performance problems.

Use Cases

Make sure ListView is the right control for your needs. ListView can be used in any situation where you are displaying scrollable lists of data. ListViews support context actions and data binding.

ListView should not be confused with TableView. The TableView control is a better option whenever you have a non-bound list of options or data. For example, the iOS settings app, which has a mostly predefined set of options, is better suited to use TableView than ListView.

Also note that a ListView is best suited for homogeneous data – that is, all data should be of the same type. This is because only one type of cell can be used for each row in the list. TableViews can support multiple cell types, so they are a better option when you need to mix views.

Components

ListView has a number of components available to exercise the native functionality of each platform. Each of these components is described below:

  • Headers and Footers – Text or view to display at the beginning and end of a list, separate from list's data. Headers and footers can be bound to a data source independently from the ListView's data source.
  • Groups – Data in a ListView can be grouped for easier navigation. Groups are typically data bound:

  • Cells – Data in a ListView is presented in 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. Both built-in and custom cells can be used/defined in XAML or code.
    • Built-in – Built in cells, especially TextCell and ImageCell, can be great for performance, since they correspond to native controls on each platform.
      • 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 – Displays an image with text. Appears as a TextCell with an image on the left.
    • Custom Cells – Custom cells are great when you need to present complex data. For example, a custom view could be used to present a list of songs, including album and artist:

To learn more about customizing cells in a ListView, see Customizing ListView Cell Appearance.

Functionality

ListView supports a number of interaction styles, including:

  • Pull-to-Refresh – ListView supports pull-to-refresh on each platform.
  • Context Actions – ListView supports taking action on individual items in a list. For example, you can implement swipe-to-action on iOS, or long-tap actions on Android and Windows Phone.
  • Selection – You can listen for selections and deselections to take action when a row is tapped.

To learn more about the interactivity features of ListView, see Actions & Interactivity with ListView.