Welcome to foxlearn
In this tutorial, I'll show you how to create a fluent design form using DevExpress control
As you know, the FluentDesignForm is a Windows 10-inspired form that features:
An embedded Hamburger Menu, Adaptive Layout mode for the Hamburger Menu, Acrylic Material effect, and Reveal Highlight visual effect
Right click on your project to create a new DevExpress Form
then delete the default main form and change the startup form in the program class to DevExpress Form
To create a fluent design form, you need to add a reference to DevExpress XtraBars library
then change inheritance from XtraForm to FluentDesignForm
You can add elements to the navigation control
then create user controls and you can also dynamically load the user control based on the elements you click
You can use the singleton pattern to create an instance for user controls.
Singleton pattern involves a single class which is responsible to create an object while making sure that only single object gets created.
You need to check your Fluent Design Form Container to make sure it does not contain the user control that you want to add
if it already exists, just open it again by calling the BringToFront method
You can also add a DefaultLookAndFeel to your window form application, then choose a skin that you would like to use
You need to create an Entity Framework Model to your project, you can use the Northwind database to play demo
Enter your sql account to connect to your sql server, then select the Categories and Products table from the Northwind database.
From the Visual Studio ToolBox drag a GridControl to your user control, then add a DataSource to the GridControl
As you can see, adaptive layout is the final important component of Fluent Design
and our new Form implements this using two threshold values for its width.
When a user resizes the form the Accordion Control automatically change its DisplayMode depending on the width.
Thank you for watching this video
