WinForms Fluent Design and Acrylic Effects

WinForms Team Blog
07 December 2018

Six months ago, we announced support for Fluent Design Form and Acrylic effects – new capabilities designed to replicate Microsoft’s next-gen UI metaphor. The purpose of this blog post is to detail our implementation and to solicit feedback from those of you planning to incorporate this new UI metaphor in existing/upcoming WinForms software projects. We hope to articulate why our implementation is on solid-footing when compared to those of others and the importance of DirectX in next-gen user experiences on the WinForms platform (as you may already know, our WinForms components can use DirectX rendering instead of GDI+).

Don’t be Fooled – The Correct Implementation Matters

Before we begin, it’s important to note that simple transparency does not equal “Fluent Design.” Fluent UI is far more complex than trivial transparency settings (said differently, it is not a simple TransparencyKey setting in Windows 7 Aero). Here’s a screenshot from Microsoft documentation that demonstrates how genuine Acrylic material functions: five separate layers with individual opacities and visual effects, designed to blend together to help create the appropriate visual effect.

Microsoft Documentation: Acrylic Material Layers

The same applies to the lighting effects Microsoft calls “Reveal Highlight”. The spotlight that follows one’s mouse pointer must be implemented correctly, otherwise it’s not a true “Reveal Highlight.”

Microsoft Documentation: Reveal Highlight Implementation

Our implementation of “Reveal Highlight” uses spot-specular lighting and color matrix effects and is applied to objects via an arithmetic composite. This requirement mandates use of DirectX and is simply impossible when using the traditional GDI+ renderer. It is one of the reasons we moved to DirectX rendering and one of the reasons you can count on us to continually push the boundaries of WinForms development forward. If you’re considering Fluent UI for your next WinForms app, the following video will demonstrate some of the things you can accomplish with our WinForms component libraries.

If you’re ready to incorporate this new design metaphor in your next WinForms app, follow these simple steps:

  1. Review Microsoft’s guidelines and learn the “do's” and “dont’s” of Fluent design. For instance, this article explains how to distribute Acrylic material across a form.
  2. Enable DirectX hardware acceleration.
  3. Use the DevExpress Fluent Design Form when you need a form with Acrylic material.
  4. Populate a Fluent Form’s embedded Hamburger Menu (Accordion Control) with required items and groups.
  5. Apply either a vector or any DevExpress Office 2016 raster skin for the best possible visual experience (and compatibility with all Fluent Design Form features).
  6. Change the static WindowsFormsSettings.ScrollUIMode property to “Fluent” to provide scroll bars optimized for the Fluent UI.

For ideas and inspiration, please explore our “Fluent Mail Client” demo (available in our most recent distribution) at your convenience.

Your Feedback Matters

9 comment(s)
Santiago Moscoso
Santiago Moscoso

This is awesome.

Any example of how to use it on a XAF application?

8 December, 2018
Sigurd Decroos _
Sigurd Decroos _

Please support MDI forms...

9 December, 2018
Peter van den Beemt
Peter van den Beemt

Yes, please support MDI forms

9 December, 2018
JUAN CARLOS LASHERAS PASCUAL
JUAN CARLOS LASHERAS PASCUAL

For when devexpress in Spanish?

10 December, 2018
Dennis (DevExpress Support)
Dennis (DevExpress Support)

@Santiago Moscoso:

I've answered you in the Support Center ticket created on your behalf: www.devexpress.com/.../winforms-fluent-design-and-acrylic-effects-in-xaf.

10 December, 2018
Stanislaw.Tristan
Stanislaw.Tristan

@Dennis

Can you make this ticket public?

11 December, 2018
Dennis (DevExpress Support)
Dennis (DevExpress Support)

@Stanislaw.Tristan: Published.

12 December, 2018
Heiko Mueller
Heiko Mueller

Because 'fluent' design is not just a transparent hamburger menu on the left side of a window: Are there plans in the near future to support other elements such as transparent windows/popups etc.?

Very nice would also be a 'component' that can be used to create a image/bitmap with this blurry/ transparency effect from a other given bitmap/image, because this compoinent can be used to create some visual effects for any kind of control/form...

12 December, 2018
Dmitry Babich (DevExpress)
Dmitry Babich (DevExpress)

@Heiko

Yes, currently we collect user feedback, and probably we will add acrylic support in other controls in the future. It would be very helpful if you describe your scenarios and controls where you would like to see Acrylic. Please contact us at winformsteam@devexpress.com or just create a new ticket in Support Center.

19 December, 2018

Please login or register to post comments.