1. Chapter 9 Color, Sound and Graphics
Key Concepts:
Applying color to GUI
Using images in applications
Using Sounds in applications
Using Graphics class
© 2012 EMC Publishing, LLC

2. Color can enhance an application interface.
4/10/ :51 PM
Chapter 9 Using Color
Color can enhance an application interface.
Control objects have BackColor and ForeColor properties.
Visual Basic color constants can be used to change background and foreground colors at run time.
BackColor and ForeColor can be chnaged at runtime: see synthax in Notes
BackColor = background color of an object not including any text
ForeColor = color of the text. Web colors include Transparent->objects on a form can be set to this “color” so the form’s BackColor shows through the object ( when cursor is on the object )
Controls ( Button, CheckBox and Label ) are derived from the Form control.
Form is parent control and the Button, CheckBox and Label are child controls.
When a parent control property value is changed the corresponding child property value is also changed unless the child property is explicitly set ( for example BackColor )
At runtime Imports System.Drawing statement must be included at the top of a program so the members of Drawing class are accessible:
Example:
Imports System.Drawing ….
Me.btnDisplay.BackColor = Color.Honeydew ‘button color
Me.BackColor = Color.Lime ‘Form color
Example Windows app ( Form, 6 buttons: Honneydew, Thistle, SkyBlue, Turquoise, DarkKhaki, Salmon ):
Import System.Drawing
Public Class Form1
Private Sub ChangeColor_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnHoneyDew.Click, btnThistle.Click,
btnSkyBlue.Click, btnTurquoise.Click, btnDarkKhaki.Click, btnSalmon.Click
Dim btnColorClicked As Button = sender
Dim colour As String
colour = btnColorClicked.Text
Select Case colour
Case "Honeydew"
Me.BackColor = Color.Honeydew
Case "Thistle"
Me.BackColor = Color.Thistle
Case "SkyBlue"
Me.BackColor = Color.SkyBlue
Case "Turquoise"
Me.BackColor = Color.Turquoise
Case "DarkKhaki"
Me.BackColor = Color.DarkKhaki
Case "Salmon"
Me.BackColor = Color.Salmon
End Select
End Sub
End Class
© 2012 EMC Publishing, LLC

3. Chapter 9 The Color Dialog Box
4/10/ :51 PM
Chapter 9 The Color Dialog Box
Predefined dialog box that allows the user to select a color.
It can be displayed at run time to allow users to choose which color to assign to the BackColor or ForeColor of an Object.
Click ColorDialog control ( in the Dialogs subsection of the Toolbar). It has no graphical elements so it is diplayed in the component tray.
© 2012 EMC Publishing, LLC

4. Chapter 9 The ColorDialog Control
4/10/ :51 PM
Chapter 9 The ColorDialog Control
Properties include:
Color is the color selected in the dialog box.
AllowFullOpen allows the user to create a custom color.
The Color dialog box is displayed using the ShowDialog() method.
Example ChangeFormColor(Windows app, Form and 7 buttons: : Honneydew, Thistle, SkyBlue, Turquoise, DarkKhaki, Salmon, Choose Color )
Imports System.Drawing
Public Class Form1
Private Sub ChangeColor_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnHoneyDew.Click, btnThistle.Click,
btnSkyBlue.Click, btnTurquoise.Click, btnDarkKhaki.Click, btnSalmon.Click, btnChooseColor.Click
Dim btnColorClicked As Button = sender
Dim colour As String
colour = btnColorClicked.Text
Select Case colour
Case "Honeydew"
Me.BackColor = Color.Honeydew
Case "Thistle"
Me.BackColor = Color.Thistle
Case "SkyBlue"
Me.BackColor = Color.SkyBlue
Case "Turquoise"
Me.BackColor = Color.Turquoise
Case "DarkKhaki"
Me.BackColor = Color.DarkKhaki
Case "Salmon"
Me.BackColor = Color.Salmon
Case "Choose Color"
Me.ColorDialog1.ShowDialog()
Me.BackColor = Me.ColorDialog1.Color
End Select
End Sub
End Class
© 2012 EMC Publishing, LLC

