How I designed a PC Maintenance UI/UX dashboard

Published in

Bunifu Framework

10 min readFeb 14, 2018

In this article we’ll be creating an inspirational desktop dashboard, courtesy of Lukas Dubay ‘s Cleanup app dashboard concept using Bunifu UI and Microsoft Visual Basic PowerPacks controls that we will download and integrate it in Visual Studio.

Here’s a sneak preview of the design we shall be working on:

Credit: Cleanup app dashboard concept by Lukas Dubay

Controls Featured

Here’s the controls’-set featured in the dashboard.

Let’s take a quick preview of them before we begin our design tour:

Prerequisites

I will be using Bunifu Framework for WinForms in this example. If you do not have premium a premium version feel free to download the free trial here. Also you need to have the icons8 software and a just in color picker for selecting colors and icons respectively. Having downloaded the icons8 we need to set a folder for the icons in the My documents directory where we will be dragging the icons from the icons8 software and then later importing them to our visual studio project where necessary. For larger images we can use an image with 45 pixels and a small image with 25 pixels.Take note the color of the images when choosing your images.

“If I had an hour to solve a problem solution. I would spend the first fifty minutes determining how to… Frame the problem …for once I know the proper question to ask, I can solve the problem in less than 5 minutes.” — Albert Einstein

The Design Process

The first thing we need to do is to start a new project in Visual Studio, then choose a C# project and name your project as Dashboard demo. Once the form appears, set an appropriate size that can fill your controls then drag the BunifuElipse towards the form:

The next step is to right-click on the BunifuElipse tool that you dragged in the form; select Properties and then change the property value ElipseRadius to ‘9’:

The next move that we need to perform is to set our layout structure first using the panels and then later we can apply the appropriate colors from our sneak preview with the help of Just Color Picker so that we can choose the appropriate color for the panels and the form:

Before we forget, let’s make sure that we can drag our form to any part of the screen. We’re going to write some code in the code view window to ensure that we our form is “draggable”.

The key features of this code will be:

To create an object instance of the Bunifu drag class.
Then we will use the top panel mouse-click events such as MouseMove, MouseDown and MouseUp events, and use the methods of the Drag class in those events to implement the appropriate functionality of it.

To automate the creation of the panel’s click events, go to the Events Properties section and double-click on the above-mentioned events...

Then add the following sample codes: 💪

Codes to Drag a form to any part of your screen in c#

Codes to Drag a form to any part of your screen in vb.net

Your form should drag effortlessly as below 😊

The Top Navigation Controls

After laying out the structure of this dashboard we can then set our controls on it. The first controls that we need to have on our dashboard are the top-bar navigation controls which consist of four BunifuImageButtons that have icons on them.
The procedure is very simple... Drag the BunifuImageButton to the upper-left area of the panel and set the BackColor property to match with that of our preview. Thereafter, we need to remove the existing image by going to the Image property, and selecting Project resource file from the dialog then choosing the none option.

Next, drag a PictureBox to the BunifuImageButton, make it smaller by resizing, then change the BackColor property to have the same color as that of our BunifuImageButton. Finally add our “home” image to the PictureBox by selecting it, and setting Image property to the “home” image in the Project resources file dialog. Our image is now set…

So now we need to make our menu button and the minimize and close buttons using the BunifuImageButton. What will be required to be done is that we shall drag the BunifuImageButton and set the appropriate locations for the menu,minimize and close buttons respectively as per the preview that we just saw.
The procedure is the same but here we will not use a picturebox again to set our pictures. The only required property-changes are setting the background color to transparent for all image buttons and then choosing the appropriate image for all the 3 buttons. Also, take a keen note that there’s a label after the menu button that we must create using our BunifuCustomLabel; you also need to set the ForeColor property to the appropriate color and the font family set to Microsoft YaHei UI; the font size is 12pt:

Finally now we are done with our top navigation bar 😄… We now need to go to our next section and create the exact prototype that our preview has where some several components have been added.
The following are the needed components BunifuCircleProgressbar, BunifuThinButton, BunifuImageButton, an Oval shape (from the Microsoft PowerPacks Library), and a BunifuCustomLabel.

I will take you through creation and customization of the BunifuCircleProgressbar, BunifuThinButton,User-controls and customizing the oval shape. For the remaining controls, we have already done a simple tutorial above. I hope you can incorporate them…

So lets set our label written “Lukas’s PC turned Up to” by first setting its font family to Microsoft YaHei UI, with a font size of 12pt. Then set its appropriate color to the one shown in the preview with the help of the Just-Color-Picker. Also take keen note of the label’s location:

Customizing the BunifuCircleProgressbar

