Building Metro style UIs

Paul GusmorinoLead Program ManagerMicrosoft Corporation

DEV354

Agenda

What is Metro style UI?How can I build Metro style UIs for Windows 8?

XAML (C++/C#)HTML and Windows Library for JavaScript (JS)

Common patterns of Metro style UI

You’ll leave with examples of how to:Use common patterns to create great Metro style UIs

What is Metro style UI?

A set of common user interface patterns

grounded in a set of design principles

supported by the Windows 8 platform.

demo

Examples from apps on the Windows 8 Release Preview!

What is Metro style UI?

A set of common user interface patternsgrounded in a set of design principles

and supported by the Windows 8 platform.

Patterns of Metro style UI

LayoutNavigationCommandingScrolling ContentPresenting DataEssential ControlsText Editing

Principles of Metro style UI

Pride in craftsmanshipFast and fluidAuthentically digitalDo more with lessWin as one

Platform for Metro style UI

For C++/C#:XAML

For Javascript:HTMLWindows Library for JavaScript

All powered by the same underlying Windows 8 platform capabilities!

Layout Patterns for Metro style UI

Layout Patterns for Metro style UIFixed

Adaptive

Filled and Snapped

demo

Layout Patterns

Layout Patterns Takeaways

Determine whether your layout should be fixed or adaptiveSupport snapped state as a fully functional mode of your appConsider supporting portrait layout when applicableUse platform support to achieve high performance layout

Navigation Patterns for Metro style UI

Navigation Patterns

Hub Flat Back

demo

Navigation Patterns

Navigation Patterns Takeaways

Use hub pattern with hierarchical structure for apps with large collections of content to explore or multiple sections or categories.Use flat pattern with a navigation bar for apps with multiple tabs, documents, instant messages, game sessions, or other cases with relatively few sections.Enable users to go back using standard back button pattern.Use seamless, inline navigation between pages in the app with standard page transition animations.

Commanding Patterns for Metro style UI

Commanding Patterns

Message Dialog

Flyout

App Bar

Tooltip

Settings PaneContext Menu

demo

Commanding Patterns

Commanding Patterns Takeaways

Use App Bar and Flyout to show more commands ‘on demand’

Use Tooltip to show more information

Consistent, lightweight invocation and dismiss model

Optimized for touch, mouse, and keyboard

Positioned correctly based on system context

Flexibility to define the content in a way that is native to HTML or XAML

Scrolling Content Patterns for Metro style UI

Scrolling Content PatternsIdle

• No Scrollbar Touch & Keyboard

• Panning Indicator Mouse

• Scrollbar

Scrolling Content Patterns - Behaviors

PanningZoomingRailsInertiaBoundary feedbackSnap pointsNestingChaining

demo

Scrolling Content Patterns

Scrolling Content Patterns Takeaways

Use the built-in Scroll Views to get the right user experience

Works for touch, mouse, and keyboard

Achieve sticks-to-the-finger performance

For XAML, use ScrollView control

For HTML, use CSS overflow to get “ScrollView”

Presenting Data Patterns for Metro style UI

Presenting Data Patterns

Flip ViewList View Grid View

Presenting Data PatternsSingle & Multi SelectGrouping

Built-in Animations

Presenting Data Patterns

Semantic Zoom

demo

Presenting Data Patterns

Presenting Data Patterns Takeaways

Visible way to make your app shine with the Metro design style

Consistent interaction model and behaviors built in

Use List/Grid Views for collections of data

Define your own rich templates ‘natively’ in both HTML and XAML

Connect to your own data: local or cloud

Use Semantic Zoom to scale experience to more data

Essential Control Patterns for Metro style UI

Essential Control PatternsButton

Checkbox

Combo Box

Date Picker Radio Button

Hyperlink

ListBox

Ratings

Progress Bar

Progress Ring

Time Picker

Toggle Switch

Slider

Essential Control PatternsButton

Checkbox

Combo Box

Date Picker Radio Button

Hyperlink

ListBox

Ratings

Progress Bar

Progress Ring

Time Picker

Toggle Switch

Slider

demo

Essential Control Patterns

Everyday Widget Patterns Takeaways

Use the everyday widgets to get a great user experience

Take full advantage of multi-touch screens

Highly flexible styling and customizations:

Realize your scenarios and your app’s own ‘look’

Retain common feel and functionality

Text Editing Patterns for Metro style UI

Text Editing PatternsSingle-Line Text Box Password

Multi-Line Text Box Rich Text Box

Clear Button Reveal Button

Text Editing Patterns - BehaviorsText Selection

Cut, Copy, and Paste

Spellchecking

Mouse & Keyboard

Touch

Text Editing Patterns - Touch Keyboard

demo

Text Editing Patterns

Text Editing Patterns Takeaways

Powerful text editing experience

Optimized for touch, mouse, and keyboard

Spellchecking!

Integration with touch keyboard

What is Metro style UI?

A set of common user interface patterns

LayoutNavigationCommandingScrolling ContentPresenting DataEveryday WidgetsText editing

grounded in a set of design principles

Pride in craftsmanshipFast and fluidAuthentically digitalDo more with lessWin as one

supported by the Windows 8 platform.

For C++/C#:XAML

For Javascript:HTMLWindows Library for JavaScript

All powered by the same underlying Windows 8 platform capabilities!

A set of common user interface patternsgrounded in a set of design principles

and supported by the Windows 8 platform.

Related Content

DEV351 Designing Apps with Metro Principles and Windows Personality

DEV366 Building Metro style Apps with HTML and Javascript

Find Me Later At… Ask the Experts

DEV353 Building Metro style Apps with XAML

DEV Track Resources

Visual Studio Home Page :: http://www.microsoft.com/visualstudio/en-us

Jason Zander’s Blog :: http://blogs.msdn.com/b/jasonz/

Facebook :: http://www.facebook.com/visualstudio

Twitter :: http://twitter.com/#!/visualstudio

Somasegar’s Blog :: http://blogs.msdn.com/b/somasegar/

Resources

Connect. Share. Discuss.

http://europe.msteched.com

Learning

Microsoft Certification & Training Resources

www.microsoft.com/learning

TechNet

Resources for IT Professionals

http://microsoft.com/technet

Resources for Developers

http://microsoft.com/msdn

Evaluations

http://europe.msteched.com/sessions

Submit your evals online

© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista 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.