1. Chapter 12 Graphics in Windows and the Web
Programming In
Visual Basic .NET

2. Graphics in Windows and the Web
Graphics refers to any text, drawing, image, or icon that is displayed on the screen
Windows Forms
PictureBox control
Can draw graphics shapes (circles, lines, rectangles) on a form or control
Web Forms
Image control
© 2005 by The McGraw-Hill Companies, Inc. All rights reserved.

3. The Graphics Environment
Uses GDI+ technology for drawing graphics
GDI+ is designed to be device-independent
Code to draw a graphic is the same regardless of the output device
© 2005 by The McGraw-Hill Companies, Inc. All rights reserved.

4. Steps for Drawing Graphics
Create a Graphics object to use as a drawing surface
Instantiate a Pen or Brush object to draw with
Call the drawing methods from the Graphics object
© 2005 by The McGraw-Hill Companies, Inc. All rights reserved.

5. The Paint Event Procedure
Place code for drawing methods in the Paint event procedure for the form or control
Graphics are redrawn every time form is repainted or rendered
© 2005 by The McGraw-Hill Companies, Inc. All rights reserved.

6. The Paint Event Procedure (continued)
Declare a Graphics object
Assign the Graphics property of the procedure's PaintEventArgs argument to the new Graphics object
Private Sub Form1_Paint(ByVal sender As Object, _
ByVal e As System.Windows.Forms.PaintEventArgs) _
Handles MyBase.Paint
' Create a graphics object. Dim gr As Graphics = e.Graphics
© 2005 by The McGraw-Hill Companies, Inc. All rights reserved.

7. The Paint Event Procedure (continued)
Also can create a graphic object by calling the CreateGraphics method
Use to display a graphic from a procedure other than the Paint event
' Draw on the form.
Me.CreateGraphics.MethodName
' Draw on a control.
myGroupBox.CreateGraphics.MethodName
© 2005 by The McGraw-Hill Companies, Inc. All rights reserved.

8. Pen and Brush Objects Pen Brush
Use to draw lines or outlined shapes such as rectangles or circles
Properties: Width, Color
Brush
Use to create filled shapes
Property: Color
© 2005 by The McGraw-Hill Companies, Inc. All rights reserved.

9. Pen and Brush Objects (continued)
Width property
Specifies the width of the stroke of a line or outlined shape created by Pen object
Specified in pixels
Default width = One pixel
Color property
Specifies color of lines drawn by Pen object and color of filled shapes drawn by Brush object
Assign color using Color constants
© 2005 by The McGraw-Hill Companies, Inc. All rights reserved.

10. The Pen Class Constructors Examples Pen(Color) Pen(Color, Width)
Dim redPen As New Pen(Color.Red)
Dim widePen As New Pen(Color.Black, 10)
© 2005 by The McGraw-Hill Companies, Inc. All rights reserved.

11. The SolidBrush Class Constructor Example SolidBrush(Color)
Dim blueBrush As New SolidBrush(Color.Blue)
There are other Brush Classes: TextureBrush, HatchBrush, LinearGradientBrush, PathGradientBrush. See Help for more information.
© 2005 by The McGraw-Hill Companies, Inc. All rights reserved.

12. Graphic Shapes Drawn with Pen and Brush Objects
Drawn with Brush
Drawn with Pen
© 2005 by The McGraw-Hill Companies, Inc. All rights reserved.

13. The Coordinate System
Graphics are measured from a starting point of 0,0 for the X and Y coordinates beginning in the upper-left corner
X represents the horizontal position and Y is the vertical position
The starting point depends on where the graphic is placed
© 2005 by The McGraw-Hill Companies, Inc. All rights reserved.

14. The Coordinate System (continued)
0,0
Position
On Form
Form
0,0
Position On
PictureBox
PictureBox
© 2005 by The McGraw-Hill Companies, Inc. All rights reserved.

15. The Coordinate System (continued)
Each drawing method allows a specific starting position using X and Y coordinates
Most of the drawing methods allow you to specify the position using either
Point structure
Size structure
Rectangle structure
© 2005 by The McGraw-Hill Companies, Inc. All rights reserved.

