bim211 – visual programming interacting with users graphics 1
TRANSCRIPT
![Page 1: BIM211 – Visual Programming Interacting with Users Graphics 1](https://reader036.vdocuments.mx/reader036/viewer/2022081603/56649f125503460f94c25a1d/html5/thumbnails/1.jpg)
BIM211 – Visual Programming
Interacting with UsersGraphics
1
![Page 2: BIM211 – Visual Programming Interacting with Users Graphics 1](https://reader036.vdocuments.mx/reader036/viewer/2022081603/56649f125503460f94c25a1d/html5/thumbnails/2.jpg)
Contents
• Interacting with Users– MessageBox– Custom Dialog Boxes– Keyboard Events– Mouse Events
• Graphics– Drawing into a Form or Control– Persisting Graphics in a PictureBox
2
![Page 3: BIM211 – Visual Programming Interacting with Users Graphics 1](https://reader036.vdocuments.mx/reader036/viewer/2022081603/56649f125503460f94c25a1d/html5/thumbnails/3.jpg)
MessageBox
MessageBox.Show(MessageText,Caption,Buttons,Icon,DefaultButton,Options)
3
![Page 4: BIM211 – Visual Programming Interacting with Users Graphics 1](https://reader036.vdocuments.mx/reader036/viewer/2022081603/56649f125503460f94c25a1d/html5/thumbnails/4.jpg)
MessageBoxButtons
• AbortRetryIgnore• OK• OKCancel• YesNoCancel• YesNo• RetryCancel
4
![Page 5: BIM211 – Visual Programming Interacting with Users Graphics 1](https://reader036.vdocuments.mx/reader036/viewer/2022081603/56649f125503460f94c25a1d/html5/thumbnails/5.jpg)
MessageBoxIcons
Name Icon
AsteriskInformation
ErrorHandStop
ExclamationWarning
Question
5
![Page 6: BIM211 – Visual Programming Interacting with Users Graphics 1](https://reader036.vdocuments.mx/reader036/viewer/2022081603/56649f125503460f94c25a1d/html5/thumbnails/6.jpg)
Determining Which Button is Clicked
• The MessageBox.Show() method returns the button clicked as a DialogResult enumeration.
if (MessageBox.Show(…) == DialogResult.OK) { // OK button is clicked}
DialogResult result = MessageBox.Show(…);switch (result) { … }
6
![Page 7: BIM211 – Visual Programming Interacting with Users Graphics 1](https://reader036.vdocuments.mx/reader036/viewer/2022081603/56649f125503460f94c25a1d/html5/thumbnails/7.jpg)
Enumerations for DialogResult
• OK• Cancel• Yes• No• Retry• Ignore• Abort• None (for Modal Dialog Boxes)
7
![Page 8: BIM211 – Visual Programming Interacting with Users Graphics 1](https://reader036.vdocuments.mx/reader036/viewer/2022081603/56649f125503460f94c25a1d/html5/thumbnails/8.jpg)
Creating Good Messages
• Use a formal tone• Don’t use large words• Make the text immediately understandable• Limit messages to two or three lines• Make the question as succinct as possible• Spell-check all message text• Avoid technical jargon• Be sure that buttons and the icon match the text
8
![Page 9: BIM211 – Visual Programming Interacting with Users Graphics 1](https://reader036.vdocuments.mx/reader036/viewer/2022081603/56649f125503460f94c25a1d/html5/thumbnails/9.jpg)
Creating Custom Dialog Boxes
• Most of the time, the MessageBox.Show() method should be a sufficient means to display messages to a user.
• At times, however, the MessageBox.Show() method is too limited for a given purpose.
• Suppose that you want to display a lot of text to the user, such as a log file of some sort, for example, so you want a message box that the user can size.
9
![Page 10: BIM211 – Visual Programming Interacting with Users Graphics 1](https://reader036.vdocuments.mx/reader036/viewer/2022081603/56649f125503460f94c25a1d/html5/thumbnails/10.jpg)
Creating Custom Dialog Boxes
• Custom dialog boxes are nothing more than standard modal forms, with one notable exception: One or more buttons are designated to return a dialog result, just as the buttons on a message box shown with the MessageBox.Show() method return a dialog result.
10
![Page 11: BIM211 – Visual Programming Interacting with Users Graphics 1](https://reader036.vdocuments.mx/reader036/viewer/2022081603/56649f125503460f94c25a1d/html5/thumbnails/11.jpg)
Exercise
• Create a new form in a new project• Design the contents of the new form• Put some buttons and set their DialogResult
properties to one of the suitable DialogResult enumerations (When you select a dialog result, you don’t need to handle the click events of the buttons)
• Open the form from the main form with ShowDialog() method
11
![Page 12: BIM211 – Visual Programming Interacting with Users Graphics 1](https://reader036.vdocuments.mx/reader036/viewer/2022081603/56649f125503460f94c25a1d/html5/thumbnails/12.jpg)
Exercise at Runtime
12
![Page 13: BIM211 – Visual Programming Interacting with Users Graphics 1](https://reader036.vdocuments.mx/reader036/viewer/2022081603/56649f125503460f94c25a1d/html5/thumbnails/13.jpg)
Interacting with the Keyboard
Event Name DescriptionKeyDown Occurs when a key is pressed while
the control has focusKeyPress Occurs when a key is pressed while
the control has the focus. If theuser holds down the key, this event fires multiple times
KeyUp Occurs when a key is released while the control has the focus
13
![Page 14: BIM211 – Visual Programming Interacting with Users Graphics 1](https://reader036.vdocuments.mx/reader036/viewer/2022081603/56649f125503460f94c25a1d/html5/thumbnails/14.jpg)
Exercise
• Write a program with a TextBox in which only numbers can be entered.
• Solution: Handle the KeyPress event and set e.Handled property to true when any key except a digit is pressed.
14
![Page 15: BIM211 – Visual Programming Interacting with Users Graphics 1](https://reader036.vdocuments.mx/reader036/viewer/2022081603/56649f125503460f94c25a1d/html5/thumbnails/15.jpg)
Using the Common Mouse EventsEvent Name Description
MouseEnter Occurs when the pointer enters a control
MouseMove Occurs when the pointer moves over a control
MouseHover Occurs when the pointer hovers over a control
MouseDown Occurs when the pointer is over a control and a button is pressed
MouseUp Occurs when the pointer is over a control and a button is released
MouseLeave Occurs when the pointer leaves a control
MouseClick Occurs between the MouseDown and MouseUp events, after the Click event
Click Occurs between the MouseDown and MouseUp events
15
![Page 16: BIM211 – Visual Programming Interacting with Users Graphics 1](https://reader036.vdocuments.mx/reader036/viewer/2022081603/56649f125503460f94c25a1d/html5/thumbnails/16.jpg)
Exercise
• Write a program which enables the user to draw on a form.
1.Create a Graphics object member variable2.Instantiate it in the Load event handler3.Dispose it in the FormClosed event handler4.Handle the MouseMove event and draw an
ellipse at the mouse coordinate if the Left mouse button is clicked during the mouse move
16
![Page 17: BIM211 – Visual Programming Interacting with Users Graphics 1](https://reader036.vdocuments.mx/reader036/viewer/2022081603/56649f125503460f94c25a1d/html5/thumbnails/17.jpg)
Exercise at Runtime
17
![Page 18: BIM211 – Visual Programming Interacting with Users Graphics 1](https://reader036.vdocuments.mx/reader036/viewer/2022081603/56649f125503460f94c25a1d/html5/thumbnails/18.jpg)
Creating a Graphics Object
• If you want to draw something an a control, you should get a reference to its drawing surface:
• Graphics g = textBox1.CreateGraphics();
18
![Page 19: BIM211 – Visual Programming Interacting with Users Graphics 1](https://reader036.vdocuments.mx/reader036/viewer/2022081603/56649f125503460f94c25a1d/html5/thumbnails/19.jpg)
Drawing on Bitmaps
• The Bitmap objects are created with the new command:
Bitmap bmp = new Bitmap(640, 480);• Graphics object of a Bitmap is acquired with
the static Graphics.FromImage() method:Graphics g = Graphics.FromImage(bmp);• All drawings on g are drawn on the bitmap
then.
19
![Page 20: BIM211 – Visual Programming Interacting with Users Graphics 1](https://reader036.vdocuments.mx/reader036/viewer/2022081603/56649f125503460f94c25a1d/html5/thumbnails/20.jpg)
Drawing on a PictureBox
• The drawn shapes on the Graphics object of a PictureBox disappear if you minimize and restore your program.
• If you want them to appear again, you should either handle the Paint event of the form or draw everything on the bitmap Image of the picture box. The second one is easier.
20
![Page 21: BIM211 – Visual Programming Interacting with Users Graphics 1](https://reader036.vdocuments.mx/reader036/viewer/2022081603/56649f125503460f94c25a1d/html5/thumbnails/21.jpg)
Load Event
• Initialize the Image of the picture box in Load event of the form:
Bitmap bmp = new Bitmap(pictureBox1.Width, pictureBox1.Height);
Graphics g = Graphics.FromImage(bmp);g.FillRectangle(Brushes.White, 0, 0,
bmp.Width, bmp.Height);pictureBox1.Image = bmp;
21
![Page 22: BIM211 – Visual Programming Interacting with Users Graphics 1](https://reader036.vdocuments.mx/reader036/viewer/2022081603/56649f125503460f94c25a1d/html5/thumbnails/22.jpg)
MouseMove Event• Get the Bitmap image of the picture box• Create the Graphics object from the Bitmap
using Graphics.FromImage() method and draw:if (e.Button == MouseButtons.Left){ Bitmap bmp = (Bitmap)pictureBox1.Image; Graphics g = Graphics.FromImage(bmp); g.DrawEllipse(Pens.Red, e.X, e.Y, 2, 2); pictureBox1.Invalidate();}
22
![Page 23: BIM211 – Visual Programming Interacting with Users Graphics 1](https://reader036.vdocuments.mx/reader036/viewer/2022081603/56649f125503460f94c25a1d/html5/thumbnails/23.jpg)
Invalidate()
• If you want a control to draw itself, you should call its Invalidate() method.
• If you don’t call it in the previous code, your drawings does not appear on the picture box unless you minimize and restore the form.
• Restoring the form window forces the form and all its controls to Paint themselves.
23
![Page 24: BIM211 – Visual Programming Interacting with Users Graphics 1](https://reader036.vdocuments.mx/reader036/viewer/2022081603/56649f125503460f94c25a1d/html5/thumbnails/24.jpg)
Some Drawing Methods
• DrawLine()• DrawEllipse()• DrawRectangle()• DrawString()• FillEllipse()• FillRectangle()• …
24