Ensure that the first things to include in your form is: One Timer control and a BunifuColorTransition Control.
Drag the BunifuCircleProgressbar and resize it to an appropriate size then set out properties like the BackColor to transparent; the ProgressBackColor property should be set to RGB color: 59, 66, 88. For the ProgressColor, we shall introduce some C# codes and use timers and the BunifuColorTransition to change the colors.
Up to this level this 👇 should be your preview:

Now let’s get to the interesting part where we will make the ProgressColor to change as the progress value continues to increase. At 34% of the progress value we shall make the timer stop the progress value from increment. In this code we shall focus on using recursive functions.

Double click the timer control that we’ve dragged on our form. This should open the code window and then it should have created a function for the timer. Inside the function we shall write this code:

C# recursive code for changing the progress color and increment the BunifuCircleProgressbar

VB.NET recursive code for changing the progress color and increment the BunifuCircleProgressbar

Now let me ask a rhetorical question… Do you think this code can run and implement the required functionality that we wanted ? 😝 Naah!!!
We need to have our timer enabled from the properties in the design and make sure you set an appropriate interval; let’s set it to 1000. The interval takes values in terms of milliseconds.
Here’s a preview of the properties:

Now our code is up and running:

From our preview, there are controls that are below the BunifuCircleProgressbar that we need to make. They consist of a BunifuThinButton that is sent to the back using the SendToBack property and three BunifuImageButtons that are brought to the front using the BringToFront property.
Then there is the image besides the above control 👆 with a circle. This is just a BunifuCircleProgressbar that is customized by setting the LabelVisible property to False, resizing it to a very small size and sending it to the back.
Thereafter, add your picturebox containing an image at the front of the BunifuCircleProgressbar:

The User Controls

The purpose of the user controls is to group a set of controls and behaviors together in a re-usable way. You can put multiple instances of a control on a form. That’s the beauty because you can combine more than one control in a logical unit just like the group-boxes, but they’re similar to a form.

So we’re going to create our first userControl. This is a preview of our first User control:

The featured Bunifu and window controls are: BunifuCustomLabel, an oval shape, a pictureBox, BunifuThinButton and BunifuElipse.

Let’s get started!

Click the Project tab on the Visual Studio Toolbar then select “Add User Control”.
Name the control as “MaintenanceControl” and click ‘Add”. This will take you to a new kind of a form.
Drag the BunifuElipse control as always and then go to the properties of your BunifuElipse and set the radius to value ‘9’. Also make sure that the size of the form is 160, 198.
Next we need to set a background color to an R.G.B color of: 39, 45, 59 and then we start to add the featured controls inside set their appropriate color using the toolbox.
For the label we set the text property to “Maintenance” and we need to set the ForeColor to: 123, 130, 146 .
Then for the oval shape we will drag it from the Toolbox,and drag the points by maximizing or minimizing the shape to form a circle. Change properties such as the FillColor to have an R.G.B color of :36, 40, 52. Also we need to set the BorderColor property that has R.G.B color of 39, 45, 59 and the FillStyle property should be Solid.

For these colors that I have stated, try using Just Color Picker for the easiness in selection of colors.

Having set those properties, we can now put a PictureBox in front of the oval shape and import the appropriate picture as per the preview we had seen.
Then we need another PictureBox on the lower left of the oval shape that we made. I usually call it the statePhoto property.
Our preview should be looking as follows:

So now we can now drag the BunifuThinButton and add the following properties to it:

For the active and idle fill color, set their R.G.B values to 48, 53, 78
The idle and active fore colors should have R.G.B values of 27, 225, 210.
The idle and active line color should be set to transparent.
Also we need to label ButtonText to “AUTOMATIC” and set its font to Microsoft Sans Serif, having a size of 9.75pt, and the style should be Bold.
Lastly, we’re going to add a BunifuCustomLabel having the text “Last run today: ” which uses the same properties as per the preview shown:

Let’s design another User Control... At this juncture you can add a new control having the same properties as we did for the first one only that we need to change our content for this user Control. This control will be having 2 labels and have a PictureBox and another small PictureBox on the lower left and the oval shape.

Here is the sample of the user control that we’ll be designing:

User control that can have properties to set its own picturebox and labels

In this control I will be focusing on creating our custom properties for the user control using C#.

The first thing we should do is go to the code view and type or add the following:

C# codes for setting properties to the user control

VB.NET codes for setting properties to the user control

For the top label, I have added a property known as TopText to set out its texts. It also has a property to change the font,the and the color. Similarly for the bottom label it has the same properties for the TopText,and some of the properties have their default values.

The PictureBoxes have their own properties also for selecting the image or even making it visible or not visible. Ain’t that interesting? 👌

Our user controls are now fit to be used inside our form.

Please note on the locations of the top labels for all user controls.They should have the same values for their locations. This is usually set with the Location property.

Implementing our user controls

Dragging our user controls to the form is the next step; position them well. So for the second user control since we have created our own properties, we can now set our labels and images in the Properties tab.