Customized Forms, Dialogs and Menu by Joy de Leon

On this tutorial I will teach you the tips and tricks on how to create customized forms, dialogs and menus.
Windows forms UI are on its default looks, it’s just a typical form. Even your pop up message box also known as
dialogs. Also add your menu strip on its boring and lame design. We can actually used couple of controls to add a
life on those lame UI’s.

Create a new VB project, named your project as Customized UI. A single form is shown upon creating a new VB
project. We will create your first FLAT DESIGN UI just like windows 8 (metro theme).

We will change this form to our Login Form.

Go to your Form1 property, apply the changes listed below:

Property:
 Name = frmLogin
 Text = Login Form
 StartPosition = CenterScreen
 Size = 325, 180
 FormBorderStyle = None
 BackColor = 19, 169, 46

After changing those form properties, our form output

would be like this.
A flat green block, well I just love green. Anyway double
click our form to generate our load event but we won’t
need this event.

Change the form event to Paint:

On our Paint event, add this one line of code:

Private Sub frmLogin_Paint(ByVal sender As Object, ByVal e As
System.Windows.Forms.PaintEventArgs) Handles Me.Paint
e.Graphics.DrawRectangle(New Pen(Color.FromArgb(196, 199, 204), 10), Me.ClientRectangle)
End Sub

This code draws a rectangle on every side of our form. I set the color to light gray and the 10 represents the
thickness of the rectangle. Our output will now be like this:
Let’s now add some controls to our form.
1. Add two labels; change the text property of the first label to Username and the other to Password. Change
its ForeColor property to White; change the font size property to 10 and apply a Bold style.
2. Add a textbox; change the BackColor property to WhiteSmoke; change its Font size property to 16; change
Enabled property to False; change its width to 185; change the BorderStyle to None.
3. Add another textbox on top of the textbox that we modified a while ago. Change the width to 175; change
the BorderStyle to None; center the textbox; change the BackColor property to WhiteSmoke;

Save and run your project. Type any character on our

textbox, you see we created a padding in our textbox.
We cannot set padding inside our textbox that’s why we set
a textbox on top of the textbox to look that we have a
margin inside our textbox. But the truth, it’s just a trick!
You may copy the two textbox for our password.

4. Next, add a button; change the text property to Log In; change the ForeColor property to White; change its
FlatStyle property to Flat; look for FlatAppearance property and populate it (click the arrow before the
property). Change the BorderColor property to White; change BorderSize to 2;

Save and run again your project. Your login form output is
finish. From lame form design to much better UI form. If
you want to hide your password characters, look for that
textbox property PasswordChar and change to any
character you want to show.

A title bar is removed on our new login form and we want to drag this form on different position in our window
desktop, but the problem where we address this form to drag to?
We’ll be using another event for our frmLogin. Go to your frmLogin code and imports some library for our
drawing:

Imports System.Drawing
Imports System.Drawing.Printing

Next, we will declare a variable for our drawing point:

Dim Point As New System.Drawing.Point()

And declare two variables for our integer

Dim J, A As Integer

After that, go to your frmLogin_Paint event, select the MouseDown event for our frmLogin:

On our MouseDown event of the form, add these lines of code:

J = Control.MousePosition.X - Me.Location.X
A = Control.MousePosition.Y - Me.Location.Y

J is set to mouse positioning to horizontal (X axis) and A for the vertical (Y axis)
After that, select the MouseMove event of our frmLogin:

On our MouseMove event of the form, add these lines of code:

If e.Button = MouseButtons.Left Then 'e is represent the forms event argument
Point = Control.MousePosition 'point for the mouse positioning
Point.X = Point.X - (J) 'our x axis
Point.Y = Point.Y - (A) 'our y axis
Me.Location = Point 'me is your frmLogin addressing the location of the mouse that
will be set by the point
End If

Save and run your project. Click and hold on your Login form (on the green part) and drag them anywhere on your
window desktop.

