Windows 8 C#/XAML Tips and Tricks:       GridView, ListView         SemanticZoom          Jeff Klawiter   Principal Softwa...
Hiring 100 Nerds   in 100 Days     http://100nerds.com/143-Jeff-Klawiter
Windows 8 WorkshopsThe Windows 8 Developer Workshops are designed to help you develop appsand games for Windows 8.•Windows...
The New Controls•GridView  • Default display items horizontally  • Groups•ListView  • Default display items Vertically•Sem...
Gridview Templates
HeaderTemplateItemsPanelGroupStyle.ContainerStyleGroupStyle.HeaderGroupStyle.PanelItemContainerStyleItemTemplate
ItemTemplate• Template for your actual content.• Usually a DataTemplate• Where most {Binding} happens
ItemContainerStyle• Surrounds ItemTemplate• Visual States  • Selected  • Focused
ItemsPanel•Governs how items are laid out  • VirtualizingStackPanel  • WrapGrid  • VariableSizedWrapGrid
ItemsPanelSurrounds GroupStyle.ContainerStyle
HeaderTemplate•HeaderTemplate • Used for the main header   above the gridview
GroupStyle.ContainerStyle• Defines Group Panel and Header layout
GroupStyle.HeaderTemplate Displayed once per GroupStyle.ContainerStyle
GroupStyle.Panel• Governs layout of items in group• Non-Virtualizing Panel  • VirtualizingStackPanel  • WrapGrid  • Variab...
ListViewSee GridView       Biggest Difference: Default Control Template
Semantic ZoomZoomedInView  • Displays most detailed contentZoomedOutView  • Displays high level informationEach View conta...
Semantic Zoom: Scroll Jump•Relies on CollectionViewSource CollectionGroups(this.semanticZoom.ZoomedOutView as ListViewBase...
Recap•GridView  • Horizontal Display•ListView  • Vertical Display•SemanticZoom  • Show information at 2 levels
QUESTIONS?MORE ANSWERS ONLINE AT HTTP://NERDERY.COM
Windows 8 Design with Gridview
Windows 8 Design with Gridview
Windows 8 Design with Gridview
Upcoming SlideShare
Loading in …5
×

Windows 8 Design with Gridview

2,457 views
2,233 views

Published on

Presented at Twin Cities Code Camp 13, Twin Cities Windows 8 User Group and Chippewa Valley Code camp. Covers all the templates and styles related to the new gridview and listview controls

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,457
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
14
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Windows 8 Design with Gridview

  1. 1. Windows 8 C#/XAML Tips and Tricks: GridView, ListView SemanticZoom Jeff Klawiter Principal Software Engineer @jeffklawiter @the_nerdery
  2. 2. Hiring 100 Nerds in 100 Days http://100nerds.com/143-Jeff-Klawiter
  3. 3. Windows 8 WorkshopsThe Windows 8 Developer Workshops are designed to help you develop appsand games for Windows 8.•Windows 8 UX Design•Windows 8 Game DevelopmentMicrosoft Store at Mall of America every Monday Night 5pm-8pmwww.msdnevents.com/workshops
  4. 4. The New Controls•GridView • Default display items horizontally • Groups•ListView • Default display items Vertically•SemanticZoom • Display alternate level of information for gridviews
  5. 5. Gridview Templates
  6. 6. HeaderTemplateItemsPanelGroupStyle.ContainerStyleGroupStyle.HeaderGroupStyle.PanelItemContainerStyleItemTemplate
  7. 7. ItemTemplate• Template for your actual content.• Usually a DataTemplate• Where most {Binding} happens
  8. 8. ItemContainerStyle• Surrounds ItemTemplate• Visual States • Selected • Focused
  9. 9. ItemsPanel•Governs how items are laid out • VirtualizingStackPanel • WrapGrid • VariableSizedWrapGrid
  10. 10. ItemsPanelSurrounds GroupStyle.ContainerStyle
  11. 11. HeaderTemplate•HeaderTemplate • Used for the main header above the gridview
  12. 12. GroupStyle.ContainerStyle• Defines Group Panel and Header layout
  13. 13. GroupStyle.HeaderTemplate Displayed once per GroupStyle.ContainerStyle
  14. 14. GroupStyle.Panel• Governs layout of items in group• Non-Virtualizing Panel • VirtualizingStackPanel • WrapGrid • VariableSizedWrapGrid
  15. 15. ListViewSee GridView Biggest Difference: Default Control Template
  16. 16. Semantic ZoomZoomedInView • Displays most detailed contentZoomedOutView • Displays high level informationEach View contains separate content!!
  17. 17. Semantic Zoom: Scroll Jump•Relies on CollectionViewSource CollectionGroups(this.semanticZoom.ZoomedOutView as ListViewBase).ItemsSource = groupedItemsViewSource.View.CollectionGroups;•Workaroundprivate void SemanticZoom_ViewChangeCompleted_1(object sender, SemanticZoomViewChangedEventArgs e){ if (!e.IsSourceZoomedInView) { itemGridView.ScrollIntoView(e.SourceItem.Item); }}
  18. 18. Recap•GridView • Horizontal Display•ListView • Vertical Display•SemanticZoom • Show information at 2 levels
  19. 19. QUESTIONS?MORE ANSWERS ONLINE AT HTTP://NERDERY.COM

×