This sample demonstrates the basics of using the WinJS.UI.ListView control on both Windows and Windows Phone 8.1: binding to data, creating an item template, responding to events, selecting items, and retrieving selected items.

Note  This sample was created using one of the universal app templates available in Visual Studio. It shows how its solution is structured so it can run on both Windows 8.1 and Windows Phone 8.1. For more info about how to build apps that target Windows and Windows Phone with Visual Studio, see Build apps that target Windows and Windows Phone 8.1 by using Visual Studio.

Specifically, this sample shows you how to:

• Use a WinJS.Binding.List to create an IListDataSource that the ListView can display.
• Use a WinJS.Binding.Template to display data.
• Handle the iteminvoked event.
• Change the ListView control's layout from grid to list.
• Programmatically manipulate the ListView control's selection.
• Store the selection state of the ListView so that it can be restored after your app is suspended and resumed.
• Change the orientation between horizontal and vertical, grid and list layout.

For more info about the concepts and APIs demonstrated in this sample, see these topics:

• Quickstart: adding a ListView
• Quickstart: adding Windows Library for JavaScript controls and styles
• How to change the selection mode
• How to group items in a ListView
• Item templates for grid layouts
• Item templates for list layouts
• ListView reference
• Roadmap for apps using JavaScript

This sample is written in HTML, CSS, and JavaScript. For the XAML version, see the XAML ListView and GridView control sample.

To obtain an evaluation copy of Windows 8.1, go to Windows 8.1.

To obtain an evaluation copy of Microsoft Visual Studio 2013 Update 2, go to Microsoft Visual Studio 2013.

Note  For Windows 8 app samples, download the Windows 8 app samples pack. The samples in the Windows 8 app samples pack will build and run only on Microsoft Visual Studio 2012.

Related topics

How to change the selection mode

How to group items in a ListView

Item templates for grid layouts

Item templates for list layouts

ListView reference

Quickstart: adding a ListView

Quickstart: adding Windows Library for JavaScript controls and styles

Windows 8 app samples

Related technologies

Windows 8 apps using JavaScript, ListView

Operating system requirements

Client	Windows 8.1
Server	Windows Server 2012 R2
Phone	Windows Phone 8.1

Build the sample

1. Start Visual Studio 2013 Update 2 and select File > Open > Project/Solution.
2. Go to the directory to which you unzipped the sample. Then go to the subdirectory named for the sample and double-click the Visual Studio 2013 Update 2 Solution (.sln) file.
3. Follow the steps for the version of the sample you want:

   • To build the Windows version of the sample:

     1. Select Controls_ListViewBasic.Windows in Solution Explorer.
     2. Press Ctrl+Shift+B, or use Build > Build Solution, or use Build > Build Controls_ListViewBasic.Windows.

   • To build the Windows Phone version of the sample:

     1. Select Controls_ListViewBasic.WindowsPhone in Solution Explorer.
     2. Press Ctrl+Shift+B or use Build > Build Solution or use Build > Build Controls_ListViewBasic.WindowsPhone.

Run the sample

The next steps depend on whether you just want to deploy the sample or you want to both deploy and run it.

Deploying the sample

• To deploy the built Windows version of the sample:

  1. Select Controls_ListViewBasic.Windows in Solution Explorer.
  2. Use Build > Deploy Solution or Build > Deploy Controls_ListViewBasic.Windows.

• To deploy the built Windows Phone version of the sample:

  1. Select Controls_ListViewBasic.WindowsPhone in Solution Explorer.
  2. Use Build > Deploy Solution or Build > Deploy Controls_ListViewBasic.WindowsPhone.

Deploying and running the sample

• To deploy and run the Windows version of the sample:

  1. Right-click Controls_ListViewBasic.Windows in Solution Explorer and select Set as StartUp Project.
  2. To debug the sample and then run it, press F5 or use Debug > Start Debugging. To run the sample without debugging, press Ctrl+F5 or use Debug > Start Without Debugging.

• To deploy and run the Windows Phone version of the sample:

  1. Right-click Controls_ListViewBasic.WindowsPhone in Solution Explorer and select Set as StartUp Project.
  2. To debug the sample and then run it, press F5 or use Debug > Start Debugging. To run the sample without debugging, press Ctrl+F5 or use Debug > Start Without Debugging.