Chapter 13 Graphics, Animation, Sound, and Drag-and-Drop Copyright © 2011 by The McGraw-Hill Companies, Inc. All Rights Reserved. McGraw-Hill

13-2 Objectives (1 of 2) Use Graphics methods to draw shapes, lines, and filled shapes. Create a drawing surface with a Graphics object. Instantiate Pen and Brush objects as needed for drawing. Create animation by changing pictures at run time. Create simple animation by moving images.

13-3 Objectives (2 of 2) Use the Timer component to automate animation. Use scroll bars to move an image. Add a sound player component to add sound to a project. Incorporate drag-and-drop events into your program. Draw a pie chart using the methods of the Graphics object.

13-4 Graphics in Windows and the Web Graphics refers to any text, drawing, image, or icon that is displayed on the screen in either: – Windows Forms PictureBox control Can draw graphics shapes (circles, lines, rectangles) on a form or control Accepts more file formats than a Web Form – Web Forms Image control

13-5 The Graphics Environment >NET framework 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.

13-6 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.

13-7 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. 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 Me.Paint ' Create a graphics object. Dim Gr As Graphics = e.Graphics

13-8 Pen and Brush Objects (1 of 2) Pen Used to draw lines or outlined shapes such as rectangles or circles Properties: Width, Color Brush Used to create filled shapes Property: Color

13-9 Pen and Brush Objects (2 of 2) 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 Assigns color using Color constants

13-10 Graphic Shapes Drawn with Pen and Brush Objects Drawn with Pen Drawn with Brush

13-11 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)

13-12 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.

13-13 The Coordinate System (1 of 2) 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 — each drawing method allows a specific starting position using X and Y coordinates. Most of the drawing methods allow the position to be specified using either Point structure Size structure Rectangle structure

13-14 The Coordinate System (2 of 2) Form PictureBox 0,0 Position On Form 0,0 Position On PictureBox

13-15 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)

13-16 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) ‘Width is 100, height is 20

13-17 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) Dim MyRectangle As New Rectangle(MyStartingPoint, MyPictureSize)

13-18 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.

13-19 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)

13-20 Graphics Methods — Code Example Private Sub GraphicsForm_Paint(ByVal sender As Object, _ ByVal e As System.Windows.Forms.PaintEventArgs) _ Handles Me.Paint With e.Graphics Dim SmallRectangle as New Rectangle(10, 10, 30, 30).DrawRectangle(Pens.Red, SmallRectangle).DrawLine(Pens.Green, 50, 0, 50, 300) ' Draw a blue filled circle. ' If the width and height are equal, then the FillEllipse method ' draws a circle; otherwise it draws an ellipse..FillEllipse(Brushes.Blue, 100, 100, 50, 50) ' Draw a fat blue line..DrawLine(New Pen(Color.Blue, 15), 300, 0, 300, 300) End With End Sub

13-21 Selected Methods from the Graphics Class Clear( ) Dispose( ) DrawArc( ) DrawLine( ) DrawEllipse( ) DrawRectangle( ) DrawPie( ) DrawString( ) FillEllipse( ) FillPie( ) FillRectangle( ) See Help for information for all draw and fill methods

13-22 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.

13-23 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. GenerateRandomInteger = GenerateRandom.Next(10) ' Return an integer in the range 0 to the width of the form. RandomNumberInteger = GenerateRandom.Next(1, Me.Width)

13-24 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 round trips to the server.

13-25 Displaying an Animated Graphic Animation is achieved on either a Windows Form or a Web Form by displaying an animated.gif file. Use a PictureBox control on a Windows Form and an Image control on a Web Form.

13-26 Controlling Pictures at Run Time Pictures can be added or changed at run time. To speed execution, load pictures in controls that can be made invisible 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. To remove a picture from the display, either hide or use the Nothing constant.

13-27 Switching Images Easy way to show animation is to replace one picture with another. Use images (or icons) of similar sizes. May use images (or icons) with opposite states (open/closed, on/off, etc.).

13-28 Creating Animation Each of the graphics is placed into the upper picture box when the user clicks the Change button.

13-29 Moving a Picture Change the Left and Top properties --OR--, better Use the control's SetBounds Method, which produces a smoother-appearing move.

13-30 SetBounds Method Used to move a control or change its size General Form Examples SetBounds(XInteger, YInteger, WidthInteger, HeightInteger) PlanePictureBox.SetBounds(XInteger, YInteger, PlaneWidthInteger, PlaneHeight)Integer EnginePictureBox.SetBounds(xInteger, YInteger, WidthInteger, HeightInteger)

13-31 The Timer Component (1 of 2) Causes 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 Sets value at run time or design time

13-32 The Timer Component (2 of 2) 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

13-33 The Scroll Bar Controls Horizontal scroll bars Vertical scroll bars Used to scroll through a document or a window Used to control items that have a range of values such as sound level, color, or size Can be changed in small or large increments

13-34 Scroll Bar Properties (1 of 3) 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

13-35 Scroll Bar Properties (2 of 3) Gray Area (LargeChange property) Scroll Box (Value property) Scroll Arrow (SmallChange property) Maximum value (Maximum property) Minimum value (Minimum property)

13-36 Scroll Bar Properties (3 of 3) 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.

13-37 Scroll Bar Events ValueChanged 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.

13-38 The SoundPlayer Component Programs play sounds files, called wave files (.wav) using the new My.Computer.Audio.Play --OR-- A SoundPlayer component. The component’s SoundLocation property gives the location of the file.

13-39 Adding Sounds Files When using sounds in a project, the best way is to add the files to the project’s resources. To refer to the filename in code, use “My.Resources.Filename”

13-40 A Sound-Playing Program Users can choose to play one of the preselected sounds or select a file to play. File types are restricted using the filter property.

13-41 Drag-and-Drop Programming (1 of 2) Often, Windows users use drag-and-drop events rather than selecting a menu item or pressing a button. Drag-and-drop programming requires that a user begin the drag-drop with a MouseDown event. Determine the effect of the drop with a DragEnter event. The event that holds the code for the drop is the DragDrop event.

13-42 Drag-and-Drop Programming (2 of 2) The Source object is dragged to the Target object in a drag-and-drop operation.

13-43 The Source Object The item chosen to drag With.NET programming, begin a drag-drop operation by setting the source object using a control’s DoDragDrop method. The DragDrop effect specifies the requested action; choices include DragDropEffects.Copy, DragDropEffects.Move, and DragDropEffects.None. General Form Example ObjectName.DoDragDrop(DataToDrag, DesiredDragDropEffect)

13-44 The Target Object Location at which a user releases the mouse, a drop, is the target. Forms may have multiple targets. To set a control to be a target, set its AllowDrop property to True. Target control needs DragEnter procedure that sets the effect DragDrop event procedure that executes the action to take and when the drop takes place

13-45 The DragEnter Event When a user drags a source object over the target, the target control’s DragEnter event fires. The argument is defined as DragEventArgs, which has special properties for the drag operation.

13-46 The DragDrop Event Statements to perform additional functions are added to the DragDrop event. Data that is being dragged is contained in the Data property of the argument of the DragDrop event procedure. Retrieve the dragged data using the GetData method of the Data object. Format the data or use a predefined clipboard data format.