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, DevExpress 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

Free DevExpress Products - Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We'll be happy to follow-up.
No Comments

Please login or register to post comments.