Let’s recap what we’ve done so far:

 We’ve learned how to draw a border on our form.
 We’ve learned how to create a margin inside our textbox
 We’ve learned how to create a flat design color theme
 We’ve learned how to customized a button
 We’ve learned how to dynamically hard coded the dragging of form

Now we will add a new form in our project for our Main Form after login triggers. Right click to your project
solution explorer and add new item. Add a new Windows Form and named as Mother_superior_Form.vb
(include underscore) See the screenshot below:
On our new form (Mother_Superior_Form.vb), go to its form property and apply the changes listed below:
Property Value
 StartPosition = CenterScreen
 Text = Main Form
 FormBorderStyle = None
 Size = 910, 450
 IsMdiContainer = True

Your form must be like this:

Go to your Toolbox and drag a Panel unto your form, place your Panel anywhere inside the form. We will modify
this Panel to become your own title bar with form controls on it.
Click the Panel (Panel1) and go to its panel property and apply the changes listed below:
 Size (Height only) = 50
 Dock = Top
 BackColor = CornFlowerBlue

Your form would be like this:

We only created our container for our customized title bar but we did not yet add some couple of controls to
minimize, maximize and close our form. Head back to your form design.
Go to your toolbox and drag a Label inside our Panel that we created earlier. Place on the left part of our Panel,
this will act as the title label of our form. Screenshot provided below:

Click the label and go to its label property and apply the changes listed below:
 ForeColor = White
 Font (Bold) = True
 Font(Size) = 15.75
 Text = Customized Forms

Your panel would be like this:

Isn’t she beautiful? But we’re not done yet. We will use different tools for our controls (Label for Close button;
PictureBox for Minimize and Maximize). Go to your toolbox and drag another label unto our panel (Panel1) and
position on the very top right of our panel. Screenshot provided below:
Click the label and go to its label property and apply the changes listed below:
 Text = 2
 ForeColor = White
 BackColor = 197, 24, 24 (not too much red)
 TextAlign = MiddleCenter
 Font(Size) = 12
 Font(Bold) = True
 Name = LbLClose
 BorderStyle = FixedSingle

Your label would be like this:

The label we created now looks like a button, like what I’ve said, “It’s just a trick!” Let’s add some code for our
labelled-Close button. Double-click our label (close button), then we generate our Click event, add the codes
below:

Private Sub LbLClose_Click(ByVal sender As System.Object, ByVal e As System.EventArgs)

Handles LbLClose.Click
Application.Exit()
End Sub
The code above will just exit our application form without prompting the user to close it. If you test your code
above, the default form to be run first is our Login Form. Head back to your Form1, double-click on the Log In
button and add the codes below:

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles

Button1.Click
Dim show_me_the_main_form As New Mother_superior_Form
show_me_the_main_form.Show()
Me.Hide()
End Sub

Save and run your project. If you click the Log In button it will show our main form and click the close-labelled
button. As you notice, it just closes our project without prompting the user like what I’ve said earlier. What if we
want to add a confirmation before closing our application? That’s just too simple, go to your
Mother_superior_Form design and double-click to any part of your form except on our Panel (customized title
bar). It will generate our Mother_superior_Form Load event. Change your event to FormClosing:

After the FormClosing event been generated and the codes below:
Private Sub Mother_superior_Form_FormClosing(ByVal sender As Object, ByVal e As
System.Windows.Forms.FormClosingEventArgs) Handles Me.FormClosing
Dim response As MsgBoxResult
response = MsgBox("Are you sure you want to close this application?", _
vbYesNo + vbExclamation + vbApplicationModal + _
vbDefaultButton2, "Close confirmation")
If response = MsgBoxResult.Yes Then
Me.Visible = False
Me.Dispose()
Me.Close()
End
ElseIf response = MsgBoxResult.No Then
 e.Cancel = True
Exit Sub
End If
End Sub

