1 / 24

Making Your Desktop Apps Shine on High DPI Displays

Making Your Desktop Apps Shine on High DPI Displays. Steve Wright Sr. Program Manager 4-184. 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. High DPI machines are here!.

scot
Download Presentation

Making Your Desktop Apps Shine on High DPI Displays

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


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

  2. 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

  3. 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

  4. 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

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

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

  7. 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)

  8. Demo: Windows 8.1 Per monitor scaling

  9. 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

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

  11. 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

  12. 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

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

  14. 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

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

  16. 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

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

  18. 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).

  19. 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

  20. 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

  21. 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

  22. 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!

More Related