5. Most objects have a BackgroundImage property.
4/10/ :51 PM
Chapter 9 Using Images
Most objects have a BackgroundImage property.
The Button and Label control objects have an Image property.
Images can be changed at run time using the My.Resources object:
Me.btnEvents.Image = My.Resources.Flower
Me.BackgroundImage = My.Resources.Balloons
Tiled = an image is repeated to fill the form. Objects on the form can be set to a BackColor of Transparent to better show the tiled form image.
The image on an object can be changed at run time:
Me.btnEvents.Image = My.Resources.Flower ‘button image
Me.BackgroundImage = My.Resources.Balloons ‘form image
When changing images at run time, the image files must already be in the Resource folder of the project before running the application.
Windows example ChangeImage:
Private Sub ChangeImage_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnRed.Click,
btnPink.Click, btnOrange.Click, btnGreen.Click
Dim btnImageColourClicked As Button = sender
Dim color As String
color = btnImageColourClicked.Tag
Select Case color
Case "red"
Me.BackgroundImage = My.Resources.red
Case "pink"
Me.BackgroundImage = My.Resources.pink
Case "orange"
Me.BackgroundImage = My.Resources.orange
Case "green"
Me.BackgroundImage = My.Resources.green
End Select
End Sub
© 2012 EMC Publishing, LLC

6. Chapter 9 The SystemSounds Class
4/10/ :51 PM
Chapter 9 The SystemSounds Class
Includes five properties for making Windows operating system sounds: Asterisk Beep Exclamation Hand Question
The Play() method is used to make the sound: SystemSounds.Beep.Play()
Applications require the Imports System.Media statement before any declaration
Applications use simple sounds sometimes to provide feedback to the user ( beep when wrong type of data is entered ).
Windows example TestSounds:
Imports System.Media
Public Class Form1
Private Sub btnAsterisk_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnAsterisk.Click
SystemSounds.Asterisk.Play()
End Sub
Private Sub btnBeep_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnBeep.Click
SystemSounds.Beep.Play()
Private Sub btnExclamation_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnExclamation.Click
SystemSounds.Exclamation.Play()
Private Sub btnHand_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnHand.Click
SystemSounds.Hand.Play()
Private Sub btnQuestion_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnQuestion.Click
SystemSounds.Question.Play()
End Class
© 2012 EMC Publishing, LLC

7. Chapter 9 Playing Sound Files
4/10/ :51 PM
Chapter 9 Playing Sound Files
Visual Basic applications can play Windows WAV audio files.
My.Computer.Audio objects includes the Play() and Stop() methods for working with WAV files.
-Play(resource, playmode)
-Stop()
Audio files must be added to the Resources folder for an application to access them.
Play(resource, playmode)
playmode: Background, BackgroundLoop, WaitToComplete ( prevents user interaction until the sound loaded and completely played )
Windows Example: Music Demo
© 2012 EMC Publishing, LLC

8. Chapter 9 The Timer Control
4/10/ :51 PM
Chapter 9 The Timer Control
Applications often perform actions at regular intervals.
The Timer object is used to execute code at regular intervals
Add from the Tollbox to the component tray
© 2012 EMC Publishing, LLC

9. Chapter 9 The Timer Control
4/10/ :51 PM
Chapter 9 The Timer Control
Properties include:
(Name) should begin with tmr.
Interval is the amount of time that passes before the Tick event procedure executes.
Enabled allows a Tick event to occur at the end of each interval.
Methods include Start() and Stop().
A Tick event procedure is coded for each timer object added to an application. A Tick event occurs after the time specified in the Interval property elapses (1000 = 1 sec). After a Tick event occurs timing automatically starts over again.
Change Enabled property to True.
Windows example Blinky:
Private Sub tmrColorChange_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles tmrColorChange.Tick
Static colorChange As Boolean = True
If colorChange Then
Me.btnBlinky.ForeColor = Color.HotPink
colorChange = False
Else
Me.btnBlinky.ForeColor = Color.CadetBlue
colorChange = True
End If
End Sub
© 2012 EMC Publishing, LLC

10. Uses a timer control object and a set of images.
4/10/ :51 PM
Chapter 9 Animation
Uses a timer control object and a set of images.
Images are cycled in a PictureBox control object to give the impression of motion.
A Case statement can be used to determine which image to display.
See Ch 9 Ex 9: BouncingBall.
© 2012 EMC Publishing, LLC

11. Chapter 9 The Graphics Class
4/10/ :51 PM
Chapter 9 The Graphics Class
Includes numerous methods for creating lines, shapes, solid shapes, and curves and polygons.
Methods require that a drawing surface be defined.
Dim formSurface as Graphics=Me.CreateGraphics
- This creates a Graphics object from the surface of the form
- CreateGraphics method is a control class method that encases a specific’s object area
© 2012 EMC Publishing, LLC

12. Chapter 9 The Graphics Class
4/10/ :51 PM
Chapter 9 The Graphics Class
Methods require that a Pen object be defined. Pen styles can be solid, dashed, and dotted. There are numerous colors to choose from.
Dim thinAquaPen As New Pen(Color.Aqua, 2)
- the keyword New declares a new object
- ColorAqua is a Visual Basic color constant
- 2 is the thickness of the line
© 2012 EMC Publishing, LLC

13. Chapter 9 The Graphics Class
4/10/ :51 PM
Chapter 9 The Graphics Class
A drawing surface can be thought as a grid consisting of a set of points with (x, y) values
Each point is a pixel ( picture element ) and the number of pixels in a surface depends on the screen resolution. The point with coordinates (0, 0)is the pixel in the very upper-left corner
Methods can accept coordinates in (x1, y1), (x2, y2) format or as Point structures that define each point.
© 2012 EMC Publishing, LLC

14. The Graphics Class
The Size property of an object stores both height and width. For many objects ( labels, buttons…)the height and the width correspond to the coordinates of point in the lower right of the object
For a Form object the Size property returns the size of the form
Dim formMaxX As Integer = Me.Size.Width ‘300
Dim formMaxY as Integer = Me.Size.Height ‘300
Returns the Form’s Size property data.
© 2012 EMC Publishing, LLC

15. Chapter 9 The Graphics Drawing Surface
4/10/ :51 PM
Chapter 9 The Graphics Drawing Surface
A form's drawing surface is reduced by the title bar and borders. Each square on the grid represents 10 pixels. Counting the grid marks show that although the form size is 300 by 300, the actual drawing surface is less, about 292 by 265.
See VB project Coordinates.
Private Sub btnShowGrid_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnShowGrid.Click
Dim formSurface As Graphics = Me.CreateGraphics
Dim maxX As Integer = Me.Size.Width
Dim maxY As Integer = Me.Size.Height
Dim magentaPen As New Pen(Color.Magenta, 1)
Dim greenPen As New Pen(Color.Green, 1)
'Draw a grid that is 10 pixels by 10 pixels
For xCoord As Integer = 0 To maxX Step 10
For yCoord As Integer = 0 To maxY Step 10
If xCoord Mod 50 Or yCoord Mod 50 = 0 Then
'makes every 50th pixel a green square
formSurface.DrawRectangle(greenPen, xCoord, yCoord, 10, 10)
Else
formSurface.DrawRectangle(magentaPen, xCoord, yCoord, 10, 10)
End If
Next yCoord
Next xCoord
Me.lblCoords.Text = "Max x is " & maxX & ", " & "Max y is " & maxY
End Sub
© 2012 EMC Publishing, LLC

16. Chapter 9 The Graphics Class
4/10/ :51 PM
Chapter 9 The Graphics Class
The Graphics class methods require a pen along with the shape position and size.
Graphics methods include:
DrawLine(pen,x1,y1,x2,y2)->line from(x1, y1) to (x2, y2)
DrawRectangle(x1,y1,width,height)-> draws rectangle with upper-left corner at (x1,y1) and size width x height
DrawEllipse(x1,y1,width,height)-> draws an ellipse within a rectangular area that has upper-left corner at (x1,y1) and size width x height
© 2012 EMC Publishing, LLC

