1 / 14

Deep dive on WinJS ListView

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.

chin
Download Presentation

Deep dive on WinJS ListView

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Deep dive on WinJS ListView Mike Mastrangelo Senior Software Development Engineer 3-108

  2. Agenda • Creating and styling • Grouping and Semantic Zoom • Adding interactivity

  3. Demo: Creating and styling a ListView

  4. 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.

  5. Demo: Grouping and Semantic Zoom

  6. 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

  7. Demo: Adding interactivity

  8. 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

  9. 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

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

  11. 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

More Related