Window Form Controls

Chapter I

1.     Create a New Project

-       File à New Project (Ctrl + N)

-       Visual Basic à Window Form Application

-       Type The Name of Project à Ok

Project Name

2.     Save the Project

-       File à Save All (Ctrl + Shift +S)

-       Type Project Name and Set Location of Project  by Clicking Browse à Save

3.     Design View of Visual Studio.Net IDE

Form Code

Run the Project

Set Object Property

Manage Project File

 

Form Window Application

Object Control Used to Draw On Form

Form Design

 

4.     Open Existing Project File

-       choose location of the project

-       open the project file that has extension (*.sln)

5.     Understanding Form Properties

.Text                                   : change text title of the form

. Icon                                 : change icon of the form

. ShowIcon                         : (yes) to show icon of the form, otherwise is hide (No)

. ForeColor                         : change text color of the control on the form

. Font                                 : change font name, font style, font size of the control on the form

. BackColor                        : change background color

. BackgoundImage             : change background as image

. BackgoundImageLayout   : change background image layout (none, tile, center, stretch and zoom)

None

Center

Zoom

Stretch

Tile

 

. FormBorderStyle              : change form border style (none, fixedSingle, fixed3D, fixeddialog, sizable,

                                             fixedtoolwindow, sizabletoolwindow)  

None

Sizable

FixedSingle

 

. ControlBox                       : (yes) mean that form has control otherwise (No)

yes

No

                                                       

Maximize Button

Close Button

Minimize Button

 

. MaximizeBox    : (yes) mean that form has maximize button, otherwise (No) 

. MinimizeBox     : (yes) mean that form has minimize button, otherwise (No) 

. Opacity             : change opacity of the form in percent

. WindowState     : view form as normal, minimize, maximize

. Width                : change form width

. Height               : change form Height

. TopMost            : (true) form always appear above all other form.

Make sample form below

To do that set its property as follow . Text:  First Project . Icon:  browse and select an icon . MaximizeBox: No . MinimizeBox: No . BackgoundImage: import image into resource and                                     select an image from resource . BackgoundImageLayout: tile

Set Opacity: 50%, so the form will become

Set windowstate: Maximize, so the form will be displayed as full screen mode

6.     Form Exercise

 

 

7.     Label Control

Label: can be used to display any information on the form. Look some important properties of label below.

.Text: text to be displayed within control.

.TextAlign: align the text as left, center, right.

.Font: change font name, size, style

.ForeColor: change text color.

.BackColor: change text background color.

.AutoSize: false can resize the control in design mode otherwise true.

.Image: put the image into Control. The image is behind the text.

.ImageAlign: align the image as horizontal (left, center, right) and vertical (top, middle, bottom) 

.BorderStyle: change the style of border as (None, FixedSingle, fixed3D)

   

      (BorderStyle=None)             (BorderStyle=FixedSingle)            (BorderStyle=fixed3D)

.Dock: define which border of control is bound to the container. Dock has horizontal (left, center, right)

 and vertical (top, middle, bottom) 

AutoSize: False BackColor: 255, 224, 192 BorderStyle: None ForColor: Blue Font: Microsoft Sans Serif, 8.25pt TextAlign: TopLeft

AutoSize: False BackColor: 255, 224, 192 BorderStyle: FixedSingle ForColor: Blue Font: Microsoft Sans Serif, 8.25pt TextAlign: TopCenter Image: Shopping.My.Resources.Resources.frog ImageAlign: TopCenter

AutoSize: False BackColor: 255, 224, 192 BorderStyle: FixedSingle ForColor: Blue Font: Microsoft Sans Serif, 8.25pt TextAlign: TopRight Image: Shopping.My.Resources.Resources.frog ImageAlign: TopCenter Dock: Fill

