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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.