[CLONED FROM [https://community.devexpress.com/blogs/winforms/archive/2018/12/07/winforms-fluent-design-and-acrylic-effects.aspx]](CLONED FROM [https://community.devexpress.com/blogs/winforms/archive/2018/12/07/winforms-fluent-design-and-acrylic-effects.aspx])
This is awesome.
Any example of how to use it on a XAF application?
WinForms Fluent Design and Acrylic Effects in XAF
Answers approved by DevExpress Support
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