06 | designing and implementing navigation in a windows...
TRANSCRIPT
![Page 1: 06 | Designing and Implementing Navigation in a Windows ...download.microsoft.com/download/2/2/4/22461D7D-4787-47B8-87D… · navigation. This is often seen in games, browsers, or](https://reader034.vdocument.in/reader034/viewer/2022051909/5ffe2099f462ba2aac5bf747/html5/thumbnails/1.jpg)
06 | Designing and Implementing Navigation
in a Windows Store App
Jerry Nixon | Microsoft Developer Evangelist
Daren May | President & Co-founder, Crank211
![Page 2: 06 | Designing and Implementing Navigation in a Windows ...download.microsoft.com/download/2/2/4/22461D7D-4787-47B8-87D… · navigation. This is often seen in games, browsers, or](https://reader034.vdocument.in/reader034/viewer/2022051909/5ffe2099f462ba2aac5bf747/html5/thumbnails/2.jpg)
![Page 3: 06 | Designing and Implementing Navigation in a Windows ...download.microsoft.com/download/2/2/4/22461D7D-4787-47B8-87D… · navigation. This is often seen in games, browsers, or](https://reader034.vdocument.in/reader034/viewer/2022051909/5ffe2099f462ba2aac5bf747/html5/thumbnails/3.jpg)
Microsoft
Virtual
Academy
Understanding Navigation
![Page 4: 06 | Designing and Implementing Navigation in a Windows ...download.microsoft.com/download/2/2/4/22461D7D-4787-47B8-87D… · navigation. This is often seen in games, browsers, or](https://reader034.vdocument.in/reader034/viewer/2022051909/5ffe2099f462ba2aac5bf747/html5/thumbnails/4.jpg)
FramePage 1
Page 2
Page 3
Browser-like Navigation
![Page 5: 06 | Designing and Implementing Navigation in a Windows ...download.microsoft.com/download/2/2/4/22461D7D-4787-47B8-87D… · navigation. This is often seen in games, browsers, or](https://reader034.vdocument.in/reader034/viewer/2022051909/5ffe2099f462ba2aac5bf747/html5/thumbnails/5.jpg)
• Windows.UI.Xaml.Controls.Frame– Navigate(Type), Navigate(Type, Object)
• Navigated, Navigating, NavigationFailed, NavigationStopped
– CanGoBack, GoBack()
– CanGoForward, GoForward()
– GetNavigationState(), SetNavigationState(String)
• Windows.UI.Xaml.Controls.Page– Frame
– OnNavigatingFrom
– OnNavigatedTo, OnNavigatedFrom
Navigation Frame
![Page 6: 06 | Designing and Implementing Navigation in a Windows ...download.microsoft.com/download/2/2/4/22461D7D-4787-47B8-87D… · navigation. This is often seen in games, browsers, or](https://reader034.vdocument.in/reader034/viewer/2022051909/5ffe2099f462ba2aac5bf747/html5/thumbnails/6.jpg)
• Disabled (Default)– A new instance is created on each visit
• Required– A cached instance is reused after the first visit
• Enabled– The cached instance is discarded when cache size is exceeded
Page.NavigationCacheMode
![Page 7: 06 | Designing and Implementing Navigation in a Windows ...download.microsoft.com/download/2/2/4/22461D7D-4787-47B8-87D… · navigation. This is often seen in games, browsers, or](https://reader034.vdocument.in/reader034/viewer/2022051909/5ffe2099f462ba2aac5bf747/html5/thumbnails/7.jpg)
Microsoft
Virtual
Academy
Data Hierarchy
![Page 8: 06 | Designing and Implementing Navigation in a Windows ...download.microsoft.com/download/2/2/4/22461D7D-4787-47B8-87D… · navigation. This is often seen in games, browsers, or](https://reader034.vdocument.in/reader034/viewer/2022051909/5ffe2099f462ba2aac5bf747/html5/thumbnails/8.jpg)
Most Windows Store apps in Windows 8 will
use a hierarchical system of navigation.
• Hub– Entry point and Overview
• Section– Grouped & panorama of Items
• Detail– Details of an individual Item
Hierarchical Design
![Page 9: 06 | Designing and Implementing Navigation in a Windows ...download.microsoft.com/download/2/2/4/22461D7D-4787-47B8-87D… · navigation. This is often seen in games, browsers, or](https://reader034.vdocument.in/reader034/viewer/2022051909/5ffe2099f462ba2aac5bf747/html5/thumbnails/9.jpg)
App Hub
![Page 10: 06 | Designing and Implementing Navigation in a Windows ...download.microsoft.com/download/2/2/4/22461D7D-4787-47B8-87D… · navigation. This is often seen in games, browsers, or](https://reader034.vdocument.in/reader034/viewer/2022051909/5ffe2099f462ba2aac5bf747/html5/thumbnails/10.jpg)
![Page 11: 06 | Designing and Implementing Navigation in a Windows ...download.microsoft.com/download/2/2/4/22461D7D-4787-47B8-87D… · navigation. This is often seen in games, browsers, or](https://reader034.vdocument.in/reader034/viewer/2022051909/5ffe2099f462ba2aac5bf747/html5/thumbnails/11.jpg)
Many Windows Store apps use a flat system of navigation. This is often seen in games, browsers, or document creation apps.
• Top App Bar– Switching between multiple contexts
• Tabs
• Documents
• Sessions
• Switching– No persistent back button
– Navigation with Direct Links
Flat Design
![Page 12: 06 | Designing and Implementing Navigation in a Windows ...download.microsoft.com/download/2/2/4/22461D7D-4787-47B8-87D… · navigation. This is often seen in games, browsers, or](https://reader034.vdocument.in/reader034/viewer/2022051909/5ffe2099f462ba2aac5bf747/html5/thumbnails/12.jpg)
Semantic Zoom
![Page 13: 06 | Designing and Implementing Navigation in a Windows ...download.microsoft.com/download/2/2/4/22461D7D-4787-47B8-87D… · navigation. This is often seen in games, browsers, or](https://reader034.vdocument.in/reader034/viewer/2022051909/5ffe2099f462ba2aac5bf747/html5/thumbnails/13.jpg)
Semantic Zoom Ideas
![Page 14: 06 | Designing and Implementing Navigation in a Windows ...download.microsoft.com/download/2/2/4/22461D7D-4787-47B8-87D… · navigation. This is often seen in games, browsers, or](https://reader034.vdocument.in/reader034/viewer/2022051909/5ffe2099f462ba2aac5bf747/html5/thumbnails/14.jpg)
Data Techniques
• Filter– Remove content
• Pivot– Reorganize content
• Sort– Reorder content
• View– Change content style
![Page 15: 06 | Designing and Implementing Navigation in a Windows ...download.microsoft.com/download/2/2/4/22461D7D-4787-47B8-87D… · navigation. This is often seen in games, browsers, or](https://reader034.vdocument.in/reader034/viewer/2022051909/5ffe2099f462ba2aac5bf747/html5/thumbnails/15.jpg)
Navigation & Suspension Manager & GridView
![Page 16: 06 | Designing and Implementing Navigation in a Windows ...download.microsoft.com/download/2/2/4/22461D7D-4787-47B8-87D… · navigation. This is often seen in games, browsers, or](https://reader034.vdocument.in/reader034/viewer/2022051909/5ffe2099f462ba2aac5bf747/html5/thumbnails/16.jpg)
![Page 17: 06 | Designing and Implementing Navigation in a Windows ...download.microsoft.com/download/2/2/4/22461D7D-4787-47B8-87D… · navigation. This is often seen in games, browsers, or](https://reader034.vdocument.in/reader034/viewer/2022051909/5ffe2099f462ba2aac5bf747/html5/thumbnails/17.jpg)
©2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Office, Azure, System Center, Dynamics and other product names are or may be registered trademarks and/or trademarks in
the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because
Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information
provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.