Built-in Fading Animation

• Apr 04, 2024
• 2 minutes to read

UI elements in DevExpress controls provide built-in support for fading animation, which is played in response to mouse hover events. The current implementation includes fading animation support for the following UI elements:

• Scrollbars in DevExpress controls;

• Buttons in standalone and in-place editors from the ExpressEditors Library;

• Borders and background in standalone editors from the ExpressEditors Library;

• Bar items, tabs, tab groups, and the Application Button in the Ribbon control shipped with the ExpressBars Suite. For more information, refer to the “Fading Animation” section of the Ribbon Control topic;

• Bar items in standard toolbars and menus built with the ExpressBars Suite;

• TcxButton controls.

Fading animation is played for these UI elements provided that the following conditions are met:

• The native style, skin, or Ribbon color scheme is applied.

• UI elements are not custom painted.

You can call the dxFader function declared in the dxFading unit to access a TdxFader object which allows you to control fading animation effects within an application.

Fading Animation Effects

Fading animation includes the fade-in and fade-out animation effects, which are played in the following pattern:

• A UI element fades-in when the mouse pointer enters its area.

• A UI element fades-out once the mouse pointer leaves its area.

You can customize the animation speed and smoothness via the dxFadeInDefaultAnimationFrameCount, dxFadeInDefaultAnimationFrameDelay, dxFadeOutDefaultAnimationFrameCount, and dxFadeOutDefaultAnimationFrameDelay global constants.