16. The Point Structure
Designed to hold the X and Y coordinates as a single unit
Create a Point object and give it values for X and Y
Use the object anywhere that accepts a Point structure as an argument
Example
Dim myStartingPoint As New Point(20, 10)
© 2005 by The McGraw-Hill Companies, Inc. All rights reserved.

17. The Size Structure Two components, specified in Pixels
Width (specified first)
Height
Use the object anywhere that accepts a Size structure as an argument
Example
Dim myPictureSize As New Size(100, 20)
© 2005 by The McGraw-Hill Companies, Inc. All rights reserved.

18. The Rectangle Structure
Defines a rectangular region
Specified by
Upper left corner (X and Y coordinates )
Size (width and height)
Use the object anywhere that accepts a Rectangle structure as an argument
Example
Dim myOtherRectangle As New Rectangle(xInteger, yInteger, _
widthInteger, heightInteger)
© 2005 by The McGraw-Hill Companies, Inc. All rights reserved.

19. The Rectangle Structure (continued)
May create Point, Size and Rectangle structures for single-precision floating-point values
Specify the following structures
PointF
SizeF
RectangleF
© 2005 by The McGraw-Hill Companies, Inc. All rights reserved.

20. Graphics Methods Two basic categories, draw and fill
Draw methods create an outline shape with a Pen object
Fill methods are solid shapes created with Brush objects
Each method requires X and Y coordinates or a Point object, some require the size
© 2005 by The McGraw-Hill Companies, Inc. All rights reserved.

21. Graphics Methods - General Form
DrawLine(Pen, x1Integer, y1Integer, x2Integer, y2Integer)
DrawLine(Pen, Point1, Point2)
DrawRectangle(Pen, xInteger, yInteger, widthInteger, heightInteger)
DrawRectangle(Pen, Rectangle)
FillRectangle(Brush, xInteger, yInteger, widthInteger, heightInteger)
FillRectangle(Brush, Rectangle)
FillEllipse(Brush, xInteger, yInteger, widthInteger, heightInteger)
FillEllipse(Brush, Rectangle)
© 2005 by The McGraw-Hill Companies, Inc. All rights reserved.

22. Graphics Methods – Code Example
Private Sub graphicsForm_Paint(ByVal sender As Object, _
ByVal e As System.Windows.Forms.PaintEventArgs) _
Handles MyBase.Paint
Dim gr As Graphics = e.Graphics ' Create a graphics object.
Dim redPen As New Pen(Color.Red)
gr.DrawRectangle(redPen, 10, 10, 30, 30) ' Draw a red rectangle. gr.DrawLine(redPen, 50, 0, 50, 300) ' Draw a red line.
Dim blueBrush As New SolidBrush(Color.Blue)
gr.FillEllipse(blueBrush, 100, 100, 50, 50) ' Draw a blue filled circle.
Dim widePen As New Pen(Color.Blue, 15)
gr.DrawLine(widePen, 300, 0, 300, 300) ' Draw a fat blue line.
End Sub
© 2005 by The McGraw-Hill Companies, Inc. All rights reserved.

23. Selected Methods from the Graphics Class
Clear
Dispose
DrawArc
DrawLine
DrawEllipse
DrawRectangle
DrawPie
DrawString
FillEllipse
FillPie
FillRectangle
See Help for more information on Graphics Methods: Contents > Visual Studio .NET > .NET Framework > Programming with the .NET Framework > Drawing and Editing Images > About GDI+ Managed Code > Lines, Curves, and Shapes
© 2005 by The McGraw-Hill Companies, Inc. All rights reserved.

24. Random Numbers
Random class contains methods to return random numbers of different data types
To generate a different series for each run, use an integer value when instantiating an object from the Random class (seeding the random number generator)
Can use system date to get different seed for each execution of code
Generate random numbers using the Random object’s Next method
© 2005 by The McGraw-Hill Companies, Inc. All rights reserved.

25. The Random.Next Method General Form Examples
' Any positive integer number.
Object.Next( )
' A positive integer up to the value specified.
Object.Next(maximumValueInteger)
' A positive integer in the range specified.
Object.Next(minimumValueInteger, maximumValueInteger)
' Return an integer in the range 0 – 10.
randomInteger = generateRandom.Next(10)
' Return an integer in the range 0 to the width of the form.
randomNumberInteger = generateRandom.Next(1, Me.Width)
© 2005 by The McGraw-Hill Companies, Inc. All rights reserved.

