How I redesigned Bitcoin wallet desktop app from scratch in C# and VB.NET code.
Henry Adams once said “Chaos was the law of nature; order was the dream of man.” Order makes things more comprehensible. The same applies to User Interfaces.
In this article, we will have a look at Bitcoin dashboard designed by Victor Erixon as we go ahead to redesigning a mock-up of part of it using the fast and beautiful Bunifu UI Framework. Well I seek to show the capabilities of Dataviz and Bunifu UI Framework Winforms Controls.
First, lets have a look at what we aim to design.
Before we begin, you’ll need a copy of the Bunifu UI Framework library. You can download a free trial here. Likewise, please have a copy of Icons8 software for “all-things-icons” and Just Color Picker utility for picking colors from any area of the UIs. These are the tools that will help you design this Dashboard.
Quite an intuitive design, but where exactly should we start?
Well, lets map all the elements we need to use in order to achieve this.
The Elements:
Now that we have mapped the controls we will need to use, then lets go on to the design process.
The Design Process
- Open Visual Studio and create a new Windows form Application project and on the newly created Form, drop bunifuElipse.Drag bunifuDragControl and drop it in the form; in the properties section, set targetControl to be Form1.
- We then add a panel and in the properties section, set dock to right. Now set the BackColor property to rgb(27, 36, 45). Also set the BackColor of the form to (249, 250, 251).The result should be as follows.
- Well, we can now design the content in the first section before we design the panel. Drag bunifuImageButton to the form and set the images to what is shown below. You can get the icons from Icons8 software.
- The next part we need to design is as shown below. We will need to use two controls namely bunifuFlatButton and a panel.
- Drag a panel into the form and set the backcolor property to (244, 246, 246). Then from the toolbox drag bunifuFlatButton to the panel. Set the backcolor of the button to match that of the panel. In the text property, set text to match the desired text. Choose the icons to match what we have in our desired UI. Lastly, set the Activecolor property to (55, 191, 189). For the first flatbutton, set Active property to True. You also notice that we have a thin separator after every button. All you need to do is find bunifuSeparator from the toolbox and drag it to the panel. Set the Vertical property to True and linecolor to (239, 242, 243). The final design looks as follows:
- Now lets design the next part. Drag bunifuImageButton and drop it on the form. Set the image to a circular avatar of your choice. Next drag bunifuCustomLabel and in the text property, set text to the text in our desired UI. In this section we have three custom labels. Your output should look like this:
- Having successfully achieved this, we can move to the next section which houses a graph. Add a panel to the form and set backcolor to (44, 57, 70). Add a BunifuDataviz component inside the panel control, then add a Timer control (which will default to the name Timer1), set the timer’s Enabled property to True, and then add the code below related to running the Spline chart method:
- After completing this section, we add bunifuImageButton to the panel. lets now preview the complete section we’ve already covered.
- Add bunifuCustomLabel to the form and set text to “Latest Transactions”. You also need to add two bunifuImageButtons and set the icons to delete and download icons. Use the color picker to get the color codes used.
- Finally, add a flowlayoutpanel to your form and set dock property to Bottom. Set backcolor property to (244, 246, 246). The panel contains a list of transactions made by Mr. Buffet. Well, we will design just a single control and fill in the information in code.
- Go to Project > Add User Control. Name that control transactions. Set the backcolor of the control to white. To ensure we moving on together, lets look at what we aim to design.
- Add bunifuCustomLabel to the control and set its name property and text to Description. Add a linklabel control and set its name and text to Link. Two more bunifuCustomLabels and set their names and texts to Date and Amount. In case you not sure of what i mean, take a look at this;
- In “transactions.cs”, add the following method with the four parameters.
- Now in the “form.cs”, add the code below. This allows us to add the list of transactions done (transactions control) to the flowlayoutpanel.
Lets have a look at what we have achieved.
- Remember the first panel we added to our form and docked right, i believe you do. Lets move on to designing that part. Add bunifuCard and dock it to the top of the panel. Add bunifuCustomLabel and set text property to “Contact List”. Add bunifuImageButton and set its icon to desired icon.
- Next, add another user control and name this one contactListItem. we will design one control and write code for adding the control into our panel just as we did with transactions. The control has bunifuImageButton and two bunifuCustomLabels as shown below.
- Doubleclick on your control and add the following code.
- Now, in the “form.cs”, add the code below in order to add our contactListItem to our panel. Ensure that you have added the methods “AddList” and “AddContacts” in the form loading event.
- Finally, add bunifuSeparator and set its LineThickness property to 2 and also add bunifuImageButton to the panel.
This marks the end of our inspirational design…Below is the final output for all the job done both in design and code:
Resource Links:
Conclusion
UI design is what makes an interface beautiful. Bunifu UI Framework has helped us create this beautiful mock-up. I really hope that this inspires you to create more mock-ups using Bunifu UI framework.
Happy coding and designing!
