Making Your Desktop Apps Shine on High DPI Displays

2. Making Your Desktop Apps Shine on High DPI Displays Steve Wright Sr. Program Manager 4-184

3. Agenda • High DPI machines are here! • What’s new in Windows 8.1 for DPI • The DPI opportunity for developers • Deep dive into nuts and bolts: Win32, D2D, WPF

4. High DPI machines are here! • 1080p screens with 150% scaling now! • 2560x1440 screens with 200% now! • 3200x1800 screens with 200% soon! • 3840x2160 screens are coming

5. What’s new in Windows 8.1 for DPI • 8.1 has full desktop and store app support for high DPI • 200% desktop scaling • Per-monitor optimized desktop scaling • API support for desktop per-monitor scaling • New CPL UX for per-monitor scaling

6. Placeholder for extremely busy desktop screenshot (100% scaling on 200+DPI device)

7. What high DPI buys your customers: • More resolution, more content? NO! Clearer content; more detailed content!

8. How is desktop content scaled? • Partnership between Windows and the application: you choose the level of investment you will make; Windows does the rest. App renders at per monitor DPI DWM never scales Content is always crisp Apps render at sys DPI DWM scales if sys DPI != per monitor DPI Can be blurry (on low DPI secondary) Apps render in a sandbox at 100% DWM scales output Input stack scales input Bitmap scaling: can be blurry (on high DPI displays)

9. Demo: Windows 8.1 Per monitor scaling

10. Per-monitor aware app: nuts and bolts • Plan how to scale your content • Let Windows know you’ll do the work • Figure out the right scale factor • Listen for changes in scale factor

11. Demo: Writing a per-monitor aware Win32 app

12. Recap: plan how to scale all your content • // Create a scaling helper class to manage scaling • // • // 1) class private data tracks scale factor for you • // • // 2) class scaling functions can be called during • // rendering. • // • // Think about: initialization, layout, rendering

13. Recap: let Windows know you’ll do the work • // Declare your level of awareness in your app manifest: • <asmv3:application> • <asmv3:windowsSettings xmlns="http://schemas.microsoft.com/SMI/2005/WindowsSettings"> • <dpiAware>Per monitor</dpiAware> • </asmv3:windowsSettings> • </asmv3:application> • // Supported values: • // Blank or False: DPI unaware – supported downlevel • // True: System DPI aware - supported downlevel • // Per monitor: Per monitor aware – new in 8.1 • // True/PM: Per monitor aware in 8.1, system DPI aware downlevel • // (for apps that ship a single binary that has to behave differently downlevel) • // You can also do this procedurally rather than declaratively, but this is not recommended

14. Recap: figure out the right scale factor • // Figure out what monitor you are on (MonitorFromHWnd(), e.g.) • // Then call: • HRESULT GetDpiForMonitor(_In_ HMONITOR hmonitor, • _In_ MONITOR_DPI_TYPE dpiType, • _Out_ UINT *dpiX, • _Out_ UINT *dpiY); • // You can get several different kinds of DPI information back: • typedefenum MONITOR_DPI_TYPE { • MDT_EFFECTIVE_DPI = 0, // DPI for scale factor •     MDT_ANGULAR_DPI = 1, // Screen DPI & view distance •     MDT_RAW_DPI = 2, // Screen physical DPI •     MDT_DEFAULT = MDT_EFFECTIVE_DPI • } MONITOR_DPI_TYPE;

15. Recap: listen for changes in scale factor • // Listen for WM_DPICHANGED window message; • // wparam has the new DPI for scale factor • // lparam is a pointer to a RECT • // recommended new window position and size • // • // Update your scaling • // Call SetWindowPos() from the WM_DPICHANGED handler

16. Demo: Writing a per-monitor aware D2D app

17. Recap for D2D per-monitor aware app: • // Same manifest technique for setting awareness • // • // Scaling is easier to centralize since D2D can scale everything • // (except for old-style image assets!) • // Color fonts revolutionize image asset management • // • // D2D sample has some simple controls (buttons) you can use • // • // Can incorporate Win32 controls, but have to manually scale them

18. Demo: Writing a per-monitor aware WPF app

19. Recap for WPF per-monitor aware app: • // Scaling is trivial since WPF scales everything for you. • // • // Scaling helper manages display & DPI changes, sets root xform. • // • // Have to set per-monitor awareness procedurally (API call).

20. 3 options – which one should you choose? • DPI aware  perceptable differentiator on high DPI displays. • You can let Windows scale your app. • But you’ll look much better on high DPI devices if you are system DPI aware. • Consider per-monitor DPI support if multimon/projection scenarios are important use scenarios for your customer • Or if your app requires pixel-perfect rendering on all available displays

21. Summary: embrace the pixels! • “There is a tide … which, taken at the flood, leads on to fortune.” • Make stunning apps with unprecedented clarity and visual “ease of use.” • Take charge of your app’s experience across a wide range of new form factors and densities. • Opportunity to really shine vis-à-vis your competitors … • Or a risk of letting them shine vis-à-vis your apps

22. Resources • 3-017: “Power-up your Desktop application with Windows 8.1” • 26th, 11:30, South Hall: Esplanade Ballroom 307, James Clarke • 2-150: “Beautiful app layout and scaling at all sizes” • 27th, 11:30, South Hall: Gateway Ballroom 104, Sarah McDevitt • 3-191: “Innovations in High Performance 2D Graphics with DirectX” • 26th, 14:00, North Hall: 135, Dan McLachlan • Whitepaper: High DPI support in Windows 8.1 • http://go.microsoft.com/fwlink/p/?LinkID=307061 • Desktop samples • http://code.msdn.microsoft.com/windowsdesktop

23. Required Slide *delete this box when your slide is finalized Your MS Tag will be inserted here during the final scrub. Evaluate this session • Scan this QR codeto evaluate this session and be automatically entered in a drawing to win a prize!