Fluent Design UI

• Nov 15, 2023
• 4 minutes to read

The Fluent Design concept is introduced by Microsoft and released with “Fall Creators Update” for Windows® 10 (Version 1803, build 17064). Fluent Design applications aim to create an intuitive and immersive user experience. Fluent Design features include the following:

• Minimalistic and single-purpose UI layouts.
• Separate views and windows for independent application parts.
• Soft visual effects that draw attention towards navigation controls.

Fluent Design Forms

DevExpress controls ship with two form classes that allow you to create VCL Fluent Design applications according to Microsoft’s guidelines:

TdxFluentDesignForm

A form with a side navigation bar.

TdxRibbonForm

Allows you to combine a Ribbon UI with a side navigation bar.

Fluent Design Effects

Fluent Design forms support background and reveal highlight effects for navigation controls.

Background Effects

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. DevExpress Fluent Design forms support three 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.

Blur

A simple blur effect applied to a semitransparent background.

Transparent

A semitransparent background without additional effects. Use this option for maximum performance.

The following animation cycles through these effects:

Use a Fluent Design form’s BackgroundBlur property to switch between available background effects.

Reveal Highlight

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.

Create a Predefined Application from a Template

To create a project from a template, click the Click File | New → Other… item in the IDE’s main menu to invoke the New Items dialog. Then, select the DevExpress VCL 23.2 Fluent Design Application template.

The template creates a new application project with a form derived from the TdxFluentDesignForm class. The new 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 template automatically adds support for Microsoft Windows® 8 to the application manifest required to use the layout control as a container in Fluent Design applications.

The created base Fluent Design application applies the acrylic and reveal highlight effects to the Hamburger Menu.

Now, you can embed all other controls into the TdxLayoutControl component to avoid display issues related to Fluent Design effects.

Create a Custom Application

Follow the listed steps to create a Fluent Design VCL application:

1. Derive an application form from a Fluent Design form class.
2. Place a TdxSkinController component on the form and set the component’s NativeStyle and UseSkins properties to False and True, respectively.
3. Use the TdxSkinController.SkinName property to select a skin.
4. Place a TdxNavBar control on the form and align the control to the left or right form border.
5. Select the AccordionView or HamburgerMenu view for the navigation bar control as described in the following topic: Tutorial 1 - Create a Layout.
6. Assign the control to the form’s NavigationControl property.
7. Place TdxLayoutControl to host all other controls in your application. This step is necessary because only the navigation bar supports Fluent Design effects, and all other controls can draw incorrectly on a Fluent Design form without a TdxLayoutControl or TcxGroupBox component.
8. Enable support for Microsoft Windows® 8 in the application’s manifest to allow the layout control to work correctly on the Fluent Design form. In RAD Studio Berlin or newer, you can open Project | Options → Application → Manifest File and enable the AutoGenerate option. Refer to the following topic for information on how to add Windows 8 support to the manifest in older IDE versions: DevExpress Manifest.
9. Position all other controls on the layout control.

Requirements

All Fluent Design effects are enabled only if the following conditions are met:

• An application is running under Microsoft Windows® 10 Version 1803 (build 17064) or newer.
• The form is not an MDI form and has no parent form.
• The form is skinned (that is, has a TdxSkinController component whose NativeStyle and UseSkins properties are set to False and True, respectively).
• The form has focus.