A definitive guide for creating a Booking dashboard

“Creativity is inventing, experimenting, growing and having fun .”~Mary Lou Cook

In this article I’ll walk you through designing a modern booking desktop interface that is generally robust in terms of its features for instance handling, examining and overseeing reservations.

We will be using the latest version of Bunifu UI Framework 1.5.4 that has new improved controls’ set.

How about we have a quick look at what we will achieve:

Controls Featured

Here’s the controls’-set highlighted on the dashboard:

What you will require

We’ll be utilizing Bunifu UI for WinForms and Bunifu Dataviz for the charts. Also, you require having the Icons8 software and Just Color Picker for icons and picking colors respectively. Having downloaded Icons8, you require creating a folder for the icons in your Documents or Pictures folder where we’ll be dragging the icons selected and then later importing them to our Visual Studio project where appropriate.

The design process:

• The first thing we need to do is to start a new project in Visual Studio, then choose a C# or VB.NET project and name your project “Booking app”. Once the form appears, drag the BunifuElipse towards the form.
• The next step is to right-click on the BunifuElipse component that you dragged in the form; select Properties and then change the property value ElipseRadius to ‘9’:
• The next move we should perform is to set the width and the height of the form; the width should have a value of 1270 and the height should have a value of 700. Set the backcolor of the form to have an R.G.B color of 31,43,50
• Drag two panels to the form, then use the dock property to dock one panel to the left and the other panel should have a dock of type fill. Provide a backcolor of the left panel to have an R.G.B color of 20,28,33.
• In the fill panel drag another panel and dock it to the top. Set the backcolor of this top panel to have an R.G.B color of 37,49,57.
• Here’s what we expect to the current form:

The top panel

• Drag a bunifuTextbox to the top panel and set the following properties:
• Add four pictureBoxes aligned side to side and also consider their positions, then set the appropriate icon as per this preview.
• For the close maximize and minimize icons, add three other picture boxes to the top panel. Resize and position them to the right end of the top panel then set their anchor property to right.
• The final output for the top panel should look similar to this:

Let’s now design a custom dialog which pops up when the profile image in the PictureBox is clicked.

Custom Dialog

• Click the project tab in Visual Studio the select ‘Add Windows Form’.
• Name your form as CustomDialogForm, and click add.
• Set the following properties:

CustomDialogForm properties.

Size:216,350.

StartPosition: manual.

BackColor: 71, 81, 87.

• Then Drag a bunifu elipse and in the elipse’s property set its radius to 9.
• Here are the featured controls in the customDialogForm that we’re are required to drag and customize as per our preview:

• You can use Just Color Picker to copy the color values as per our preview.

• Now we’re in the final part of making our customDialog “start rolling” 😄
• Navigate to the main form and in the top panel double click the profile PictureBox. You’ll be navigated to the code view click event of the pictureBox. Write the following code:

Run the program and bingo! our custom dialog should be working.

The left panel

• First, let us give a meaningful name to the left panel. Name it as navigationPanel.
• Drag a PictureBox and a bunifuLabel adjusted side to side. Set a suitable menu icon for the PictureBox. For the bunifuLabel, we can set regular properties right from the design window without moving to the Properties tab, for example, customizing its text.

• Then drag a PictureBox below the above controls and place any logo of your choice.
• Next drag a bunifuButton a to the panel, resize its width to match the panels’ width then set the following properties:

IdleBorderColor: 20,28,33

IdleFillColor: 20,28,33

IdleIconLeftImage: (set your appropriate icon)

OnHoverState:

BorderColor: 40,96,144

FillColor: 40,96,144

IconLeftImage:(set your appropriate icon)

• Copy and paste three other bunifuButtons, then here you need only to change the icons that are in hover and idle state.
• The final yield for the left panel should seem like this:

left panel/ Navigation

The sliding panel

Now let’s make a sliding movement animatios for the left panel.

We’ll make use of bunifuTransition, to achieve this type of effect.

• Drag bunifuTransition component to the form
• In the name property name it as hideAnimator. Then for the animation type choose particles.
• Drag another bunifuTransition component to the form. This time, name it as showAnimator. Choose the animation type as VertSlide.
• Finally drag another bunifuTransition component to the form, name it as logoAnimator. Choose the animation type as Rotate.

Let’s move to the interesting part where we’ll use the click event of the PictureBox to perform these animations for a sliding panel.

Now we should have our sliding panel working 😇.

Let’s move to the next frame…

• We can start by adding the labels on the frame and tweaking its writings utilizing HTML tags!!. Yes, you read right 😄
• Add a bunifuLabel to that frame

