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.