Deep dive on WinJS ListView

Deep dive on WinJS ListViewMike MastrangeloSenior Software Development Engineer3-108

Creating and stylingGrouping and Semantic ZoomAdding interactivity

Agenda

Demo: Creating and styling a ListView

Recap: Creating and styling a ListViewPopulate a data source with your items• Binding list for most ListViews• Virtualized data source for very large data sets.

Design the layout for your items with a template• HTML binding templates for most ListViews• JavaScript function templates for complex rendering

Use CSS to style your ListView and Items.

Demo: Grouping and Semantic Zoom

Recap: Grouping and Semantic ZoomCreate a group data source with grouping functions

createGrouped(groupKey, groupData)

Design group header template

Hook up Semantic Zoom by adding zoomed in and zoomed out ListViews

Demo: Adding interactivity

Recap: Adding interactivitySpecify SelectionMode and TapBehavior

Control your AppBar with ListView selection events

Look up the current selection and edit the binding list to change the ListView

Use win-interactive class name for interactive elements

Wrapping upCreate and style beautiful and interactive views without a lot of work

For large lists use Grouping and Semantic Zoom

Push the boundaries with rich interactivity and animations

MSDN Link for ListView: http://msdn.microsoft.com/en-us/library/windows/apps/br211837.aspx

Questions?

• Develop: http://msdn.microsoft.com/en-US/windows/apps/br229512

• Design: http://design.windows.com/

• Samples: http://code.msdn.microsoft.com/windowsapps/Windows-8-Modern-Style-App-Samples

• Videos: http://channel9.msdn.com/Windows

Resources

Please submit session evals by using the Build Windows 8 appor at http://aka.ms/BuildSessions

© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.