Save and run your project. After heading to our Main Form in runtime (* Runtime means running application),
click the close-labelled button and a message box will prompt the user if he/she wants to exit the application:

We now have our dialog box (message pop-up) to confirm the closing the application. But wait! Our close
confirmation destroyed our customized flat designed application. We have a flat designed login and main form but
our close confirmation is a default dialog. Let’s change this ugly dialog with a customized one.
Close your application and go to your Solution Explorer (right side dock panel). Right-click to your project and add
new windows form and named as frmCloseDialog:
A default form is generated, like our Login Form (Form1.vb - frmLogin), we will just repeat the history. Click your
frmCloseDialog form and go to its form property and apply the changes listed below:
 StartPosition = CenterScreen
 Text = Close Application
 FormBorderStyle = None
 BackColor = White
 Size = 300, 140

Your form would be like this:

Just a plain white, add a label to our form and place on its center. Go to its label property and apply the changes
listed below:
 AutoSize = False
 Text = Are you sure you want to close this application?
 Size = 225, 55
 Location = 32, 27
 Font(Size) = 13.75

Your label would be like this:

Add two buttons on our form and place below our label. Place wherever you want, this is what I’ve done:
Let’s modify our button, click the Button1 and go to its button property and apply the changes listed below:
 Text = Yes
 FlatStyle = Flat
 FlatAppearrance
o BackColor = 19, 169, 46
o BorderSize = 2
 Font (Bold) = True
 ForeColor = 19, 169, 46

 Apply these changes also for your Button2 but change your Text Property to “No” (without quote)

Your form would be like this:

Double-click our form we then generate our frmCloseDialog Load event. Same what we’ve applied on our Login
Form, we will draw a border for our form. After load event is generated, change the event to Paint:

Add the line of codes below in our Paint event and this time we will use a green border similar to our button’s
border color:
Private Sub frmCloseDialog_Paint(ByVal sender As Object, ByVal e As
System.Windows.Forms.PaintEventArgs) Handles Me.Paint
e.Graphics.DrawRectangle(New Pen(Color.FromArgb(19, 169, 46), 10), Me.ClientRectangle)
End Sub

Still in our form code, add these 4 libraries in the upper part of our frmCloseDialog:
Imports System.Windows.Forms
Imports System.Drawing
Imports System.Drawing.Printing
Imports System.Media

Create a new sub for our frmCloseDialog to initialize this form as a dialog:

Public Sub New(ByVal message As String, ByVal button1Name As String, ByVal button2name As
String)
' This call is required by the designer.
InitializeComponent()
' Add any initialization after the InitializeComponent() call.
DialogResult = Windows.Forms.DialogResult.Cancel
End Sub

Back to our frmCloseDialog design, double-click our Button1 (Yes) and add the lines of code below for our click
event:

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles

Button1.Click
DialogResult = Windows.Forms.DialogResult.Yes
Close()
Application.Exit()
End Sub
Also, double-click our Button2 (No) and add the lines of code below for our click event:

Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles

Button2.Click
DialogResult = Windows.Forms.DialogResult.No
Close()
End Sub

We are not using the frmCloseDialog Load event, delete this part:

Private Sub frmCloseDialog_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)

Handles MyBase.Load

End Sub

Our complete code for our frmCloseDialog is shown below:

Imports System.Windows.Forms
Imports System.Drawing
Imports System.Drawing.Printing
Imports System.Media
Public Class frmCloseDialog
Public Sub New(ByVal message As String, ByVal button1Name As String, ByVal button2name As
String)
' This call is required by the designer.
InitializeComponent()
' Add any initialization after the InitializeComponent() call.
DialogResult = Windows.Forms.DialogResult.Cancel
End Sub

Private Sub frmCloseDialog_Paint(ByVal sender As Object, ByVal e As

System.Windows.Forms.PaintEventArgs) Handles Me.Paint
e.Graphics.DrawRectangle(New Pen(Color.FromArgb(19, 169, 46), 10), Me.ClientRectangle)
End Sub

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles

Button1.Click
DialogResult = Windows.Forms.DialogResult.Yes
Close()
Application.Exit()
End Sub

Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles

Button2.Click
DialogResult = Windows.Forms.DialogResult.No
Close()
End Sub
End Class

Save your project and head back to our Mother_superior_Form and go to our FormClosing event, delete this part.
Go to our close-labelled button click event and replace the codes with the code below:
Private Sub LbLClose_Click(ByVal sender As System.Object, ByVal e As System.EventArgs)
Handles LbLClose.Click
Dim msgexit As New frmCloseDialog("Exit Application", "Yes", "No")
Dim result = msgexit.ShowDialog()
If result = Windows.Forms.DialogResult.Yes Then
ElseIf result = Windows.Forms.DialogResult.No Then
End If
End Sub
The code above calls our frmCloseDialog and addresses the parameters into it to our Sub New in our
frmCLoseDIalog method. Try to run your project and our default closing confirmation is already placed with our
customized dialog form. Our closing confirmation customized dialog box would now be like this:

Below is our full code for our Mother_superior_Form:

Public Class Mother_superior_Form

Private Sub LbLClose_Click(ByVal sender As System.Object, ByVal e As System.EventArgs)

Handles LbLClose.Click
Dim msgexit As New frmCloseDialog("Exit Application", "Yes", "No")
Dim result = msgexit.ShowDialog()
If result = Windows.Forms.DialogResult.Yes Then
ElseIf result = Windows.Forms.DialogResult.No Then
End If
End Sub

Private Sub Mother_superior_Form_Load(ByVal sender As System.Object, ByVal e As

System.EventArgs) Handles MyBase.Load

End Sub
End Class

We’re done on our customized dialog next, we will continue the customized title bar on our Main
Form(Mother_superior_Form). We created our close button, this time we will create our maximize button. As I
mentioned earlier, we will use a picturebox for this control. Before we do that, open your MS Paint application.
On our paint, resize your image size to 32 by 32 pixels:
We use CornFlowerBlue color on our customized title bar (panel) in Main Form and of course we also want that
our maximize image is similar to our title bar background color. To do that, back to your Mother_superioir_Form
design and press Print Screen (PrtSc) in your keyboard, we can now capture our form’s design:

After pressing the Print Screen key, open another MS Paint Application and paste it there (CTRL+V).
We will use the Color Picker Icon in our Paint Application, click the Icon and click our title bar (panel) in the
image that we captured. Our Color 1 by default is Black, after clicking the captured image with our Color Picker it
will now then change our Color 1 with CornFlowerBlue color:

After we pick our desired color, click the Edit Colors to get the RGB color of our title bar (panel).

These are the RGB color of the CornFlowerBlue: (Red: 100; Green: 149; Blue: 237)

Let’s head back to our opened MS Paint Application (the one that we resize the image). Click Edit Colors and enter
the RGB color that we get from the CornFlowerBlue color. This will change our Color 1 to CornFlowerBlue. Now
click the Bucket Icon and fill the image with that color.

After this:
1. Change the Color 1 to White.
2. Click the Rectangle in Shapes menu.
3. Select 3px for the Size.
Create a square shape in our image and try to center it like this:

Save your image as max.jpg inside our project’s debug folder:

..\Desktop\Customized UI\Customized UI\bin\Debug\

Press UNDO or CTRL+Z in our image, the square shape will vanished in our image. Let’s draw another shape in our
image for our minimize. Select the line shape and draw a line on our image, just like an UNDERSCORE and your
image would be like this:

Same with the path above for our image location and save as min.jpg.

Now we have two images for our maximize and minimize button. Let’s continue the customized title bar on our
Main Form(Mother_superior_Form). Go to your toolbox and select Picturebox, create a square box beside our
close-labelled button:

