[Coder-san]

How To Make a Professional GUI in VB.Net


Hello friends, and welcome to my Tutorial today about how to make a Professional GUI.

In this Tutorial, we will be reading about:

• 
  
• What do you mean by a "Professional GUI"?
  
• Finding the easiest layout possible.
  
• Making your App scalable by using Anchor and Dock Property, and Resize Events.
  
• Using ToolTips to explain your Controls.
  
• Making an Expand/Contract (Show/Hide or >>/<<) button.
  
• The secret of the three dots in a Button "..."
  

Lets get started.


What do you mean by a Professional GUI?

A Professional GUI is the least-complicated looking, yet with many options, User-friendly, without any design errors, and almost "noob-proof" User Interface possible for the given Project.



Finding the easiest layout possible.

You can throw 10-20 buttons and couple of textboxes around to let the user use your app. But it just doesn't work like that. The user will eventually stop using the "confusing app" and will start searching for a simpler alternative.
The key to a more controlled GUI, is finding out how many and what type of controls you will need to make a good GUI for the Project.

Lets take a small example.

You have a Project about an Email Client with the following features:

• Choice of SMTP servers.
  
• Multiple Recipients.
  

What control will we choose?

4-5 Option buttons for SMTP server? 10-20 textbox for multiple Recipients?
Good luck with not confusing yourself with that.

A textbox for both to let them type manually?
He would better use his browser.

Then what?

We would use one ComboBox for SMTP servers, and another for Recipients.

ComboBox and ListView are your best friends. You should use a ComboBox almost everywhere a TextBox is required.
It can provide you History of entries, show matching results, all as easily as 1-2-3.

For example you need History for a Browser.

Add a ComboBox.
Just change the AutoCompleteMode property to Suggest, and AutoCompleteSource property to ListItems.
Now use this code to Add new text items in the ComboList.

Code:

If cbUser.Items.Contains(cbUser.Text) = False Then cbUser.Items.Add(cbUser.Text)

Making your App scalable by using Anchor and Dock Property, and Resize Events.

The point of making your app scalable is letting the user choose what size he wants your app to be. If your app has a short list, then he can just reduce the size of your app and continue his work. No need to force a size to the users.

Dock Property, is a more basic approach to Anchor Property.

Choices:

• None - Default
  
• Top
  
• Left
  
• Right
  
• Bottom
  
• Fill
  

Anchor Property, as it sounds like Anchors a control in the specific Direction.
It's very easy to use, but very useful too. Play around with it and you'll master it in no time.

Choices: (Multiple can be selected)

• Top
  
• Left
  
• Right
  
• Bottom
  

Resize Events are the Last resort. But they can be used for everything you would need to scale controls in your Application Window accordingly.
Like minimising to Tray on Form minimise, doubling the size of your window on a button click, etc.

Resize Events:

• Resize
  
• Resize_Begin
  
• Resize_End
  

Using ToolTips to explain your Controls.




ToolTips are easy to use, a must for a good GUI.
Just drag and drop a ToolTip control in your Form, and most of your Controls present in the Form will now get a Tooltip on ToolTip1 property.


Making an Expand/Contract (Show/Hide or >>/<<) button.

Suppose your app has something optional which alone makes the GUI big, without it the GUI would be ok even if smaller.
We would use a Show/Hide Button in that case.

How to make one?

Add a simple Button on your Form.
Try this code.

Code:

Private Sub btnShow_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnShow.Click
        If btnShow.Text = ">>" Then
            Me.Size = New Size(583, 334) 'Expanded size
            btnShow.Text = "<<"
        Else
            Me.Size = New Size(363, 334) 'Contracted size
            btnShow.Text = ">>"
        End If
    End Sub

Easy enough to understand, but quite useful at times.


The secret of three dots in some Buttons "..."



Ever wondered what does it mean?
A glitch? The "I am so bored" accent? Not really.

It means that the Button will open a DialogBox. OpenDialog, SaveDialog, Configuration Dialog, etc.

So start using 3 dots in your Dialog buttons.

---

You can mention some more sophisticated mannerism, or discuss these methods.

Have a Nice day.