How to craft stunning modern desktop admin panel with data visualization
There is an adage that says, and I quote, “The next big thing is the one that makes the last big thing usable”. Bunifu UI framework always strives to improve your productivity in design and in adherence to the UI/UX heuristics.
Today we’re going to venture into crafting not only an elegant but also a modern admin panel user interface of a Motel. As we get started, let’s see what this UI is trying to depict.
· Well blended gradient background
· Overlay translucent panel
· Data visualization
In a nutshell, this is the design we want to achieve:
Secondly, let’s explore the Bunifu UI framework controls used in this design
Requirements
· Bunifu UI Framework (Bunifu UI WinForms & Bunifu DataViz)
· Icons8 app
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, for my case, I will name it “MotelAdminPanel” and set the Form border style to none.
Upon doing that, you can now search for Bunifu Gradient panel on your toolbox and drag the control on your windows form. Head on to the properties of the gradient panel and paste the following custom colors:
GradientBottomLeft: 255, 128, 0
GradientBottomRight: 192, 0, 192
GradientTopLeft: purple
GradientTopRight: 255, 192, 128
You’ll get this interface after doing that…
Now search panel from your toolbox and drag it on top of the Bunifu Gradient panel. Right click on it and select View code then paste the following code inside the Form’s constructor to bring about the translucency on your panel when you run the project:
panel1.BackColor = Color.FromArgb(185, Color.Black);After doing that, follow the following steps to design the title bar and the navigation bar of the admin panel:
- Drag a Panel and Dock it to the top of panel1 from above, head up to the properties section of the panel and change the Back-color to silver.
- Search for Bunifu Image Button from your toolbox and drag it to the right of your panel2 (repeat this twice), and then search for red, golden and green rounded filled circle from your icons8 app and use it as bitmaps, your design should look like this so far:
- Then let’s continue to design our navigation bar. Search for bunifu flat button from your toolbox and then drag it on the left of your panel1 (Repeat this until you have six BunifuFlatButtons on your screen).
- Rename the Flat buttons and set the appropriate icons as per our preview.
- Add Bunifu Picture box on top of the navigation bar and also set the image icon as per our preview.
By now, your design should look like this:
- Drag Bunifu label on top-center of your panel and set the following properties for your title-name:
Text: Monalisa Motel
Font-size: 30pt
Font-family: Agency FB
Style: bold
Let’s continue to design our content area, where we have three panels and Bunifu Dataviz. We will start with the one shown below:
- Drag a panel to the left of your content area and set the Back-color to:
panel3.BackColor = Color.FromArgb(55, Color.Black);- Add the above controls as shown on the preview.
Your design should look like this so far:
Now let’s finish up with the two remaining panels then we visualize the data.
- Drag another panel on your content area, then use the code below to set the back-color:
panel4.BackColor = Color.FromArgb(55, Color.Black);
- Add the above controls as shown on the preview.
Do the same for the third panel to achieve this design:
So far, your design should look like this:
Finally, were here… Data Visualization!
Data visualization nowadays has been simplified unlike the ancient times. Thanks to Bunifu Dataviz, your data is brought to life. Follow the steps below:
- Firstly off, search for Bunifu DataViz from your toolbox, then drag it on your panel.
- Click on the dragged control and head to its properties section and rename it BunifuCharts1.
- After doing that, right-click on your panel then select view code, and add the following code:
- Upon pasting the code, you now need to add a Timer, so you search for timer from your toolbox then drag it on your Form. Head to the properties of the Timer and set it as shown below:
Now double-click on the timer and add the following code inside the curly brackets:
timer1.Stop();loadChart1();
…also on your form_load, add:
loadChart1();- Now one more step to bring motion to your borderless form: drag Bunifu FormDock to your form then add “bunifuGradientPanel1” as the title bar in the FormDock’s TitleBarOptions property.
Now build and run your project and you’ll get this UI:
And that’s just about it folks!
Conclusion
Thank you, folks, and I hope you find this article inspirational. You may find the source code on GitHub: https://github.com/peterkiptoo/MotelAdminPanel, Happy coding, Ciao.