Click your PictureBox and go to its PictureBox property and apply the changes listed below:
 Name = PBMax
 Size = 23, 22
 SizeMode = StretchImage

After the few changes, double-click your Main Form or go directly to our Main form’s code and head to
Mother_superior_Form load event. This part is empty and we will add our codes for max picturebox button image
path, what is shown below:

Private Sub Mother_superior_Form_Load(ByVal sender As System.Object, ByVal e As

System.EventArgs) Handles MyBase.Load
PBMax.ImageLocation = Application.StartupPath & "\max.jpg"

End Sub

If we run our project application, our max button will produce the screenshot below:

Close your project. Click the max-picturebox button and press CTRL+C or copy it and paste beside our max button.
Look for our second picturebox Name Property and change to PBMin. As for our code, just copy the
PBMax.ImageLocation code but change the max to min.

Runtime:
This is our full code for image location on each picturebox:

Private Sub Mother_superior_Form_Load(ByVal sender As System.Object, ByVal e As

System.EventArgs) Handles MyBase.Load
PBMax.ImageLocation = Application.StartupPath & "\max.jpg"
PBMin.ImageLocation = Application.StartupPath & "\min.jpg"
End Sub

Same routine, we will add those pictureboxes with form functions. Close your runtime application and double-click
our PBMax button, just add the 1-line code below in our PBMax_Click event:

Private Sub PBMax_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles

PBMax.Click
Me.WindowState = FormWindowState.Maximized
End Sub

Save your project and run it. Click the maximize button and see what happens:

Houston we’ve got a problem! If we triggered our max button, yes our form maximizes but the location of our
button is somehow lost. Close your application; we must change our Anchor property.
Select the 3 form control button (HOLD CTRL and click each button or you may even highlight that 3 button at
once) look for the Anchor Property change the TOP, LEFT to TOP, RIGHT. Because if we maximize our form the
location of our 3 form control button must be in upper right corner of our form. That is the use of Anchor property
when maximizing a form, it will relatively adopt the form size.

Save and run your project and click the max button and see the changes:

If we try to click again the max button; our form don’t minimize the size of our form or restore to its original form
size. Let’s modify again this thing. Head back to our main form code and add some changes form the code
highlighted below:

Public Class Mother_superior_Form

Dim max_on As Integer = 0

Private Sub LbLClose_Click(ByVal sender As System.Object, ByVal e As System.EventArgs)

Handles LbLClose.Click
Dim msgexit As New frmCloseDialog("Exit Application", "Yes", "No")
Dim result = msgexit.ShowDialog()
If result = Windows.Forms.DialogResult.Yes Then
ElseIf result = Windows.Forms.DialogResult.No Then
End If
End Sub

Private Sub Mother_superior_Form_Load(ByVal sender As System.Object, ByVal e As

System.EventArgs) Handles MyBase.Load
PBMax.ImageLocation = Application.StartupPath & "\max.jpg"
PBMin.ImageLocation = Application.StartupPath & "\min.jpg"
End Sub

Private Sub PBMax_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles

PBMax.Click
'Me.WindowState = FormWindowState.Maximized
 If max_on = 0 Then
max_on = 1
Me.Top = 0
Me.Left = 0
Me.Height = Screen.PrimaryScreen.WorkingArea.Height
Me.Width = Screen.PrimaryScreen.WorkingArea.Width
ElseIf max_on = 1 Then
max_on = 0
Me.Top = 150
Me.Left = 230
Me.Height = "450"
Me.Width = "910"
End If
End Sub
End Class

By default, our declared max_on variable valued zero. If we click the maximize button it will then change the
max_on value to 1. From the max_on value zero, form will maximize its height and width of your monitor (display)
size; and for the max_on value 1, it will set the top-margin to 150 and left-margin to 230, and for the height = 450
(our default height) and width=910 (our deafault width).

Back to our main form design, double-click the minimize button and add the minimize line of code shown below:

