Download - Windows 8 Design with Gridview
Jeff KlawiterPrincipal Software Engineer
@jeffklawiter @the_nerdery
Windows 8 C#/XAML Tips and Tricks:GridView, ListView
SemanticZoom
Hiring 100 Nerds in 100 Days
Hiring 100 Nerds in 100 Days
http://100nerds.com/143-Jeff-Klawiter
Windows 8 WorkshopsWindows 8 WorkshopsThe 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
The New ControlsThe New Controls•GridView• Default display items horizontally• Groups
•ListView• Default display items Vertically
•SemanticZoom• Display alternate level of information for gridviews
Gridview TemplatesGridview Templates
ItemsPanel
ItemTemplate
ItemContainerStyle
HeaderTemplate
GroupStyle.ContainerStyle
GroupStyle.Header
GroupStyle.Panel
ItemTemplateItemTemplate• Template for your actual content.• Usually a DataTemplate• Where most {Binding} happens
ItemContainerStyleItemContainerStyle• Surrounds ItemTemplate• Visual States
• Selected• Focused
ItemsPanelItemsPanel•Governs how items are laid out • VirtualizingStackPanel• WrapGrid• VariableSizedWrapGrid
ItemsPanelItemsPanelSurrounds GroupStyle.ContainerStyle
HeaderTemplateHeaderTemplate•HeaderTemplate• Used for the main header
above the gridview
GroupStyle.ContainerStyle
GroupStyle.ContainerStyle
• Defines Group Panel and Header layout
GroupStyle.HeaderTemplate
GroupStyle.HeaderTemplate
Displayed once per GroupStyle.ContainerStyle
GroupStyle.PanelGroupStyle.Panel• Governs layout of items in group• Non-Virtualizing Panel
• VirtualizingStackPanel• WrapGrid• VariableSizedWrapGrid
ListViewListView
See GridView
Biggest Difference: Default Control Template
Semantic ZoomSemantic ZoomZoomedInView• Displays most detailed content
ZoomedOutView• Displays high level information
Each View contains separate content!!
Semantic Zoom: Scroll Jump
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);}
}
RecapRecap•GridView• Horizontal Display
•ListView• Vertical Display
•SemanticZoom• Show information at 2 levels
QUESTIONS?QUESTIONS?MORE ANSWERS ONLINE AT
HTTP://NERDERY.COM