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