Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Collapse]WinForms Controls
  Prerequisites
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Collapse]Forms and User Controls
    XtraForm
    Ribbon Form
    Tabbed Form
    Fluent Design Form
    XtraUserControl
    Form Assistant
    Taskbar Assistant
   [Expand]Splash Screen Manager
   [Expand]Adorner UI Manager
   [Expand]Examples
  [Expand]Messages, Notifications and Dialogs
  [Expand]Editors and Simple Controls
  [Expand]Ribbon, Bars and Menu
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Property Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Expand]Diagrams
  [Expand]Gauges
  [Expand]Map Control
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]Printing-Exporting
  [Expand]PDF Viewer
   Reporting
  [Expand]Snap
  [Expand]TreeMap Control
 [Expand]Common Features
  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]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Fluent Design Form

The FluentDesignForm is a Windows 10-inspired form that features:

  • An embedded Hamburger Menu (AccordionControl)
  • Adaptive Layout mode for the Hamburger Menu
  • Acrylic Material effect (a partially transparent texture)
  • Reveal Highlight visual effect

This topic consists of the following:

Expanded Add Fluent Design Forms

To create a new project with a FluentDesignForm, use the DevExpress Template Gallery’s Fluent Design Application project template.

Expanded Convert Standard Forms to Fluent Design Forms

To convert an existing form to a FluentDesignForm, use the Convert to Fluent Design Form command, which is available from:

To convert the form manually in code, change your form's base class to FluentDesignForm. You also need to add the DevExpress.XtraBars library to your project.

Expanded Form Elements

A Fluent Design Form creates three controls when it is added to a project using the Template Gallery and Convert to Fluent Design Form commands:

  • AccordionControl with the HamburgerMenu view type enabled - Allows you to implement a menu (a navigation control) with custom commands arranged in a simple or hierarchical list.

    HamburgerMenu is one of two view types the AccordionControl provides (the AccordionControl.ViewType property is set to HamburgerMenu). This view type features:
    - the Hamburger button (expands/collapses the menu).
    - three display modes (Inline, Overlay and Minimal). The Fluent Design Form automatically switches between these modes when you resize the form. This functionality is not supported when the control's AccordionControl.ViewType is Standard. See the Adaptive Layout section below.

  • FluentDesignFormControl - The form's header, which displays the form's caption and allows you to show custom commands (bar item links) on its surface.
  • FluentDesignFormContainer - Add custom controls to this container to display them in the form's client region.

Expanded Acrylic and Reveal Highlight Effects

The FluentDesignForm.EnableAcrylicAccent setting enables the Acrylic Material (a semi-transparent texture) and Reveal Highlight effects for an embedded Accordion Control (Hamburger Menu).

Note

Both effects are enabled only if the application runs under Windows 10 Version 1803 (OS build 17134) or newer.

Expanded Adaptive Layout

With the Adaptive Layout functionality (enabled by default), the Fluent Design Form automatically switches the Hamburger Menu's display mode between Inline, Overlay and Minimal when you expand or shrink the form.

The table below describes the Hamburger Menu's display modes (AccordionOptionsHamburgerMenu.DisplayMode) and form widths that trigger display mode switching.

Hamburger Menu's Display Mode

Form Width

Inline
  • The Hamburger Menu is displayed as a side bar when collapsed, and in-line with the form content when expanded.
    Collapsing the menu enlarges the form's content area. Conversely, expanding the menu shrinks this area.

Wide

Width ≥ OptionsAdaptiveLayout.InlineModeThreshold (by default, 650 pixels)

Overlay
  • The Hamburger Menu is displayed as a side bar when collapsed, and as an overlay above the content area when expanded.

Normal

Width is between OptionsAdaptiveLayout.OverlayModeThreshold and OptionsAdaptiveLayout.InlineModeThreshold (by default, between 450 and 650 pixels)

Minimal
  • The Hamburger Menu is rendered as a top-aligned bar with a single item (Hamburger button) when collapsed, and as an overlay above the content area when expanded.
    Note

    The Fluent Design Form automatically sets the Hamburger Menu's DockStyle to Top in Minimal mode, rendering the menu as a bar. In other dock styles, the Hamburger Menu is rendered as a square Hamburger button.

Compact

Width ≤ OptionsAdaptiveLayout.OverlayModeThreshold (by default, 450 pixels)

The OptionsAdaptiveLayout.AdaptiveLayout option is hidden at design time. You can modify it in code as follows.

The Adaptive Layout functionality is not supported when the AccordionControl.ViewType property is set to Standard.

Expanded Hamburger Menu Overlaps Title Bar

By default, the Accordion Control (Hamburger Menu) occupies the entire form height in certain skins, overlapping the title bar.

When required, you can disable this behavior by overriding the ExtendNavigationControlToFormCaption virtual property.

Note

The title overlap feature is supported when:

  • Your form uses one of the following skins:
    - The Bezier
    - Office 2016 Black
    - Office 2016 Dark
    - Office 2016 Colorful
  • The application runs on Windows 10 Version 1803 (OS build 17134) or newer.

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