Design a Beautiful Flat Dashboard UI UX for Desktop Application in C# WinForm’s using Visual Studio

Designing a Beautiful Flat Dashboard Design (UI UX) without any help of framework or ready-made stuff just pure C#.

This is what what we will be creating. Just follow all my steps & you will get it right !

Introduction:

So over some years back people used to say like you can’t design an interactive UI UX for DA (Desktop Applications) like you can do in Web App’s. Well they were wrong, cause we can do the same in DA ! And without the help of any ready-made things, just pure C Sharp. Cause in web application’s you can use many framework’s or themes to improve UI UX. Desktop Application’s that are developed on C# also have third-party References like Dev Express (I will be making an article related to this topic soon), but we will not be talking about that in our current article.

1. Lets get to work !!

We will start by creating a WinForm project in Visual Studio. You can use shortcut key like Ctrl+Shift+N. Lets name it FDDAinM_1 (Flat Design Dashboard Application in Medium _1).

Creating a new project named FDDAinM_1 in Visual Studio

GitHub Repository: It’s your choice if you want to click “Create new Git repository”. It’s for people who manages a Git Repository and let their projects be accessed and altered in any way accordingly to License. All my repositories have a MIT License. I will teaching you more about Git Control repository in Visual Studio

2. Start by hard hammering to create a perfect structure:

This is how the original page / form looks like before changing any property

Right click on the form and click Properties.

• Scroll down in Windows Style tab you will see a property called ControlBox change it to false,it should be true by default.
• Now scroll up to another property called Text it’s value should be the name of form, in our case it’s Form1 erase it.
• Now scroll up a bit, change the property FormBorderStyle to FixedSingle (if you don’t want to re-size).
• Now finally scroll down and change the property StartPosition to CenterScreen.

This is what looks like after you applied the above properties.

3. Now start soft hammering :

On the left side pane you will see ToolBox, search Panel & FlowLayoutPanel, add two panels & one flow layout panel to your form. Change the color of each panel so you don’t get confused! For each panel implement the value to it’s correspondent Property named Dock:

P(Property) -> V(Value)

1. 1st Panel: Dock = Top, Color= 255, 254, 255, Right-Click “Bring to Front”
2. 2nd Panel: Dock = Fill, Color= 255, 255, 255
3. 3rd FlowLayoutPanel: Dock=Left, Color=10, 150, 170, (Lets name it Nav_Panel)

After applying the above values

4. Let’s put some powder & other stuff:

Set the properties of “Nav_Panel” (the 3rd one) to :

Property = Value

1. FlowDirection = TopDown
2. AutoSize = True
3. WrapContent =False

Add a Panel(lets name it header_panel) to Nav_Panel. Then add a Label & PictureBox to header_panel.

header_panel after above setting

Add a Button to Nav_Panel. Change it’s text to lets say “Admin”. Set it’s size according to the size of Nav_Panel. Apply following Settings to the button:

Property = Value

1. AutoSize = True
2. Dock = Fill
3. TextAlign = MiddleRight
4. Font = Constantia, 15pt, style=Bold
5. ForeColor = White
6. BackColor = 10, 150, 170
7. ImageAlign = MiddleLeft
8. Image = Add any icon you want i will prefer icons8.com)
9. FlatStyle = Flat
10. FlatApperance = (BorderColor: 41, 53, 65), (MouseDownBackColor: 230, 237, 183), (BorderSize: 0)
11. Margin = 3, 7, 7, 3

After applying the above Properties, copy the button and change it’s Text & Picture to your desire.

First button after changes

5. Let’s add some tools :

Now adding a custom ControlBox

Add Min, Close, About Us, & Logout Tool in window by adding buttons, add their respective Icon with following Properties :

Property = Value

1. BackColor= 255, 254, 255
2. FlatStyle= Flat
3. BorderSize= 0

Add some text and pictures for Decoration & Pie Chart for Analytics then it will look like this :

The main Dashboard Design for any Application

Thanks for reading this article !! It was worth it & I will also be linking this Project to GitHub Repository

Fin