Making Your Desktop Apps Shine on High DPI Displays

Steve WrightSr. Program Manager4-184

High DPI machines are here!What’s new in Windows 8.1 for DPIThe DPI opportunity for developersDeep dive into nuts and bolts: Win32, D2D, WPF

Agenda

1080p screens with 150% scaling now!2560x1440 screens with 200% now!3200x1800 screens with 200% soon!3840x2160 screens are coming

High DPI machines are here!

200% desktop scalingPer-monitor optimized desktop scalingAPI support for desktop per-monitor scalingNew CPL UX for per-monitor scaling

8.1 has full desktop and store app support for high DPI

What’s new in Windows 8.1 for DPI

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

More resolution, more content? NO! Clearer content; more detailed content!

What high DPI buys your customers:100% (~96 DPI) 200% (~192 DPI)

How is desktop content scaled?Partnership between Windows and the application: you choose the level of investment you will make; Windows does the rest.

DPI Unaware

System DPI Aware

Apps render in a sandbox at 100%DWM scales output

Input stack scales inputBitmap scaling: can be blurry

(on high DPI displays)

Apps render at sys DPIDWM scales if sys DPI !=

per monitor DPICan be blurry (on low DPI secondary)

App renders at per monitor DPIDWM never scales

Content is always crisp

PerMonitor

DPI Aware

Demo: Windows 8.1 Per monitor scaling

Plan how to scale your contentLet Windows know you’ll do the workFigure out the right scale factorListen for changes in scale factor

Per-monitor aware app: nuts and bolts

Demo: Writing a per-monitor aware Win32 app

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

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

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:

typedef enum 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;

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

Demo: Writing a per-monitor aware D2D app

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

Demo: Writing a per-monitor aware WPF app

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

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 customerOr if your app requires pixel-perfect rendering on all available displays

DPI aware perceptable differentiator on high DPI displays.

3 options – which one should you choose?

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

“There is a tide … which, taken at the flood, leads on to fortune.”

Summary: embrace the pixels!

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

Evaluate this session

Scan this QR code to evaluate this session and be automatically entered in a drawing to win a prize!

© 2013 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.