26. Simple Animation Possible approaches
Display an animated .gif file in a PictureBox
Replace one graphic with another
Move a picture
Rotate through a series of pictures
Create graphics with various graphics methods
On a Web page display animated .gif files or use a scripting language or Java Applets and avoid roundtrips to the server
© 2005 by The McGraw-Hill Companies, Inc. All rights reserved.

27. Controlling Pictures at Run Time
To speed execution, load pictures into controls and set Visible property to True at run time
Use the FromFile Method to load a picture at run time
Requires file name and path
Store image files in Bin folder to eliminate need for path
© 2005 by The McGraw-Hill Companies, Inc. All rights reserved.

28. Controlling Pictures at Run Time (continued)
Remove a picture from the display
Set Visible property to False or
Use the Nothing constant
Examples
logoPictureBox.Visible = False
logoPictureBox.Image = Nothing
© 2005 by The McGraw-Hill Companies, Inc. All rights reserved.

29. Switching Images Replace one picture with another
Use images (or icons) of similar sizes
May use images (or icons) with opposite states (open/closed, etc.)
© 2005 by The McGraw-Hill Companies, Inc. All rights reserved.

30. Moving a Picture Change the Left and Top properties OR, better
Use the control's SetBounds Method which produces a smoother-appearing move
© 2005 by The McGraw-Hill Companies, Inc. All rights reserved.

31. SetBounds Method Use to move a control or change its size General Form
Examples
SetBounds(xInteger, yInteger, widthInteger, heightInteger)
planePictureBox.SetBounds(xInteger, yInteger, planeWidth, planeHeight)
enginePictureBox.SetBounds(xInteger, yInteger, widthInteger, heightInteger)
© 2005 by The McGraw-Hill Companies, Inc. All rights reserved.

32. The Timer Component
Cause events to occur at a set interval with its Tick event
Useful for animation; move or change an image each time the Tick event occurs
Set value at run time or design time
© 2005 by The McGraw-Hill Companies, Inc. All rights reserved.

33. The Timer Component (continued)
Interval property
Between 0 and 65,535 milliseconds
1,000 milliseconds = 1 second
Enabled property
False (default) ==> Do not run Tick event
True ==> Run Tick event at designated interval
Tick event
Occurs each time the Timer's designated interval elapses, if Enabled = True
© 2005 by The McGraw-Hill Companies, Inc. All rights reserved.

34. The Scroll Bar Controls
Horizontal scroll bars
Vertical scroll bars
Use to scroll through a document or a window
Use to control items that have a range of values such as sound level, color, or size
Can be changed in small or large increments
© 2005 by The McGraw-Hill Companies, Inc. All rights reserved.

35. Scroll Bar Properties Together represent a range of values Minimum
Minimum value
Maximum
Maximum value
SmallChange
Distance to move when user clicks scroll arrows
LargeChange
Distance to move when user clicks gray area of scroll bar or presses Page-Up or Page-Down keys
© 2005 by The McGraw-Hill Companies, Inc. All rights reserved.

36. Scroll Bar Properties (continued)
Minimum value
(Minimum property)
Scroll Arrow
(SmallChange property)
Scroll Box
(Value property)
Gray Area
(LargeChange property)
Maximum value
(Maximum property)
© 2005 by The McGraw-Hill Companies, Inc. All rights reserved.

37. Scroll Bar Properties (continued)
Value Property
Indicates the current position of the scroll box and the corresponding value within the scroll bar
User clicks up Scroll Arrow
Value property decreases by the amount of the SmallChange unless Minimum has been reached
User clicks down Scroll Arrow
Value property increases by the amount of the SmallChange unless Maximum has been reached
© 2005 by The McGraw-Hill Companies, Inc. All rights reserved.

38. Scroll Bar Events ValueChanged event Scroll event
Occurs anytime the Value property changes, by user action or in code
Scroll event
Occurs when user drags the scroll box
As long as user continues to drag scroll box this event continues to occur
Only when user releases scroll box will Scroll event cease and ValueChanged event occur
© 2005 by The McGraw-Hill Companies, Inc. All rights reserved.