Deep dive on winjs listview
This presentation is the property of its rightful owner.
Sponsored Links
1 / 14

Deep dive on WinJS ListView PowerPoint PPT Presentation


  • 106 Views
  • Uploaded on
  • Presentation posted in: General

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.

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Deep dive on winjs listview

Deep dive on WinJS ListView

Mike Mastrangelo

Senior Software Development Engineer

3-108


Agenda

Agenda

  • Creating and styling

  • Grouping and Semantic Zoom

  • Adding interactivity


Demo creating and styling a listview

Demo: Creating and styling a ListView


Recap creating and styling a listview

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.


Demo grouping and semantic zoom

Demo: Grouping and Semantic Zoom


Recap grouping and semantic zoom

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


Demo adding interactivity

Demo: Adding interactivity


Recap adding interactivity

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

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

Questions?

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


Resources

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


  • Login