DevExpress Fluent Design Form in C#

This tutorial will show you how to create a Fluent Design Form using DevExpress Control in C#.NET Windows Forms Application

To play the example below you should download and install DevExpress from https://www.devexpress.com

Right click on your project, then create a Fluent Design Form from your DevExpress menu or you can change inheritance from Form to FluentDesignForm

We will use Entity Framework to retrieve data from the sql database. In this tutorial, I'm using the Northwind database to practice the demo

If you don't have the Northwind database you can download it form http://foxlearn.com or http://c-sharpcode.com

Create a XtraUserControl with name is ucProducts, then drag a LayoutControl from your visual toolbox to your XtraUserControl.

Next, drag a GridControl from your visual toolbox into your LayoutControl, then add a binding source to your GridControl

public partial class ucProducts : DevExpress.XtraEditors.XtraUserControl
{
    private static ucProducts _instance;

    public static ucProducts Instance
    {
        get
        {
            if (_instance == null)
                _instance = new ucProducts();
            return _instance;
        }
    }

    public ucProducts()
    {
        InitializeComponent();
    }

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

Similarly for ucCategories

public partial class ucCategories : DevExpress.XtraEditors.XtraUserControl
{
    private static ucCategories _instance;

    public static ucCategories Instance
    {
        get
        {
            if (_instance == null)
                _instance = new ucCategories();
            return _instance;
        }
    }

    public ucCategories()
    {
        InitializeComponent();
    }

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

Add code to handle your main form as the following

public partial class frmMain : DevExpress.XtraBars.FluentDesignSystem.FluentDesignForm
{
    public frmMain()
    {
        InitializeComponent();
    }

    private void aceCategories_Click(object sender, EventArgs e)
    {
        if (!container.Controls.Contains(ucCategories.Instance))
        {
            container.Controls.Add(ucCategories.Instance);
            ucCategories.Instance.Dock = DockStyle.Fill;
            ucCategories.Instance.BringToFront();
        }
        ucCategories.Instance.BringToFront();
    }

    private void aceProducts_Click(object sender, EventArgs e)
    {
        if (!container.Controls.Contains(ucProducts.Instance))
        {
            container.Controls.Add(ucProducts.Instance);
            ucProducts.Instance.Dock = DockStyle.Fill;
            ucProducts.Instance.BringToFront();
        }
        ucProducts.Instance.BringToFront();
    }
}

You can use the singleton pattern to create an instance for your user control. The singleton pattern ensures your class only creates a single instance

You can view the video below to know more details