[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 and Skin Colors
  [Expand]Filtering UI Context
   Find Panel Syntax
  [Collapse]Graphics Performance and High DPI
    DirectX Hardware Acceleration
    How To: Draw and Use SVG Images
  [Expand]Scaffolding Wizard
  [Expand]Formatting Values
   HTML-inspired Text Formatting
  [Expand]Menus
  [Expand]Tooltip Management
  [Expand]Save and Restore 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]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Graphics Performance and High DPI

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 activate DPI-awareness for your application, do one of the following:

  • Option #1 - Enable the DPI-Aware setting in the Project Settings Page (starting with version 18.1).
  • Option #2 - Set the dpiAware parameter to true or the dpiAwareness parameter to system in the application's manifest file.

    To add a manifest file, 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".

Expanded High DPI Support in DevExpress Controls

DevExpress controls and components are able to recognize and take advantage of high-DPI screens automatically. Enable DPI-aware mode as described above and you will instantly get an 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.

To turn DevExpress scaling off, disable the static WindowsFormsSettings.AllowDpiScale setting.

Expanded Additional Settings

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

Expanded Development Guidelines and Known Issues

The following tips will help you better scale apps across multiple screen resolutions.

  • Keep your layout flexible and adaptable to possible changes: use auto-sized (avoid setting MaximumSize) and docked controls. If possible, use the DevExpress Layout Control to arrange UI elements across your form.

    The figure below illustrates scaling impact on the DevExpress SearchControl, when MaximumSize is used (in this example, width was limited to 300 pixels via the control’s MaximumSize property).

    This issue arises only when you explicitly limit control size in code. If a control was initially designed with limited size values, it scales correctly at higher DPI settings.

  • When the parent form is scaled, child form controls will change size. This will impact applications with custom layout behaviors.
  • Design your applications at 96 DPI (100%). Downscaling a form developed at higher DPI values may lead to unexpected issues. If you must create your application at resolution (greater than 96 DPI), you should consult the following KB article for additional guidance.
  • When and wherever possible, use vector images for item icons. Vector images scale much better than standard raster images. The following tutorial describes how to draw a valid SVG image: SVG tutorial. Note: Vector icons with animations and external css styles are not supported..
  • Use the DPIAwareImageCollection component to supply raster images/icons to DevExpress controls. At high-DPI settings, this collection automatically replaces default images with larger counterparts.
  • Enable DirectX Hardware Acceleration to improve application execution speed on high resolution displays.
  • Due to a known bug, deploying DPI-aware applications using ClickOnce is not possible.

Is this topic helpful?​​​​​​​