1. 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

2. 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

3. 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

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

5. 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

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

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

8. 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();

9. 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);

10. Animation Example

11. 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.

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

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

14. 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.

15. 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.