Ticket T698630
Visible to All Users

WinForms Fluent Design and Acrylic Effects in XAF

Answers approved by DevExpress Support

created 6 years ago

Hello Santiago,

Thank you for your interest - our team will take it into account.

We don't have a ready XAF sample for this. Since an XAF WinForms app is a regular .NET WinForms app using DevExpress controls, it is possible to implement all these features manually.

You can consider the following implementation path for this quite advanced task:
1. Research general feature prerequisites and implementation considerations from https://community.devexpress.com/blogs/winforms/archive/2018/12/07/winforms-fluent-design-and-acrylic-effects.aspx and other materials on the subject.

2. Create a custom WinForms template for the main application window. To get started, you can use LightStyleMainForm or LightStyleMainRibbonForm, because they already use the AccordionControl. For more information on custom templates in XAF apps, check out eXpressApp Framework > Concepts > UI Construction > Templates > Template Customization. I must note that default XAF forms templates are generic and are designed for a large number of scenarios including single, tabbed and multiple document interfaces, ribbon and bars menu, etc. It is possible that you will implement this task faster for a limited set of the most important scenarios only. For the latter, we recommend you start with a custom form template from scratch and just use our source code for inspiration/reference. In both cases, a good understanding of XAFs architecture, UI abstractions and underlying WinForms controls is still required.

3. Customize your custom template to get required layouts and look and feel. At the minimum, you may want to change the following:
3.1. Change the base form class from XtraForm to FluentDesignForm: WinForms Controls > Controls and Libraries > Forms and User Controls > Fluent Design Form.
3.2. Remove, add or rearrange required docking and navigation panels, toolbar and other UI elements to mimic the planned form layout.  Take special note that FluentDesignForm uses special FluentDesignFormControl and FluentDesignFormContainer instead of DockManager, BarDockControl and other docking controls in default XAF form templates. To get familiar with it, consider creating a regular FluentDesignForm using our Template Gallery and researching its structure and behavior in a non-XAF app first.
3.3. Create a custom Action Container based on AccordionControl and position it within the left panel instead of the default Action Container in SidePanel. To speed  your custom Action Container implementation, get inspiration from the SidePanelActionControlContainer.cs and related source files within the DevExpress.ExpressApp.Win\Templates source folder. For more information about AccordionControl settings, check out this WinForms documentation:
    WinForms Controls > Controls and Libraries > Navigation Controls > Accordion Control > Hamburger Menu View Style
    WinForms Controls > Controls and Libraries > Navigation Controls > Accordion Control > How To: Replicate the appearance and behavior of the DevExpress Demo Center's Accordion Control

    Comments (1)
    SM SM
    Santiago Moscoso 6 years ago

      Thanks for the guidelines, Dennis. I'll see what I can achieve.

      Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

      Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.