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.
Top Related