Private Sub PBMin_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles

PBMin.Click
Me.WindowState = FormWindowState.Minimized
End Sub

Save and run your project. Our main form controls is now complete.

Next we will now create my very own customize transitioned menu. I want to replicate the slide transition css
effect of a web form that’s why I came up with this idea.

On our main’s form design, go to your toolbox and select the panel, drag unto your main’s form. Place anywhere
on your form just don’t put in our customized title bar. Just like this:

Go to your panel property and apply the changes listed

below:
 BackColor = CornFlowerBlue
 Dock = Left
 Width = 50
Your form should be like this: When you try to run your project, the line in between
the top panel and left panel will not be visible:

Go to your toolbox and select a label and drag unto your left panel. Like this:

Go to your label property and apply the changes listed below:

 Text = > (greater than sign)
 Name = LbLMenu
 BackColor = White
 Font (Size) = 14
 Font (Bold) = True
 BorderStyle = FixedSingle

After applying the property changes, your label button should be like this:

Let’s add another Panel in form for our PanelMenu beside our left panel.
 Go to your panel property and apply the changes listed below:
 Name = PanelMenu
 BackColor = White
 Dock = Left
 BorderStyle = Fixed3D
 Size (Width) = 200

After applying the property changes, your panel should be look

like this:

And for our transition slide effect, double-click our LbLMenu (greater than sign) and add the code shown
highlighted below in LbLMenu click event, also I add a single line in our form load event:

Public Class Mother_superior_Form

Dim max_on As Integer = 0

Private Sub LbLClose_Click(ByVal sender As System.Object, ByVal e As System.EventArgs)

Handles LbLClose.Click
Dim msgexit As New frmCloseDialog("Exit Application", "Yes", "No")
Dim result = msgexit.ShowDialog()
If result = Windows.Forms.DialogResult.Yes Then
ElseIf result = Windows.Forms.DialogResult.No Then
End If
End Sub

Private Sub Mother_superior_Form_Load(ByVal sender As System.Object, ByVal e As

System.EventArgs) Handles MyBase.Load
PBMax.ImageLocation = Application.StartupPath & "\max.jpg"
PBMin.ImageLocation = Application.StartupPath & "\min.jpg"

PanelMenu.Width = 0
End Sub

Private Sub PBMax_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles

PBMax.Click
'Me.WindowState = FormWindowState.Maximized
If max_on = 0 Then
max_on = 1
Me.Top = 0
Me.Left = 0
 Me.Height = Screen.PrimaryScreen.WorkingArea.Height
Me.Width = Screen.PrimaryScreen.WorkingArea.Width
ElseIf max_on = 1 Then
max_on = 0
Me.Top = 150
Me.Left = 230
Me.Height = "450"
Me.Width = "910"
End If
End Sub

Private Sub PBMin_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles

PBMin.Click
Me.WindowState = FormWindowState.Minimized
End Sub

Private Sub LbLMenu_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles

LbLMenu.Click
If LbLMenu.Text = ">" Then
LbLMenu.Text = "<"
For i As Integer = 0 To 200
PanelMenu.Width = i
Next
ElseIf LbLMenu.Text = "<" Then
LbLMenu.Text = ">"
For i As Integer = 200 To 0 Step -5
PanelMenu.Width = i
Next
End If
End Sub
End Class

You may add picturebox as button inside our panel menu or button or label as your command function to call a
child form (as I already discussed about login and extra).

There you go! This is the end of the line of my customized form tutorial. Hope you learn a lot from my very own
example and create your own idea of creativity. 

P.S. These are few examples of my customized forms in VB.NET from my previous projects/freelance:

Employee Appraisal System:

201 Product Specialist (Promodizer) System:

Human Resource Information with Payroll System Version Berde:

Human Resource Information with Payroll System Version Bughaw:

Human Resource Information with Payroll System Version Nganga:

Student Portal System: