2. Quick revision quiz
1. What type of Visual Basic program creates a
standard Windows application?
2. What window is used to change the properties
(eg size, name,text) of a form or object?
3. How do you access the code of a control/object?
4. Which property of a picture box do you set to
display an image?
5. What is the default action/event for a button
(control)?
3. Answer time
1. Windows Form Application
2. The PROPERTIES window
3. Double click!
4. The IMAGE property
5. Click!
4. Lesson Objectives
1. Use controls to modify the appearance of a
Windows Form Application
2. Describe what a METHOD is
3. Use a Method in a code example
5. Revision – what is a control?
Anything that you can use in a program /
application to trigger an event or call a
procedure
6. Practical Revision Time!
1. Go to Visual Studio
2. (if you haven’t already) check your:
Tools>Options>Projects & Solutions settings
3. File > Open > Picture Box/Viewer
7. Let’s do our usual admin!
• Check the toolbox is pinned to the left
• Check the properties window is sorted A-Z
• Click once on the Form in the middle
8. Add a button with the properties:
Name btnEnlarge
Location 338,261
Size 21,23
Text +
NOTE!!!! If you changed the sizes/locations of your form/controls last lesson, you
will need to adjust the properties shown on this slide to match your form!!!!!!
9. Add ANOTHER button with the properties:
Name btnShrink
Location 359,261
Size 21,23
Text -
NOTE!!!! If you changed the sizes/locations of your form/controls last lesson, you
will need to adjust the properties shown on this slide to match your form!!!!!!
10. Double click on the ‘+’ button
Add the following code (no pressing the enter
key yet):
Me.
Notice what happens when you type in the .
Scroll down to ‘Width’ and then press the TAB
key to auto select it!
11. Let’s keep typing…
You should now have:
Me.Width
Keep typing so that you end up with:
Me.Width = Me.Width + 100
Me.Height = Me.Height + 100
(Making sure to press the Enter key after each line)
12. Double click on the ‘-’ button
Type in this code:
Me.Width = Me.Width - 100
Me.Height = Me.Height - 100
(Making sure to press the Enter key after each line)
13. Try running your program
1. Click the + button on your form
2. Click the – button on your form
3. Get it to a size you are happy with
4. Try opening an image using the “Select
Picture’ button
5. Now resize the window using the buttons to
see what happens!
6. Save it and then File > Close
15. To put it simply
Invoking / triggering a method, code is executed
or, in English…
A method makes something happen in your program
16. How do I tell the difference between
properties and methods?
A method looks like:
AlbumForm.ShowDialog()
or
Me.Close()
A property change looks like:
Me.Width = Me.Width + 100
17. Win Form App 2 – Web Browser
‘Title’ Property
This button will invoke a
method to load a web page
from the internet!
‘TextBox.Text’ Property
will be the address of
our web page
18. Web Browser – Create New Project
File >
New >
Project >
Windows Form Application
Name - SimpleWebBrowser
19. Web Browser – Add Controls (Web Browser)
1. Add WebBrowser
from ToolBox
2. Click on the Smart
Tag arrow as shown
3. Select ‘Unlock in
Parent Container’
4. Adjust the size so
that there is some
space at the bottom
for the other parts
20. Web Browser – Add Controls (Text Box)
1. Add TextBox from
Common Controls
2. Move it to the
bottom left
3. Edit its properties
to be:
1. Name – TextBox1
2. Text – (leave blank)
21. Web Browser – Add Controls (Button)
1. Add a Button from
Common Controls
2. Move it to the
bottom right
3. Edit its properties
to be:
1. Name – TextBox1
2. Text – ‘Show’
22. Web Browser – Check layout
1. Your form should
look like this with:
1. Web Browser
2. ‘Show’ button
3. Text Box
23. Double Click on the button
Type in the following code:
WebBrowser1.Navigate(TextBox1.Text)
Your code should look like (the green bit is an
optional comment):
24. How does this work?
The WebBrowser Control uses the Navigate() method to navigate to the Text Property of
the textbox (which just happens to be the website address that you typed in)
25. Summary
• A method makes something happen in code
• A property changes how something looks
• Properties and Methods work together in
programs
26. Quiz Time!
1. An attribute that changes the state of an
object is called a …………?
2. To change the value of a property, the
property is referenced on which side of the
=?
3. Visual Basic 2010 is known as am object-
oriented language – true or false?
Lesson is split into two parts, may be split over two periods if required. The parts are:Reinforce the use of controls and properties through carrying on with the PictureBox Viewer project.Learn about methods and use the WebBrowser example to demonstrate the use of methodsThis may be split over two lessons if required due to time constraints.
If you don’t have picture box viewer already made then you can unhide slides 11-19 that give you the instructions and code for making the Picture Box Viewer
Text entered into the Title bar appears in the open file dialog box that opens later
Clicking on a button is called an event. The code that you put in the button is called an event handler, ie it tells the program the instructions to carry out once the button is clicked.
Finished code: Private Sub btnSelectPicture_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnSelectPicture.Click ' Show the open file dialog box. If ofdSelectPicture.ShowDialog = DialogResult.OK Then ' Load the picture into the picture box. picShowPicture.Image = Image.FromFile(ofdSelectPicture.FileName) ' Show the name of the file in the form's caption. Me.Text = "Picture Viewer(" & ofdSelectPicture.FileName & ")" End If End SubComments in green
Finished code: Private Sub btnQuit_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnQuit.Click ' Close the window and exit the application Me.Close() End SubComments in green
The typing of the period will prompt VS to produce a drop down menu that will afford you a number of options to choose form that suit the controls in use. This is called Intellisense (aka predictive text).
The typing of the period will prompt VS to produce a drop down menu that will afford you a number of options to choose form that suit the controls in use. This is called Intellisense (aka predictive text).
They may have named the Select Picture button as something else – Image, select etcetc
In addition to properties, most objects have methods. Methods are actions the object can perform, in contrast to attributes, which describe the object. To understand this distinction, think about the pet object on the slide. A Dog object has a certain set of actions it can perform. These actions, called methods in Visual Basic, include barking, tail wagging, and eating your homework. The figure above illustrates the Dog Object and its methods.
Examples of common methods would be saving or deleting a record in a database. Properties are different in that they are used to get and set the attributes of an object (eg size/location/colouretc)
The notable difference in the coding of a method versus properties is the use of parentheses (brackets).
This is what we are going to build in the next example that uses methods and properties/controls to create a basic Windows Form Application to browse and view web pages.Follow the instructions over the next few slides to build your first web browser!
Make sure to name the project before hitting ok/create/new button!
The Web Browser control will automatically take up the whole of the form window if allowed. To manually override this, we need to unlock it from the confines of the form. You will see why soon!