DirectX & GDI Render Modes | VCL (2024)

• May 02, 2024
• 5 minutes to read

This topic outlines UI and content rendering techniques used in DevExpress components, usage scenarios, and limitations of all supported render modes.

Standard Rendering Technique (GDI Mode Only)

Most DevExpress controls rely on standard GDI-based rendering mechanisms available in the VCL library and use a combination of GDI (TcxCanvas) and GDI+ (TdxGPCanvas) API-based canvases to draw content and UI elements. This rendering technique is suitable for most component usage scenarios while offering more freedom for draw routine customization. For example, you can handle an OnCustomDraw~ event of a DevExpress control that uses the standard rendering technique to override or complement a predefined UI element or content draw routine.

The standard rendering technique imposes no limitations and is available for all DevExpress VCL controls under all supported operating systems. All DevExpress VCL controls use GDI as the default render mode.

Universal Rendering Technique (All Render Modes)

With the evolution of VCL components and new hardware requirements (high-DPI (4K+) displays), we created an alternative rendering mechanism based on our universal canvas class (TcxCustomCanvas) to implement new render modes in graphics-rich controls. The TcxCustomCanvas class implements a common API for image and geometric primitive rendering operations to allow supported controls to seamlessly switch between render modes.

All controls that use the universal rendering technique do not have OnCustomDraw~ events that are available in other DevExpress controls. Therefore, you can rely only on skins and public API members for appearance customization. DirectX and GDI+ render modes can help you achieve better draw operation performance compared to GDI-based render modes on high-DPI (4K+) displays when a supported control draws large amounts of images, text, and UI elements with transparency, rotation, antialiasing, and animation effects.

Controls with Support for DirectX and GDI+ Render Modes

Only the following DevExpress controls use the universal rendering technique and can switch between GDI, GDI+, and DirectX render modes:

• The Chart control (TdxChartControl) that supports multiple series views (bar, area, line, pie, and doughnut) and allows you to display millions of data points.
• All controls that display images and support multiple appearance options and animation effects (TdxListViewControl, TdxGalleryControl TdxColorGallery TdxDBColorGallery TdxTileControl, and TdxTileBar).
• The Gantt control (TdxGanttControl).

DirectX Render Mode

A control in DirectX render mode creates a Direct3D device context and uses a Direct2D-based canvas (instead of a combination of GDI and GDI+ API-based canvases) to draw content and UI elements. This mode is the most beneficial on a client machine with a discrete graphics card, since calculation load shifts from CPU to GPU and bitmap storage relies on frame buffer objects in video memory instead of GDI-based images in system memory.

DirectX-Specific Requirements and Limitations

• The DirectX render mode is supported in Windows 7 Platform Update (with DirectX11) and newer.
• This render mode is unavailable if an application is in GDI Scaled mode because it draws DirectX-rendered controls unscaled at their original (unscaled) positions.
• All controls always rely on GDI and GDI+ draw calls at design time.
• A control’s Transparent property value has no effect in DirectX render mode, since the control has an opaque Direct3D device context that overlaps any background elements.

GDI+ Render Mode

A control in GDI+ render mode uses only GDI+ API-based canvases instead of a combination of GDI and GDI+ API-based canvases. Unlike the basic GDI render mode, controls can also apply the antialiasing effect to geometric primitives.

The GDI+ render mode is available on all supported operating systems but it can be slower compared to the basic GDI render mode if the displayed control does not draw semitransparent shapes.

Switch Between Render Modes

You can enable a render mode at the application level or at the level of an individual control. A render mode setting change affects only those controls that support multiple render modes. All other controls always use the GDI render mode.

Global Render Mode Setting

To change the active render mode application-wide, add a TdxSkinController component and assign a TdxRenderMode value to the component’s RenderMode property.

The global render mode settings affect an application if it contains at least one control that uses the universal rendering technique.

The following code example enables the DirectX render mode at the application level:

uses dxSkinsForm;// ... dxSkinController1.RenderMode := rmDirectX;

Control Render Mode Setting

To change the active render mode for an individual control that uses the universal rendering technique, assign a TdxRenderMode value to the control’s LookAndFeel.RenderMode property.

The following code example enables the DirectX render mode for an individual Chart control:

uses dxChartControl;// ... dxChartControl1.LookAndFeel.RenderMode := rmDirectX;