17. Chapter 9 The Graphics Class
4/10/ :51 PM
Chapter 9 The Graphics Class
DrawArc(pen,x1,y1,width,height,startAngle,sweepAngle) ->draws an arc tha starts at angle startAngle and continues clockwise sweepAngle degrees. The arc is within a rectangular area that has its upper-left corner at (x1,y1) on a Graphics object with width ang height
Clear(color)-> clears the drawing surface with “color”which can be a System.Drawing color constant or the current object color
See example TestGraphics:
Public Class Form1
Private Sub btnDrawNow_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnDrawNow.Click
'Create drawing surface
Dim formSurface As Graphics = Me.CreateGraphics
'Define pen
Dim indigoPen As New Pen(Color.Indigo, 5)
Dim salmonPen As New Pen(Color.Salmon, 3)
Dim tealPen As New Pen(Color.Teal, 2)
'Draw on form
formSurface.DrawRectangle(indigoPen, 0, 0, 200, 200)
formSurface.DrawEllipse(salmonPen, 0, 0, 200, 200)
formSurface.DrawArc(tealPen, 0, 0, 100, 100, 0, 120)
End Sub
End Class
© 2012 EMC Publishing, LLC

18. Chapter 9 The Graphics Class
4/10/ :51 PM
Chapter 9 The Graphics Class
The shapes in the TestGraphics application have been drawn using absolute coordinates, meaning that actual sizes were used to specify the shape sizes
Relative coordinates are another option. They are relative to the size of the form. If the form is resized the shapes maintain their relative size and position. See DrawShapes program and change Form’s size.
The Pen class contains the DashStyle property: dashed lines, dotted lines and dash-dot are a few examples.
See example DrawShapes ( sizes relative to form’s dimensions: change Form’s size and click Draw again to check )
Private Sub btnDraw_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnDraw.Click
Dim formSurface As Graphics = Me.CreateGraphics
formSurface.Clear(Me.BackColor)
'Determine max X and max Y values
Dim maxX As Integer = Me.Size.Width
Dim maxY As Integer = Me.Size.Height
'Define all pens
Dim lightSeaGreenPen As New Pen(Color.LightSeaGreen, 2)
Dim thickerDeepPinkPen As New Pen(Color.DeepPink, 10)
Dim thickDodgerBluePen As New Pen(Color.DodgerBlue, 5)
Dim thinRedPen As New Pen(Color.Red, 3)
'Draw thin LightSeaGreen horizontal line
formSurface.DrawLine(lightSeaGreenPen, 30, maxY \ 3, maxX - 30, maxY \ 3)
'Draw thicker DeepPink circle(ellipse)
formSurface.DrawEllipse(thickerDeepPinkPen, maxX \ 2, maxY \ 2, 40, 40)
'Draw thick DashDotDot DodgerBlue rectangle
thickDodgerBluePen.DashStyle = Drawing.Drawing2D.DashStyle.DashDotDot
formSurface.DrawRectangle(thickDodgerBluePen, 80, maxY \ 4, maxX \ 3, 70)
'Draw thin Red arc
formSurface.DrawArc(thinRedPen, 30, 0, maxX - 60, maxY - 60, 0, 180)
End Sub
© 2012 EMC Publishing, LLC

19. Chapter 9 Drawing Solid Shapes
4/10/ :51 PM
Chapter 9 Drawing Solid Shapes
The Graphics class methods that fill shapes require a brush along with the shape position and size.:
Dim purpleBrush as New SolidBrush(Color.BlueViolet)
FillRectangle(brush,x1,y1,width,height)
FillEllipse(brush,x1,y1,width,height)
FillPie(brush,x1,y1,width,height,startAngle,sweepAngle)
The parrameters of the methods are the same as corresponding Draw methods.
See example TestSolidGraphics:
Private Sub btnDraw_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnDraw.Click
Dim formSurface As Graphics = Me.CreateGraphics
'Define all pens
Dim indigoBrush As New SolidBrush(Color.Indigo)
Dim limeGreenBrush As New SolidBrush(Color.LimeGreen)
Dim goldBrush As New SolidBrush(Color.Gold)
’Draw on form
formSurface.FillPie(indigoBrush, 0, 210, 50, 50, 0, 180)
formSurface.FillRectangle(limeGreenBrush, 0, 0, 200, 200)
formSurface.FillEllipse(goldBrush, 0, 0, 200, 200)
End Sub
© 2012 EMC Publishing, LLC

