Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Collapse]WinForms Controls
  Prerequisites
 [Expand]What's Installed
 [Expand]Build an Application
 [Expand]Controls and Libraries
 [Collapse]Common Features
  [Expand]Data Binding Common Concepts
  [Expand]Data Source Wizard
  [Expand]Expressions
  [Expand]Behaviors
  [Expand]Application Appearance
  [Expand]Filtering UI Context
  [Collapse]High DPI Support
    DirectX Hardware Acceleration
    How To: Draw and Use SVG Images
  [Expand]Scaffolding Wizard
  [Expand]Formatting Values
   HTML Text Formatting
  [Expand]Menus
  [Expand]Tooltip Management
  [Expand]Saving and Restoring Layouts
   Clipboard - Copy and Paste Operations. Data Formatting
   Version Compatibility: Default Property Values
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

High DPI Support

This document contains information on High DPI support provided by DevExpress controls.

Expanded Foreword

The goal of this article is to explain how DevExpress controls help you in developing applications that can run on high DPI devices without loss of quality. To learn the theory on what DPI is and how different Windows versions scale your applications depending on DPI settings, refer to the following links.

Expanded DPI Awareness

An application can look differently on high DPI devices depending on whether or not this app is DPI-aware.

  • Non-DPI-aware applications leave all scaling to the operating system. The OS will render your application under its native 96 DPI (the default 100% DPI value) and then scale it up to the actual device DPI. This keeps your application layout intact at the cost of quality - blurry images, fuzzy captions, thick separator lines and borders, etc. Any desktop Win32 application is non-DPI-aware by default and thus, not adapted for running on high DPI screens.

  • DPI-aware applications are not affected by the OS. Such applications render themselves to fit the actual DPI of a screen and provide a much better visual experience. On the downside, you will need to manually implement such DPI awareness - retrieve the current monitor DPI value, listen for DPI changes and respond to these changes by redrawing the application, scaling its content, applying different icon sets, etc.

To turn your desktop application into DPI-aware, right-click the project in Solution Explorer VS window and select "Add New Item" (or press the CTRL+SHIFT+A shortcut). Search for the "Application Manifest File" item, then click "Add".

Add the <dpiAware> element to the manifest code and set its value to true.

For projects built under the .Net Framework of version 4.6 and higher, it is also recommended to set the EnableWindowsFormsHighDpiAutoResizing parameter to true in the application configuration ("app.config") file.

Expanded High DPI Support in DevExpress Controls

DevExpress controls and components provide a decent DPI awareness level automatically. Include the valid application manifest file as described above and you will instantly get a DPI-aware application that renders itself correctly on high DPI devices. The following screenshot is a close-up of the Touch-Enabled Hybrid App demo run under 192 DPI.

The figure on the left illustrates the default non-DPI-aware rendering (note the blurry content, increased margins and borders). The right figure shows the same demo with DPI awareness turned on, no custom code added.

Expanded Additional Settings

In addition to this automatic DPI awareness, certain DevExpress controls and components provide features that should be used manually.

Expanded Common Developing Guidelines and Known Issues

To facilitate correct content scaling in DPI-aware applications, follow the tips below.

  • Keep the layout flexible and adaptable to possible changes. This means using auto-sized and docked controls wherever possible. Ideally, use the Layout Control to arrange UI elements across your form. The figure below illustrates a sample SearchControl, whose width is limited to 300 pixels by the MaximumSize property. Two following figures illustrate the same control displayed under 192 DPI (200%). Whilst the search box in a DPI-aware application looks better compared with default OS bitmap scaling, the MaximumSize property prevents it from gaining an adequate size. For this reason, the default prompt text is truncated.

  • If the parent form is scaled, child form controls will change their sizes. Keep that in mind if you implement custom layout behavior.
  • Design your applications under default 96 DPI (100%). Downscaling a form developed under higher DPI values may lead to possible issues.
  • Use vector images for item icons, since they scale way better than ordinary raster images. Refer to this tutorial to learn more about drawing valid SVG images. Vector icons with gradients, animations and external css styles are currently not supported.
  • If you prefer traditional raster images to vector ones, utilize the DPIAwareImageCollection component to supply icons to DevExpress controls. This collection automatically replaces default images with their bigger sized counterparts at higher DPI settings.
  • Enable the DirectX hardware acceleration to significantly speed up your applications when running on high resolution displays.
  • Due to a known bug, deploying DPI-aware applications using ClickOnce is not possible.

How would you rate this topic?​​​​​​​