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

1. Windows 8 C#/XAML Tips and Tricks:
GridView, ListView
SemanticZoom
Jeff Klawiter
Principal Software Engineer
@jeffklawiter
@the_nerdery

2. Hiring 100 Nerds
in 100 Days
http://100nerds.com/143-Jeff-Klawiter

3. Windows 8 Workshops
The Windows 8 Developer Workshops are designed to help you develop apps
and games for Windows 8.
•Windows 8 UX Design
•Windows 8 Game Development
Microsoft Store at Mall of America every Monday Night 5pm-8pm
www.msdnevents.com/workshops

4. The New Controls
•GridView
• Default display items horizontally
• Groups
•ListView
• Default display items Vertically
•SemanticZoom
• Display alternate level of information for gridviews

8. Gridview Templates

9. HeaderTemplate
ItemsPanel
GroupStyle.ContainerStyle
GroupStyle.Header
GroupStyle.Panel
ItemContainerStyle
ItemTemplate

10. ItemTemplate
• Template for your actual content.
• Usually a DataTemplate
• Where most {Binding} happens

11. ItemContainerStyle
• Surrounds ItemTemplate
• Visual States
• Selected
• Focused

12. ItemsPanel
•Governs how items are laid out
• VirtualizingStackPanel
• WrapGrid
• VariableSizedWrapGrid

13. ItemsPanel
Surrounds GroupStyle.ContainerStyle

14. HeaderTemplate
•HeaderTemplate
• Used for the main header
above the gridview

15. GroupStyle.ContainerStyle
• Defines Group Panel and Header layout

16. GroupStyle.HeaderTemplate
Displayed once per GroupStyle.ContainerStyle

17. GroupStyle.Panel
• Governs layout of items in group
• Non-Virtualizing Panel
• VirtualizingStackPanel
• WrapGrid
• VariableSizedWrapGrid

18. ListView
See GridView
Biggest Difference: Default Control Template

19. Semantic Zoom
ZoomedInView
• Displays most detailed content
ZoomedOutView
• Displays high level information
Each View contains separate content!!

20. Semantic Zoom: Scroll Jump
•Relies on CollectionViewSource CollectionGroups
(this.semanticZoom.ZoomedOutView as ListViewBase).ItemsSource = groupedItemsViewSource.View.CollectionGroups;
•Workaround
private void SemanticZoom_ViewChangeCompleted_1(object sender, SemanticZoomViewChangedEventArgs e)
{
if (!e.IsSourceZoomedInView)
{
itemGridView.ScrollIntoView(e.SourceItem.Item);
}
}

21. Recap
•GridView
• Horizontal Display
•ListView
• Vertical Display
•SemanticZoom
• Show information at 2 levels

22. QUESTIONS?
MORE ANSWERS ONLINE AT
HTTP://NERDERY.COM