20. Chapter 9 The Point Structure
4/10/ :51 PM
Chapter 9 The Point Structure
A point has an x-coordinate a y-coordinate
A Point structure can be defined with X and Y members:
Dim minPoint As Point
minPoint.X=0
minPoint.Y=0 Or
Dim minPoint as New Point(0, 0)
See example DrawLinePointStruct:
Private Sub btnDraw_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnDraw.Click
Dim labelSurface As Graphics = Me.lblDrawLine.CreateGraphics
Dim orangePen As New Pen(Color.Orange, 5)
Dim minPoint As New Point(0, 0)
Dim maxPoint As New Point(Me.lblDrawLine.Size.Width, Me.lblDrawLine.Size.Height)
labelSurface.DrawLine(orangePen, minPoint, maxPoint)
End Sub
© 2012 EMC Publishing, LLC

21. Chapter 9 Drawing curves and Polygons
4/10/ :51 PM
Chapter 9 Drawing curves and Polygons
DrawCurve(pen, points)
DrawClosedCurve(pen, points)
FillClosedCurve(brush, points)
DrawPolygon(pen, points)
FillPolygon(brush, points)
See example TestCurvesAndPolygons
Private Sub btnDraw_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnDraw.Click
Dim labelDrawCurve As Graphics = Me.lblDrawCurve.CreateGraphics
Dim labelDrawClosedCurve As Graphics = Me.lblDrawClosedCurve.CreateGraphics
Dim labelFillClosedCurve As Graphics = Me.lblFillClosedCurve.CreateGraphics
Dim labelDrawPolygon As Graphics = Me.lblDrawPolygon.CreateGraphics
Dim labelFillPolygon As Graphics = Me.lblFillPolygon.CreateGraphics
'Define pen and brush
Dim tomatoPen As New Pen(Color.Tomato, 1)
Dim tomatoBrush As New SolidBrush(Color.Tomato)
'Define points
Dim curvePoints() As Point = {New Point(10, 30), New Point(35, 35),
New Point(75, 80), New Point(120, 20)}
'Draw shapes
labelDrawCurve.DrawCurve(tomatoPen, curvePoints)
labelDrawClosedCurve.DrawClosedCurve(tomatoPen, curvePoints)
labelFillClosedCurve.FillClosedCurve(tomatoBrush, curvePoints)
labelDrawPolygon.DrawPolygon(tomatoPen, curvePoints)
labelFillPolygon.FillPolygon(tomatoBrush, curvePoints)
End Sub
© 2012 EMC Publishing, LLC

22. Chapter 9 The MouseDown Event
4/10/ :51 PM
Chapter 9 The MouseDown Event
Occurs when the user clicks the form or object associated with the MouseDown event.
Select Code window, click the object name in the Class Name list and then select MouseDown in the Method Name list
The e parameter includes X and Y properties specific to the mouse click that raised the event. The X and Y properties can be used to determine the coordinates of the mouse click.
See MouseEvent program:
Private Sub Form1_MouseDown(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles Me.MouseDown
MessageBox.Show("X:" & e.X & " Y:" & e.Y)
End Sub
See Tracker program:
Static previousPoint As Point
Dim formSurface As Graphics = Me.CreateGraphics
Dim orangeRedPen As New Pen(Color.OrangeRed, 3)
Dim mouseClick As Point
'Get point of mouse click
mouseClick.X = e.X
mouseClick.Y = e.Y
'Draw line from previous point to point clicked
formSurface.DrawLine(orangeRedPen, previousPoint, mouseClick)
'Make point click the next starting point
previousPoint = mouseClick
© 2012 EMC Publishing, LLC