From 4 to 40 inches: Developing Windows Applications across Multiple Form-FactorsPeter Torr, ptorr@microsoft.com Program Manager (Developer Platform)

WIN-B322

phones

phablets

tablets

laptops

two-in-ones

all-in-ones

desktops

digital whiteboards

televisions

bigger screen more pixels more content

higher dpi more pixels nicer graphics

DEMO: Silverlight 8.1

Preserving your investment in Silverlight apps

Friction-free upgradesOpt-in to supporting larger screens

http://aka.ms/wpsllarge

Only available on Windows Phone OS

Windows Phone Silverlight 8.1

Layout Assets

Positioning UI objects on the screen

Images, videos, and other graphics

Layout Assets

Physical Size & Shape

Viewing Distance

Effective Resolution

Detail Level

Scale Factors

Mastering

40”

30”24”

18”14”

10”

8”

6”

4”

to scale

Size (not resolution) matters

Shape (not orientation) matters

widetall

square

DEMO: Universal app

TIC TAC TOE – Part 1

Layout Assets

Physical Size & Shape

Viewing Distance

Effective Resolution

Detail Level

Scale Factors

Mastering

4K TV:3840 x 2160

But I just “upgraded”to a 4K TV!

If a 4” phone is 800 pixels wide, does that mean a 40” monitor is

8,000?

Far-away objects appear smaller than they are

xy

2x

2y

θ

that’s an eye…

~4” phone at 10 feet

Far-away objects appear smaller than they are

~40” screen at 10 feet

~4” phone at 1 foot Same angle

of view

Layout Assets

Physical Size & Shape

Effective Resolution

Detail Level

Scale Factors

Mastering

Viewing Distance

Effective resolution embraces viewing distance

~40” screen at 10 feetSame effective

resolution

~4” phone at 1 foot

X × Y effective pixels X × Y effective pixels

Same angle of view

40”

30”24”

18”14”

10”

8”

6”

4”

to scale

Size (not resolution) matters

2560 x 1440

1920 x 1080

1366 x 768450 x 800

to scale

Effective resolution (not size) matters

384 x 683

DEMO: Universal app

TIC TAC TOE – Part 2

Build shared UI componentsCombine them into platform-specific pagesAdjust layout based on available size & shape

Clean separation of view and model won’t hurt…

Building adaptive apps for Windows

Layout Assets

Physical Size & Shape

Viewing Distance

Effective Resolution

Detail Level

Scale Factors

Mastering

Effective asset size determines detail level

dvd_large.png dvd_small.png

Layout Assets

Physical Size & Shape

Viewing Distance

Effective Resolution

Detail Level

Scale Factors

Mastering

Relative density (not DPI) is important

Also known as “scale factor” or “resolution scale”

2× as dense

Ignore this setting!

DEMO: Assets

Detail level and scale factors

Determine desired layout size (in effective pixels)Output your asset at that size (Shared project)Multiply the layout size by 2.4Output your asset at that size (Phone-only)View the result on target devices

Emulator / simulator insufficient for asset verification

If it looks good, you’re done!If not, try an additional scale factor (eg, 1.4 or 1.8)

Steps to generating assets

Layout Assets

Physical Size & Shape

Viewing Distance

Effective Resolution

Detail Level

Scale Factors

Mastering

Ideally, use a vector formatOtherwise, bitmaps >= 400% scaleExport at target scale factors as needed

Don’t forget about the detail level!Don’t worry if you only have a low-res asset

Master at highest practical resolution

Layout Assets

Physical Size & Shape

Viewing Distance

Effective Resolution

Detail Level

Scale Factors

Mastering

DisplayInformation.GetForCurrentView()

Where’s the code?

Property Description

ResolutionScale Scale factor (enum) – Windows

RawPixelsPerViewPixel Scale factor (double) – Windows Phone

RawDpiX, RawDpiY Ignore unless measuring real-world objects (ruler, hardware, etc.)

LogicalDpi Avoid unless working with Direct2D or legacy code that assumes 96 DPI

Windows Phone Developers

Important information when migrating from Silverlight to XAML

~10” tablet~5” phone

768px high(effective)

384px high(effective)

2× size

½× resolution

Minimum effective resolution for Phones

Lumia 920 Physical resolution

Scale Factor

Effective Resolution

Silverlight (8.x) 768 x 1280 1.6 480 x 800

XAML / HTML 768 x 1280 2.0 384 x 640

multiply existing constants by 0.8

Use the right words!Good: effective resolution / shape / scale factorBad: physical resolution / orientation / DPI

Architect for a flexible layoutPrefer component parts vs. monolithic pagesLet the layout system work for you

Focus on the right set of assetsStart with high-resolution mastersGenerate only the scale factors you need (eg, 100% and 240%)Ensure detail level is appropriate

Wrap-up & call to action

FDN05: The Microsoft Application Platform for Developers: Create Applications That Span Devices and Services

WIN-B363: Build for Both: Building Shared Apps for Windows Phone and Windows 8.1

DEV-B340: Building Beautiful Applications Using Blend and Visual Studio for XAML Applications

DEV-B333: Sharing Code and UI with Universal Projects and Windows Library for JavaScript (WinJS)

Related content – breakout sessions

Silverlight large-screen support: http://aka.ms/wpsllarge

LayoutRules code sample: http://bit.ly/1kUy0rO

Optimum emulator sizes: http://bit.ly/1oo9gJa

Related content – online & in-person

Find Me Later: Expo Hall, 12:30 – 3:15pmptorr@microsoft.com

Windows Enterprise windows.com/enterprise windowsphone.com/business  

Windows Track Resources

Windows Springboard microsoft.com/springboardMicrosoft Desktop Optimization Package (MDOP)

microsoft.com/mdop Windows To Go microsoft.com/windows/wtg

Windows Phone Developer developer.windowsphone.com

Resources

Learning

Microsoft Certification & Training Resources

www.microsoft.com/learning

msdn

Resources for Developers

http://microsoft.com/msdn

TechNet

Resources for IT Professionals

http://microsoft.com/technet

Sessions on Demand

http://channel9.msdn.com/Events/TechEd

Complete an evaluation and enter to win!

Evaluate this session

Scan this QR code to evaluate this session.

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