WinForms - Fluent Design Form and Acrylic Effects (v18.1)

The idea of partially transparent window elements dates back to the Aero effect in Windows 7. In latest Windows 10 builds Microsoft is introducing Acrylic, which is explained in this article relating to UWP. To illustrate, this image shows a form with a partially transparent Accordion control:

Fluent Form

As a consequence of Microsoft’s Fluent Design initiative, many developers of modern applications like the one in the picture make three important choices for their UI implementations:

  • They implement adaptive layout, so application windows look good at different screen sizes
  • They show a navigation bar that utilizes Acrylic and the Reveal Highlight effect
  • They use a Hamburger menu, which plays an important role for adaptive layout scenarios

Fluent Design for WinForms

To enable you to create similar applications for Windows Forms, we took several steps in v18.1. First, we created a new Form control called FluentDesignForm. As a replacement of the standard Form, this is similar to our XtraForm, RibbonForm and TabbedForm, but it is also very different because it combines several connected elements:

  • An Accordion Control for navigation, with our new Hamburger Menu style applied

  • The Fluent Design Form Control takes control of the form header area and allows you to add buttons, editors and labels onto its surface

  • The Fluent Design Form Container holds the form content

Elements of a Fluent Design Form

Partial transparency

Set FluentDesignForm.EnableAcrylicAccent to true to enable the Acrylic effect for the Accordion Control. At the same time, the Reveal Highlight effect is also activated, imitating a soft light source moving along with the mouse pointer.

Reveal Highlight

Note that both effects are enabled in Windows 10 Version 1803 (OS build 17134), which is required to see these effects in action! The Fluent Design Form detects your Windows build and automatically uses DirectX rendering to paint these effects, if possible.

Adaptive layout

As I mentioned above, adaptive layout is the final important component of Fluent Design, and our new Form implements this using two threshold values for its width. When a user resizes the form, the Accordion Control automatically change its DisplayMode depending on the width.

Adaptive Layout

Accordion integration

The Accordion Control can integrate with the Fluent Design Form in two modes: a “traditional” mode where the form header is the topmost element, and a “full-size” mode where the Accordion stretches to the top of the Form.

Full-Size Accordion

Note that the full-size mode works best with modern flat skins, so it currently requires either The Bezier or one of the Office 2016 DevExpress skins.

Please share your thoughts with us!

We really hope you will provide us with some feedback on this new feature set. Do you like this new Form, and the idea of Fluent Design in general? Would you consider using them in your next application? Or do you rather think these fancy new effects don’t have a place in a WinForms business app?

13 comment(s)

Are you planning this for VCL??

17 May, 2018

Any plans to implement Fluent design for VCL??

17 May, 2018

Beautiful.  I'll be using this for sure.  So FluentDesignForm.EnableAcrylicAccent and the Reveal Highlight are the only two things requiring Windows 10 1803, right?

Will it work when ForceDXPaint is off?

17 May, 2018

And to answer your question about whether they have a place in a WinForms business app.  It will in ours the next time some freshening up is due on the UI.  It's important to have a pleasing looking UI that is easy to locate all of the options without overwhelming the user by putting them all on the main form.  This helps achieve that in a great looking, modern way.  The Bezier skin was a big step in modernizing the look, and this is a great addition.  I almost wish I could start from scratch so I can use this throughout.

17 May, 2018

Awesome improvements, as always.

Looks pretty good.

Any improvements for windows forms are excellent news.

17 May, 2018

Beautiful, I await him anxiously

17 May, 2018

@Christopher Jay the Accordion Integration feature requires that new Windows build as well.

As for the DirectX - nope, you don't need to call the global ForceDirectXPaint method. These are two independent scenarios: you can enable the form's Acrylic accent and it will draw these DirectX-based effects while the rest of the controls stay on the GDI renderer. Vice versa, if you call the ForceDirectXPaint, the Accordion will use the DirectX engine but only to draw the standard control appearance - Acrylic and Reveal Highlight effects are not enabled automatically.

18 May, 2018

This is really nice, and I'm looking forward to even more fluent-y things to come.

Could you detail the "right way" to produce something like your lead image, which has a ribbon? It seems that the main form would need to be both a FluentDesignForm AND a RibbonForm.

18 May, 2018

@Maris Lacis We are considering implementing the Fluent Design feature in our VCL components.

18 May, 2018

@Alex M Please do! Along with Hamburger & Accorderon as seen above it's a good reason for us to continue the paying the VCL subscription ...

18 May, 2018

@David Takus

No, you don't need to use a form inside of another form :) The "right way" is to make a Fluent Design form and enable all the settings you want, as described in this documentation article:

Then, drop a Ribbon onto the form - it should fit nicely without any additional customizations (note however, that to achieve a solid look you should apply either The Bezier or one of the latest Office skins).

There is an alternative way - create a Ribbon Form with a Ribbon, then add the Accordion, assign it to the form's NavigationControl property, and turn on the EnableAcrylicAccent property. Both properties are hidden from the IntelliSense for Ribbon Forms, but they are still functional. If you do so, you won't have the Adaptive Layout (this is the exclusive Fluent Design Form feature) and will not be able to decrease the Accordion height - it will always overlap the form title bar. For these reasons, this is the least recommended approach.

18 May, 2018

I suggest a way to change the hamburger icon, if not included already.  Our users range from complete computer novices to ex-Microsoft employees.  The less tech-savvy would probably be more likely to click the button to discover menu items if it was a different icon (perhaps our logo even).  While the current icon is naturally the best choice, we may need a way to change it for our Novice mode  :)

18 May, 2018

@Alex M Awesome news. Cant wait to try it out!

19 May, 2018

Please login or register to post comments.