How to design a Sales Monitoring Dashboard Using Bunifu UI and WinForms

“To design is much more than simply to assemble, to order, or even to edit: it is to add value and meaning, to illuminate, to simplify, to clarify, to modify, to dignify, to dramatize, to persuade, and perhaps even to amuse. To design is to transform prose into poetry.” –Paul Rand

Today we are going to venture into designing a dark UI for Sales Monitoring using WinForms and Bunifu UI framework. And without further ado, let’s see what we want to achieve…

So let’s get started, first of all we are going to take a look at the controls used in this design and the requirements you need to get started:

Requirements

· Bunifu UI Framework (Bunifu UI WinForms & Bunifu DataViz)

· Icons8 app

·Pattaya font for the title and Encode sans semi-bold for the other labels

Here is a quick tutorial on how you can install Bunifu Framework. Let’s get started…

Open your visual studio and create a new windows form project, in my scenario I have named it Monitoring dashboard…

Secondly, let’s design our title-bar and navigation bar which entails a panel, bunifu picture box and five bunifu flat buttons.

Drag the controls(Bunifu picture box & Bunifu Flat buttons) from your toolbox and align them on the left of your container, but for the panel you dock it to the top of your Form, and also drag Bunifu Ellipse to your Form to bring about the curvy edges as shown below…

On the title bar, add three bunifu image buttons on your left also drag a label, Image button & picture box to your right and set the icons as per the preview.

Let’s now design the content area which entails three bunifu shadow panels, drag three shadow panels from your toolbox and resize them on your container to achieve the design below…

Let’s now continue with adding content in our design starting with the upper-left which is Recent Activities as per our preview. Follow the following steps to achieve the design:

• Click on Project in your visual studio and create a new user control, for my case I named it Activities…

• Drag in the controls to the user-control as shown below:

And as you can see from the GIF above, there is a loader that syncs before the controls are displayed, so add a timer from the toolbox to Form1 and set the following properties:

Double-click on the timer icon and add the following code inside the tags:

activities1.Show();

Let’s proceed with designing the lower part of the container by adding controls to the shadow panel as shown below:

Next we are going to proceed to the upper-left part of the container where we have data visualization. So follow the following steps to achieve the design:

• First of all, drag Bunifu DataViz from your toolbox to the container.
• Rename and resize the control, for my case I named it BunifuCharts1
• Adjust the AxisGridColors on the properties section to match the background color which is:

41, 41, 37

• Now head to the code section by right-clicking on the designer and click on view-code
• Add the following code to generate the charts:

Lastly, let’s design the loader that appears On-load:

• Go to

https://loading.io/ and download a GIF loader of your choice

• Drag Bunifu picture box from your toolbox to the Form and set the GIF as its Bitmap.
• On your Form_load add:

            bunifuPictureBox3.Show();
            activities1.Hide();
            bunifuCircleProgress1.Hide();
            bunifuCircleProgress2.Hide();
            bunifuCircleProgress3.Hide();

• …also inside the tags of your timer, add:

            loadChart1();
            bunifuPictureBox3.Show();
            activities1.Hide();
            bunifuCircleProgress1.Hide();
            bunifuCircleProgress2.Hide();
            bunifuCircleProgress3.Hide();

And just like that, you achieve the design for the Monitoring Dashboard.

Conclusion

Thank you, and I hope you find this article inspirational and intuitive. You can find the source code on GitHub: https://github.com/peterkiptoo/MonitoringDashboard-dark-UI- ,Happy Coding.