3. phones phablets tablets laptops two-in-ones all-in-ones desktops digital whiteboards televisions

4. bigger screenmore pixelsmore content higher dpimore pixelsnicer graphics

7. LayoutAssets Positioning UI objects on the screen Images, videos, and other graphics

8. LayoutAssets Physical Size & Shape Viewing Distance Effective Resolution Detail Level Scale Factors Mastering

9. 40” 30” 24” 18” 14” 10” 8” 6” 4” to scale

10. wide tall square

12. LayoutAssets Physical Size & Shape Viewing Distance Effective Resolution Detail Level Scale Factors Mastering

13. 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?

14. x y 2x 2y θ that’s an eye…

15. ~4” phone at 10 feet ~40” screen at 10 feet ~4” phone at 1 foot Same angle of view

16. LayoutAssets Physical Size & Shape Effective Resolution Detail Level Scale Factors Mastering Viewing Distance

17. ~40” screen at 10 feet Same effective resolution ~4” phone at 1 foot X × Y effective pixels Same angle of view

18. 40” 30” 24” 18” 14” 10” 8” 6” 4” to scale

19. 2560 x 1440 1920 x 1080 1366 x 768 450 x 800 to scale 384 x 683

22. LayoutAssets Physical Size & Shape Viewing Distance Effective Resolution Detail Level Scale Factors Mastering

24. Effective asset size determines detail level dvd_large.pngdvd_small.png

25. LayoutAssets Physical Size & Shape Viewing Distance Effective Resolution Detail Level Scale Factors Mastering

26. Also known as “scale factor” or “resolution scale” 2× as dense

27. Ignore this setting!

30. LayoutAssets Physical Size & Shape Viewing Distance Effective Resolution Detail Level Scale Factors Mastering

32. LayoutAssets Physical Size & Shape Viewing Distance Effective Resolution Detail Level Scale Factors Mastering

33. PropertyDescription ResolutionScaleScale factor (enum) – Windows RawPixelsPerViewPixelScale factor (double) – Windows Phone RawDpiX, RawDpiYIgnore unless measuring real-world objects (ruler, hardware, etc.) LogicalDpiAvoid unless working with Direct2D or legacy code that assumes 96 DPI

35. ~10” tablet ~5” phone 768px high (effective) 384px high (effective) 2× size ½× resolution

36. Lumia 920 Physical resolution Scale Factor Effective Resolutio n Silverlight (8.x)768 x 12801.6480 x 800 XAML / HTML768 x 12802.0384 x 640 multiply existing constants by 0.8

41. www.microsoft.com/learning http://microsoft.com/msdn http://microsoft.com/technet http://channel9.msdn.com/Events/TechEd