How to Create a Fluent Design Form in C#

By FoxLearn 7/13/2024 4:17:59 AM   16.56K
Creating a Fluent Design Form in a C# Windows Forms Application using DevExpress involves leveraging DevExpress's Fluent Design Form components and adjusting the appearance settings to achieve the desired Fluent Design style.

Fluent Design Form Devexpress

The FluentDesignForm is a Windows 10-inspired form that features:

- An embedded Hamburger Menu using AccordionControl

- Adaptive Layout mode for the Hamburger Menu

- Acrylic Material effect

- Reveal Highlight visual effect

To practice demo, you can create a new Windows Forms Application project.

devexpress template gallery

Next, Right-click on your project, then select Add DevExpress Item => New Item

Selecting Fluent Design Form, then click Add Item

You need to open your Program class, then remove your Form1, and then change to FluentDesignForm.

Opening your form designer, then select accordion control and click Run Designer link

devexpress accordion control 

You can add Group and Item to the accordion control

Creating Modules directory, then create the XtraUserControl

And don't forget to add a reference to the DevExpress.Tutorial library.

You can create a simple user control as shown below with devexpress hamburger menu fluent.

devexpress fluent design form

Right-clicking on your project, then add an ADO.NET Entity Data Model to your project. I'll use the Northwind database to practice demo.

entity framework

You can select Category, Product and Customer tables to practice the demo.

Next, Open you XtraUserControl then change inheritance from XtraUserControl to TutorialControlBase as shown below.

public partial class ucCategory : DevExpress.DXperience.Demos.TutorialControlBase //DevExpress.XtraEditors.XtraUserControl
{
    public ucCategory()
    {
        InitializeComponent();
    }
}

Adding a Form_Load event handler to category user control allows you to retrieve category data from the northwind database.

private void ucCategory_Load(object sender, EventArgs e)
{
    NorthwindEntities db = new NorthwindEntities();
    gridControl1.DataSource = db.Categories.ToList();
}

Do the same way for other user controls.

Opening your fluent design form, then create a LoadModuleAsync method that allows you to load user control into fluent design form container as shown below.

async Task LoadModuleAsync(ModuleInfo module)
{
    await Task.Factory.StartNew(() =>
    {
        if (!fluentDesignFormContainer.Controls.ContainsKey(module.Name))
        {
            TutorialControlBase control = module.TModule as TutorialControlBase;
            if (control != null)
            {
                control.Dock = DockStyle.Fill;
                control.CreateWaitDialog();
                fluentDesignFormContainer.Invoke(new MethodInvoker(delegate ()
                {
                    fluentDesignFormContainer.Controls.Add(control);
                    control.BringToFront();
                }));
            }
        }
        else
        {
            var control = fluentDesignFormContainer.Controls.Find(module.Name, true);
            if (control.Length == 1)
                fluentDesignFormContainer.Invoke(new MethodInvoker(delegate () { control[0].BringToFront(); }));
        }
    });
}

The FluentDesignFormContainer allows you to add control and show in the fluent design form.

You should check your module before adding it to FluentDesignFormContainer, and don't forget to use the BringToFront method to help you show the current module.

Adding a form_load event handler to the fluent design form that allows you to show default module.

// fluent design form devexpress
private void frmMain_Load(object sender, EventArgs e)
{
    this.fluentDesignFormContainer.Controls.Add(new ucNewInvoice() { Dock = DockStyle.Fill });
    this.itemNav.Caption = $"{accordionControlElementNewInvoice.Text}";
}

The itemNav is a BarStaticItem control allows you to show navigate information.

Adding a click event handler to the accordioncontrolelement allows you to show your module.

// devexpress hamburger menu fluent
private async void accordionControlElementNewInvoice_Click(object sender, EventArgs e)
{
    this.itemNav.Caption = $"{accordionControlElementNewInvoice.Text}";
    if (ModulesInfo.GetItem("ucNewInvoice") == null)
        ModulesInfo.Add(new ModuleInfo("ucNewInvoice", "DevFluentDesign.UI.Modules.ucNewInvoice"));
    await LoadModuleAsync(ModulesInfo.GetItem("ucNewInvoice"));
}

Do the same way for the rest of accordioncontrolelement.

// devexpress hamburger menu fluent
private async void accordionControlElementCustomer_Click(object sender, EventArgs e)
{
    this.itemNav.Caption = $"{accordionControlElementCategories.Text}/{accordionControlElementCustomer.Text}";
    if (ModulesInfo.GetItem("ucCustomer") == null)
        ModulesInfo.Add(new ModuleInfo("ucCustomer", "DevFluentDesign.UI.Modules.ucCustomer"));
    await LoadModuleAsync(ModulesInfo.GetItem("ucCustomer"));
}

A fluent design is a UI type developed by Microsoft and released with the 2017 for Windows 10. This design type mixes plastic-like translucency with 3D effects, advanced lighting, and new transitions between different application states.

VIDEO TUTORIAL