We have to accomplish this organization of content by simply utilizing one label with the assistance of HTML labels!

• In the Text property is where we’ll put the HTML and CSS tags.
• Here’s an HTML code snippet that we’ll put in the Text property to achieve the above format.

• Copy the code to the Text property of bunifuLabel. Here’s the preview:

The output of a text formatted with HTML and CSS

• Repeat the same procedure for the other two labels. It would be ideal if you note on the location of the bunifuLabels when placing them

• Next, drag a bunifuLabel and three bunifuButtons and position them below the above controls. Set the text property as per from the preview.Also set the font property to Segoe UI,Size:10px, Color: White.
• For the bunifuButtons set the following properties:

Note: Since we’re are going to later refer to the Bunifu buttons it will be wise to rename them to a more meaningful name.

Button Text: 1st Quater.

Name:quaterOneBunifuButton.

Border radius:35px.

IdleBorderColor:51,122,183 . Also for the idlefillcolor use the same color values for border color.

Onhover

BorderColor:51,122,183.

Border radius:35px.

FillColor:31,43,50

Repeat the same procedure for the remaining buttons, providing their color properties using Just Color Picker assistance.

Here’s the output of the current frame:

Adding Bunifu Dataviz

• The procedure is exceptionally straightforward. Drag the bunifuDataviz control to your form and position it beneath the above controls then resize it.
• Next, set the accompanying properties: AxisLineColor:LightGray,AxisXFontColor:Gray, AxisXGridColor: Gray,AxisXThickness:1, AxisYFontColor:224,224,224, AxisYGridColor:t110,124,133, AxisYThickness: 0.
• We’re going to make functions in the code-view to display the charts and later call the functions in the timer_tick event and the three buttons.
• Here’s the code:

• Now that was a heap of code composed… But we’re done with the DataViz! Satisfied that there are no bungles in the code😅.

And now here’s our preview:

Let’s move to the next frame…

Below is a map of all the controls used:

So let’s begin:

• Go to Project > Add User Control, and name your control Arrival analysis.cs.
• Next, navigate to its properties and set its size to 760,220. Also for the backColor, we’ll use an R.G.B color value of 31,43,50.
• Drag the above controls to the user controls and set its properties to mimic the above preview.
• After you’re finished with designing the control, we can get to adding some code for it to have some dynamism in it. Here’s a preview:

• Navigate to the code view and type the following code:

After completing the above step, we can now add the final touches for ensuring that the main form will render the user control. This is by building the solution and drag the user control to the main form.

Presently how about we move to the fascinating part where we’ll make another user control. Repeat the same procedure for creating a userControl and name it RecentActivity.cs.

Firstly off, see what we can use for the section:

Drag the above controls to the user control and set its properties to mirror the above review.

Note that the bunifuSeparotor has a height of 260. Also, it has been sent to back and the Bunifu CheckBox are on top of it. Furthermore, the default state of the checkbox is unChecked.For the colors, please guarantee that you’ve picked every one well (or sufficiently near the sneak peaks… )

After completing the above step, we would now be able to include the last touches for guaranteeing that the User control will be rendered to the form This is by building the solution and drag the user control to the main form.

Here’s a review:

How about we plan another user control. Rehash a similar strategy for making a userControl and name it Statistics.cs.

This is what we’ll be building:

Shouldn’t something be said about we see the controls highlighted in the segment before designing? That is correct. We should say something in regards to the controls featured.

Here isthe controls’ set:

Drag the above controls to the user control and set its properties to mirror the above review.

Let’s trace how we’ll achieve the above design for the drop-down:

1. ForeColor: 109,117,121.
2. IndicatorColor:109,117,121.
3. ItemBackColor:31,43,50.
4. ItemBorderColor:31,43,50.
5. ItemForeColor:109,117,121.
6. ItemHighLightColor: GreenYellow

After completing the above step and placing all the controls, let’s place a few items in the drop-down box.Navigate to the items property and provide the following string collections highlighted in this review:

Next, we need to use the SelectedIndexChanged event of the drop-down to change the values for the progress bar and alter the text property of the labels. Here’s the code:

After writing that code, build and drag the statistics control to the main form then run. This is what we’ll achieve:

Here’s a full preview of what we’ve made:

Conclusions

That would have been a ton of work with normal controls available in .NET but has been simplified with help of Bunifu UI tools because of its adaptability and capacity to redo further.. I really hope you have learned something and if you have feedback or suggestions please leave me a comment below.In the event that you like the instructional exercise, a few applauds will go far!

Cheerful coding and planning. Have fun! 👊