140 likes | 322 Views
Deep dive on WinJS ListView. Mike Mastrangelo Senior Software Development Engineer 3-108. Agenda. Creating and styling Grouping and Semantic Zoom Adding interactivity. Demo: Creating and styling a ListView. Recap: Creating and styling a ListView.
E N D
Deep dive on WinJS ListView Mike Mastrangelo Senior Software Development Engineer 3-108
Agenda • Creating and styling • Grouping and Semantic Zoom • Adding interactivity
Recap: Creating and styling a ListView • Populate 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.
Recap: Grouping and Semantic Zoom • Create 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
Recap: Adding interactivity • Specify 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 up • Create and style beautiful and interactive views without a lot of work • For large lists use Grouping and Semantic Zoom • Push the boundaries with rich interactivityand animations
Questions? • MSDN Link for ListView: http://msdn.microsoft.com/en-us/library/windows/apps/br211837.aspx
Resources • 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 Please submit session evals by using the Build Windows 8 app or at http://aka.ms/BuildSessions