Label Exercise

  

   `

8.     LinkLabel Control

 LinkLabel display label as hyperlink.

.Text: text to be display within control

.TextAlign: align the text as left, center, right.

.ActiveLinkColor: the color of hyperlink when user click link.

.DisableLinkColor:  the color of hyperlink when disabled.

.LinkColor: the color of hyperlink in its default state.

.VisitedLinkColor: the color of hyperlink when user has been visited and set LinkVisited=True before this property.

.Font: change font name, size, style

.ForeColor: change text color.

.BackColor: change text background color.

.AutoSize: false can resize the control in design mode otherwise true.

.Image: put the image into Control. The image is behind the text.

.ImageAlign: align the image as horizontal (left, center, right) and vertical (top, middle, bottom) 

.BorderStyle: change the style of border as (None, FixedSingle, fixed3D)

Hyperlink Style

9.     ToolTip Control

ToolTip display briefs description when user rests the pointer on the control. Look some properties

.ToolTipTitle: the title of tooltip

.ToolTipIcon: the icon of tooltip. It can be None, Info, Warning, Error

   

      .IsBalloon: (True) show balloon form as below

      

                                                

10.  Textbox Control

Textbox: can be used to input information. Look some important properties of Textbox below.

.Text: text to be displayed within control.

.TextAlign: align text as left, right, center

.Font: change font name, size, style

.ForeColor: change text color.

.BackColor: change text background color.

.BorderStyle: change the style of border as (None, FixedSingle, fixed3D)

.MaxLength: the number of character can be entered into control

                                                           (MaxLength=5)       

                                                     

.Multiline:  true mean that control support multiline input.

Windows XP brims with new features, improved programs and tools. See what’s new; take an entertaining tour;

Windo

Windows XP brims

 

                                                                    (Multiline = false)       

                                                                 

             (Multiline = true)       

.UseSystemPasswordChar: true mean that control appear text as password.

AAAAAAAA ● ● ●

●●●●●●●●● ● ● ●

                                           (UseSystemPasswordChar=True)

.PasswordChar: text represents as password  

                                           (PasswordChar= A)

.ReadOnly: true mean that control can not be input at runtime.

.WordWrap: true mean that text will be wrapped.

  

             (WordWrap=True)                             (WordWrap=False)

.ScrollBar: show/hide scrollbar of the control. to use scrollbar you must set multiline=true.

Scrollbar can be set as none, horizontal, vertical, both.

None

Horizontal

Vertical

Both

 

 

11.  Button Control

Button can be used to do any process when click on it. Look some important properties of button below.

.Text: text to be displayed within control.

.TextAlign: align the text as left, center, right.

.TabStop: (True) user can use the tab key to give focus to control

.Font: change font name, size, style

.ForeColor: change text color.

.BorderColor: change color of border.

.BorderSize: change size of border

.MouseDownBackColor: when mouse down the color will be set.

.MouseOverBackColor: when mouse over the color will be set.

.FlatStyle: determine the appearance of control when a user move the mouse over the control and clicks

.BackColor: change text background color.

.BackgoundImage: change background as image

.BackgoundImageLayout: change background image layout (none, tile, center, stretch and zoom)

.Image: put the image into Control. The image is behind the text.

.ImageAlign: align the image as horizontal (left, center, right) and vertical (top, middle, bottom)

.AutoSize: false can resize the control in design mode otherwise true.

.TextImageRelation: specifies the relative location of the image to text on the button

   

FlatStyle=Flat, MouseDownBackColor=Red, MouseOverBackColor=Blue

                                                         

      TextImageRelation=Overlay       TextImageRelation=ImageAboveText          TextImageRelation=TextAboveImage

                                                                                             

     TextImageRelation= ImageBeforeText                                                            TextImageRelation=TextBeforeImage    

  

12.  ListBox Control

Listbox can be used to store list of items. look some properties of list box below.

.Items: add items into listbox.

.Sorted: (true) sort items in ascending order.

.Font: change font name, size, style

.ForeColor: change text color.

.BackColor: change text background color.

.SelectionMode: indicates if the list box is to be single-select, multi-select, or not selectable.

                          -  None: not selectable items

                          -  One: can select only one item

                          -  MultiSimple: simple style selection

                          -  MultiExtended: extended style selection

 .MultiColumn: (true) items should be displayed in horizontal column.

 .ColumnWidth: width for each MultiColumn listbox.

. FormatString: format values in listbox

                

            Items                           Sorted=true                SelectionMode=MultiExtended

                    MultiColumn=true

13.  CheckedListBox Control

Creates a multi selection check box group that can be dynamically created by binding the control to a data source.

.Items: Items in list box

.Sorted: (true) sort items in ascending order.

.CheckOneClick: (True) check if one click.

.

.Font: change font name, size, style

.ForeColor: change text color.

.BackColor: change text background color.

.SelectionMode: indicates if the list box is to be single-select, multi-select, or not selectable.

                          -  None: not selectable items

                          -  One: can select only one item

                          -  MultiSimple: simple style selection

                          -  MultiExtended: extended style selection

 .MultiColumn: (true) items should be displayed in horizontal column.

 .ColumnWidth: width for each MultiColumn listbox.

. FormatString: format values in listbox

14.  ComboBox Control

ComboxBox  is similar to list box except that it has difference style of items selection.

.Text: text value of Combo Box

.MaxLength: the number of character can be entered into control

.Items: add items into Combo Box.

.Sorted: (true) sort items in ascending order.

.Font: change font name, size, style

.ForeColor: change text color.

.BackColor: change text background color.

.FlatStyle: determine the display of control. Flat Style can be Flat, Popup, Standard, System

.MaxDropDownItem: Maximum of items will be display.

.DropDownStyle: controls the appearance and functionality of the combo box.

DropDownStyle=DropDownList  MaxDropDownItem=3

DropDownStyle=DropDown  MaxDropDownItem=3

                                                               

   DropDownStyle=Simple

15.  CheckBox Control

CheckBox used to specify that an item can be chose or not. We can choose many items in a group box.

Look the following property.   

.Text: Text value of checkbox

.AutoSize: (false) can resize the control.

.Checked: (true) Indicate that Check Box is checked.

.CheckedState: Indicate the state of component. It can be Unchecked, Checked and Indeterminate

.FlatStyle: determines the appearance of the control when a user move the mouse over the control and clicks.

.Image: Image will be displayed on the control.

.ImageAlign: the alignment of image that will be display on the control

.TextImageRelation: specifies the relative location of the image to the text on the button.

.BackgroundImage: put background image for the control.

.BackgroundImageLayout: Can be None, Tile, Center, Stretch, Zoom

:

Checkbox Style:

                                                   

 TextImageRelation= Overlay       TextImageRelation= ImageBeforeText       TextImageRelation=TextBeforeImage 

                                                                                     

 TextImageRelation= ImageAboveText                                                          TextImageRelation= TextAboveImage

16.   RadioButton Control

CheckBox similar to checkbox but can choose only one item in a group box.

Look the following property.   

.Text: Text value of checkbox

.AutoSize: (false) can resize the control.

.Checked: (true) Indicate that RadioButton is checked.

.FlatStyle: determines the appearance of the control when a user moves the mouse over the control and clicks.

.Image: Image will be displayed on the control.

.ImageAlign: the alignment of image that will be display on the control

.TextImageRelation: specifies the relative location of the image to the text on the button.

.BackgroundImage: put background image for the control.

.BackgroundImageLayout: Can be None, Tile, Center, Stretch, and Zoom

RadioButton Style:

:          

                                                                                                                       

TextImageRelation= Overlay       TextImageRelation= ImageBeforeText          TextImageRelation=TextBeforeImage

                                                                                                                                                                                                                                                                                                                                                                                                                    

TextImageRelation= ImageAboveText                                                             TextImageRelation= TextAboveImage

17.  NumericUpdown Control

NumericUpdown: used to display numeric value that value is in a range and must be defined.

Look the following property.   

.Value: current value of the control

.TextAlign: Text can be align as left, center, right

       TextAlign=Left                 TextAlign=Center                 TextAlign=Right

.Maximum: indicate the maximum value of the control

.Minimum: indicate the minimum value of the control

(set Maximum=100, Minimum=50, value=60 so it display value in range 50à 100)

.Increment: indicate amount of increment or decrement on each button click.

.ThousandsSeparator: (True) display numeric value as thousands Separators. (Ex: 234,455 ; 34,566,754 …)

.DecimalPlaces: Indicate number of decimal place to display. (Ex: 1.27 ; 24.157 …)

.UpDownAlign: position the up and down button relative to its edit box:

 

    UpDownAlign=Right           UpDownAlign=Left

.Hexadecimal: (True) Numeric up-down display it value as hexadecimal.

.InterceptArrowKeys: (True) increase or decrease the value when the up down arrow keys are press.

18.  DateTimePicker Control

DateTimePicker allow user select date and time with a specified format.

Look the following property.   

.Value: current date/time value for this control.

.ShowUpDown: (True) spin box is displayed for modifying the control value.

           ShowUpDown=False                                           ShowUpDown=True

.ShowCheckBox: (True) show checkbox within the control.

          ShowCheckBox=True

.RightToLeftLayout: (True) control layout is right when RightToLeft property is set to true.

 

       RightToLeft=true                                   RightToLeft=true

       RightToLeftLayout=true                          RightToLeftLayout=false

.MaxDate: Maximum date that can be selected.

.MinDate: Minimum date that can be selected.

.Format: date/time is displayed using standard or custom formatting. Format can be long, short, time, custom

Format String	Description
d	The one- or two-digit day.
dd	The two-digit day. Single-digit day values are preceded by a 0.
ddd	The three-character day-of-week abbreviation.
dddd	The full day-of-week name.
h	The one- or two-digit hour in 12-hour format.
hh	The two-digit hour in 12-hour format. Single digit values are preceded by a 0.
H	The one- or two-digit hour in 24-hour format.
HH	The two-digit hour in 24-hour format. Single digit values are preceded by a 0.
m	The one- or two-digit minute.
mm	The two-digit minute. Single digit values are preceded by a 0.
M	The one- or two-digit month number.
MM	The two-digit month number. Single digit values are preceded by a 0.
MMM	The three-character month abbreviation.
MMMM	The full month name.
s	The one- or two-digit seconds.
ss	The two-digit seconds. Single digit values are preceded by a 0.
t	The one-letter A.M./P.M. abbreviation (A.M. is displayed as "A").
tt	The two-letter A.M./P.M. abbreviation (A.M. is displayed as "AM").
y	The one-digit year (2001 is displayed as "1").
yy	The last two digits of the year (2001 is displayed as "01").
yyyy	The full year (2001 is displayed as "2001").

Ex:

                 Format=long                        Format=short              Format=time            

 Format=custom

CustomFormat= MMMM dd, yyyy - dddd

19.  MonthCalendar Control

20.  ListView Control

ListView displays a collection of items that can be displayed using one of four different views.

Columns Collection

.Columns: the columns shown in detail view

                                       View= Details

.Items: the items in list view

Items Collection

.FullRowSelect: (True) show full row select as follow.

.MultiSelect: (True) allow multiple items to be selected.

.GridLines: (True) show grid line as follow  

.HeadStyle: the style of column header in detail view. Head style can be None, NoneClickable, Clickable

.HideSelection: (True) removes highlighting from selected item when control does not have focus

.HotTracking: (True) allows items to appear as hyperlink when the mouse hover them

.HoverSelection: (True) allow item to be selected when mouse hover on it.

.Scrollable: (True) display scrollbar if contain more items than can fit in the client area.  

 

                 Scrollable=True                                                                        Scrollable=False

.BackgroundImage: set background as shown below.

.BackgroundImageTiled: (True) background image will be tiled to fill the entire background for the control.

.Sorting: (True) items to be sorted in ascending or descending order.

 

                          Sorting= Ascending                                             Sorting=Descending

                           

Basic Programming Language

Chapter II

  I.        Variables

Variable hold any type of information and store it in memory. Variable served for any process of

Calculation. Variable can be declared as follow   

a.    Single variable declaration

                     Dim variable as type

b.    Single variable declaration

                     Dim variable1, variable2,… as type　　　　　　　　　　　　　

        Variable: represent the name of memory location.

        Type     : represent the type of data will be stored in that variable.

Data_type

Type	Size	Values
Boolean	2 bytes	True or False
Byte	1 byte	0 to 255 (unsigned byte)
SByte	1 byte	-128 to 127 (signed byte)
Char	2 bytes	0 to 65,535 (unsigned character)
Short	2 bytes	-32,768 to 32,767
UShort	2 bytes	0 through 65,535 (unsigned short)
Integer	2 bytes	2,147,483,648 to 2,147,483,647
UInteger	4 bytes	0 through 4,294,967,295 (unsigned integer)
Long	4 bytes	-9,223,372,036,854,775,808 to 9,223,372,036,854,775,807
ULong	8 bytes	0 through 18,446,744,073,709,551,615 (unsigned long)
Decimal	16 bytes	0 to +/-79,228,162,514,264,337,593,543,950,335 with no decimal point. 0 to +/-7.9228162514264337593543950335 with 28 places
Single	4 bytes	-3.4028235E+38 to -1.401298E-45 (negative values) 1.401298E-45 to 3.4028235E+38 (positive values)
Double	8 bytes	-1.79769313486231570E+308 to -4.94065645841246544E-324 (negative values) 4.94065645841246544E-324 to 1.79769313486231570E+308 (positive values)
String	variable	Depending on the platform, a string can hold approximately 0 to 2 billion Unicode characters
Date	8 bytes	January 1, 0001 0:0:00 to December 31, 9999 11:59:59 pm
Object	4 bytes	Points to any type of data
Structure	variable	Structure members have their own ranges

        Example                        

-     Declaring variable without initial value

                     Dim price As Integer

         Dim fullname As String

-     Declaring variable with Initial value

         Dim price As Integer = 100

Dim fullname As String = "naroth"

Dim verify As Boolean =False

Dim mydate As Date = #12/31/2007#

Type Characters

Data type characters identify a value’s data type. The following table lists Visual Basic’s data type

characters.

Character	Data Type
%	Integer
&	Long
@	Decimal
!	Single
#	Double
$	String

Example

    Dim num_desserts& = 100

    Dim satisfaction_quotient# = 1.23

    Dim email$ ="hunyou1@gmail.com"

           In addition to data type characters, Visual Basic provides a set of literal type characters that determine the data type of literal values. These are values that you explicitly type into your code in statements such as

assignment and initialization statements. The following table lists Visual Basic’s literal type characters.

Character	Data Type
S	Short
US	UShort
I	Integer
UI	UInteger
L	Long
IL	ULong
D	Decimal
F	Single (F for “floating point”)
R	Double (R for “real”)
C	Char (note that this is a lower case “c”)

Example

    Dim ch = "X"c  ‘ch has char data type

    Dim score = 20.53F ‘score has single data type

    Dim price = 1.7R ‘price has double data type

    Dim i = 12L ‘price has long data type

           Visual Basic also lets you precede a literal integer value with &H to indicate that it is hexadecimal (base

16) or &O to indicate that it is octal (base 8).

Example

    Dim base10 As Integer = 100  ‘ Decimal 100.

    Dim base16 As Integer = &H64 ‘ Hexadecimal &H64 = 6 * 16 + 4 =100.

    Dim base8 As Integer = &O144.  ‘ Octal &O144 =1*8*8+4*8+4 = 100.

Notices

    Dim ch As Char

    ch = “X” ‘ Error because “X” is a String.

    ch = “X”c ‘ Okay because “X”c is a Char.

    Dim amount As Decimal

    amount = 12.34 ‘ Error because 12.34 is a Double.

    amount = 12.34D ‘ Okay because 12.34D is a Decimal.

Narrowing Conversions

           A narrowing conversion is one where data is converted from one type to another type that cannot hold

all of the possible values allowed by the original data type. For example, the following code copies the

value from a Long variable into an Integer variable. A Long value can hold values that are too big to fit

in an Integer, so this is a narrowing conversion. The value contained in the Long variable may or may

not fit in the Integer.

Example

          Dim a As Long = 21

    Dim b As Integer = a ‘available to store

    -------------------------------------------

    Dim c As Long = 214748364712

    Dim d As Integer = c ‘unavailable to store

         Visual Basic’s data type conversion functions

Function	Converts To
CBool	Boolean
CByte	Byte
CChar	Char
CDate	Date
CDbl	Double
CDec	Decimal
CInt	Integer
CLng	Long
CObj	Object
CSByte	SByte
CShort	Short
CSng	Single
CStr	String
CUInt	UInteger
CULng	ULong
CUShort	UShort

Example

       CInt(0.5)=0, CInt(0.51)=1, CInt(1.5)=2, CInt("1.5")=2                

      CStr(0.5)="0.5", CInt(32)= "32"

   CDbl(32)= 32, CDbl("27.69")= 27.69