CST238 Week 6• Questions / Concerns?• Announcements

– HW#2 due next Monday (project concept/preliminary design)– Check-off Take Home lab#5

• Comment about Test#1• New topics

– Drawing & Animation• GUI Bloopers presentations (#1&#2)• Coming up:

– GUI Presentation #3 & #4 next Monday– Data Binding & Data Views

• Take Home Lab#6

Drawing• You need the Graphics class from

System.Drawing namespace.• Two ways to get a Graphics object– Create a new that’s associated with the form or

control– Grab the Graphics object in the Paint event’s

PaintEventArgs

Drawing• There are 2 types of draw:– Immediate Draw• Not updated after form resize, covered or uncovered.

– Redraw• Updated each time a form is updated. • This is done through Paint event. • This event can be triggered using Invalidate

Drawing• Two useful properties:– ResizeRedraw = true;– DoubleBuffered = true; //reduce flickering

Keyboard Movement• Attach key events to the form to move

drawings around. • Keys.Up / Keys.Down / Keys.Left / Keys.Right

are 4 common movement keys.

x, y

• Adjust (x,y) with each key movement• Re-paint the image at new (x,y) with each key

movement. • Make sure that the drawing has key focus.– Try adding a button

x, y

Adding Animation• Instead of adjusting (x,y) with key events, how

about having it adjusted every timer tick?• Adding a timer. • In Timer’s Tick event, adjust (x,y) accordingly. • Re-paint the image at new (x,y) with timer

tick. • Check for boundary conditions so drawing

doesn’t go outside the form.

Start & Stop Animations• You can start or stop animation by Start or

Stop the timer. • Start / Stop can be linked to a key or a button.

Timer1.Start();

Timer1.Stop();

Image Transparency Bitmap dog = new Bitmap("dexter.bmp"); //file dexter.bmp is in debug directory. //it has blue background dog.MakeTransparent(Color.Blue);Rectangle dogRect = new Rectangle(x, y, 75, 75);g.DrawImage(dog, dogRect);

Animation Example

Animation: Moving Multiple Objects• Timer triggered animation:– Adjust as many (x, y) with each Tick event. – Make sure DoubleBuffered and ResizeRedraw are

set to true;– Re-paint the entire form after each Tick event.

Animation: Manual Movement• Sometimes you might want to manually move

an object on the screen independent of timer and Paint events.

• For example: In a sorting algorithm, instead of just showing result of sort, I want to show elements being swapped.

Animation: Manual Movement• Instead of using timer, call

System.Threading.Thread.Sleep(ms);• Manually drawing and erasing objects on the

screen. • The movement animation is not permanent so

it’s not done in Paint event.

Form Vs. Panel vs. Picturebox• Setting DoubleBuffered to true on the form will

reduce the flickering. • But if drawings are made inside a panel or

picturebox, the DoubleBuffered on the form doesn’t take care of it.

• You need to create a custom Panel or Picturebox. • Two options:– Draw on the form and have form’s DoubleBuffered

take care of it. – Create a derived control and set its DoubleBuffered.

Take Home Lab #6• Draw some objects and show animation. • Allow the user to start and stop animation• Try to experiment with moving more than one object

at a time. • Try to do manual animation movement as well as

using timer/Paint event. • Reduce flicker when appropriate.• Enable the user to resize the form and redraw

accordingly.