vcl-dxskinsfluentdesignform.md
A Fluent Design application form.
TdxFluentDesignForm = class(
TdxCustomFluentDesignForm,
IdxFluentDesignForm,
IcxLookAndFeelNotificationListener
)
The Fluent Design concept is created by Microsoft and released with the “Fall Creators Update” for Windows® 10. Fluent Design applications combine UI layout adaptability with complex lighting, transparency, and transition effects.
The TdxFluentDesignForm class substitutes TForm as the direct form ancestor in Fluent Design applications. The Fluent Design form is designed to use the Accordion or Hamburger Menu View in the NavBar control as the main application UI.
Fluent Design forms support background and reveal highlight effects for navigation controls.
Background effects highlight navigation controls and non-content areas in a Fluent Design application when its window has focus. The base background color depends on the active skin and palette. DevExpress Fluent Design forms support the following background effects:
Acrylic (Default)A semitransparent material that consists of five blended layers with individual noise effects and opacities. The acrylic material is a basic effect in the Fluent Design system.Standard (Blur)A simple blur effect applied to a semitransparent background.None (Transparent)A semitransparent background without additional effects. Use this option for maximum performance.
The following animation cycles through these effects:
Use the BackgroundBlur property to switch between available background effects.
Reveal highlight is a soft spotlight effect centered on the mouse pointer position within a UI area of a Fluent Design application. This effect brings user attention towards interactive UI elements when necessary and reveals their invisible or barely distinguishable borders.
The DevExpress VCL 25.2 Fluent Design Application template creates a new application project with a form derived from the TdxFluentDesignForm class.
To create a new Fluent Design application, click File | New → Other… in the main menu of your RAD Studio IDE. Select the DevExpress VCL 25.2 Fluent Design Application template.
The newly created form already has a configured TdxSkinController component and an embedded TdxNavBar control with the active Hamburger Menu View. A TdxLayoutControl component occupies the rest of the form to host other controls and components in your application.
The resulting base Fluent Design application applies acrylic and reveal highlight effects to a Hamburger Menu under Microsoft Windows® 10 Version 1803 (build 17064) or a newer operating system. Only the TdxNavBar control supports background acrylic effects. Embed all other controls into the TdxLayoutControl component to avoid any display issues related to Fluent Design effects.
To create a Fluent Design form without the application template, you need to create a new form in the RAD Studio IDE, add the dxSkinsFluentDesignForm unit to the uses clause, and replace TForm with TdxFluentDesignForm in the form class declaration as follows:
uses dxSkinsFluentDesignForm; // Declares the TdxFluentDesignForm class
// ...
type
TMyForm = class(TdxFluentDesignForm)
private
{ Private declarations }
public
{ Public declarations }
end;
#include "dxSkinsFluentDesignForm.hpp" // Declares the TdxFluentDesignForm class
// ...
class TMyForm : public TdxFluentDesignForm
{
private:
// Private declarations
public:
// Public declarations
};
The list below outlines key members[1] of the TdxFluentDesignForm class. These members allow you to configure a Fluent Design form.
The following public API members are derived from the standard TCustomForm class shipped with the VCL library:
CaptionSpecifies the form’s caption.PixelsPerInchSpecifies the base DPI value for scale factor calculations.ShowModalInvokes the form as a modal dialog.ScaledSpecifies if DPI awareness is enabled for the form.Visible | Hide | ShowHide or display the form.Width | Height | ClientWidth | ClientHeightAllow you to adjust form and client area dimensions.
Tip
Refer to the TCustomForm class description for detailed information on all standard form API members.
AdaptiveLayoutOptionsAllows you to change form layout behavior in Fluent Design applications.EnableAcrylicEffectsSpecifies if acrylic effects are enabled for the form and supported controls in a Fluent Design application.ExtendNavigationControlToCaptionSpecifies if the associated navigation control overlaps the form’s caption bar.BackgroundBlurSpecifies the active form background effect when acrylic effects are enabled.NavigationControlAllows you to associate the form with a Navigation Bar control that supports Fluent Design effects.
If you need to use a Ribbon UI in addition to an Accordion or Hamburger Menu, use the Ribbon form instead. This form can embed both TdxRibbon and TdxNavBar controls and supports Fluent Design effects for the latter.
GDI Scaled is a compatibility DPI awareness mode where the operating system scales text and GDI-based primitives automatically when a window is displayed on a high-DPI monitor.
Important
We do not recommend GDI Scaled mode for application projects with DevExpress components because this mode reduces font and image quality and prevents many effects from working correctly. For example, Aero Glass and similar non-client area effects are unavailable in GDI Scaled mode.
IcxLookAndFeelNotificationListener
Show 11 items
TObject TPersistent TComponent TControl TWinControl TScrollingWinControl TCustomForm TForm TdxForm TdxCustomFluentDesignForm TdxFluentDesignForm
Footnotes
See Also