CST238 Week 3 Questions / Concerns? Recap Check-off Take Home Lab#2 New topics – PictureBox – FlowLayoutPanel – Menu – Context Menu – Status Bar – Toolstrip.

CST238 Week 3• Questions / Concerns?• Recap• Check-off Take Home Lab#2• New topics

– PictureBox– FlowLayoutPanel– Menu– Context Menu– Status Bar– Toolstrip– Bitmap– Dialogs (special dialogs – FileOpen, color)

• In-Class Exercise #3• Take Home Lab#3

Recap• Controls– Buttons– Textbox– Label

• Events– Click (button)– Keyboard events (KeyDown, KeyPress, KeyUp)– Form level events (Load)

• Layout control – organize controls– TableLayoutControl

Take Home Lab 2• Calculator– Process keyboard events– Table layout control for keys– Manage states• First operand (example: 135)• Operator (+)• Second operand (23)

State Diagram

Start

Textbox (0)Operand1(0)Operand2(0)Operator(“”)

EnterNumber1

Textbox (+d)Operand1(0)Operand2(0)Operator(“”)

Enter a Digit (0..9, .)

Enter a Digit (0..9, .)

Operator

Textbox (num)Operand1(num)Operand2(0)Operator(“op”)

Enter an operator

Enter a Digit (0..9, .)

EnterNumber2

Textbox (0+d)Operand1(num)Operand2(0)Operator(“op”)

Enter an operator

Result

Textbox (num2->result)Operand1(result)Operand2(0)Operator(“”)

Enter =

Enter =

Enter an operator

Enter =Operand2 = num

Enter a digit , Textbox(0)

PictureBox Control• Two ways to load a picture:– Load method– Image property

• Properties– SizeMode (Normal, StretchImage, etc.)– BorderStyle– Anchor/Dock

Simple Picture Loader/Viewer

Simple Picture Loader/Viewer with Menu

MenuStrip & Toolstrip Control• Download images from Visual Studio Image

Library– http://

www.microsoft.com/en-us/download/details.aspx?id=35825

• Add a Toolstrip to the form

Status Bar & Context Menu• Add a status bar at the bottom to show

filename• Add a context menu to stretch the image

Using Properties.Resources• Add images to the Resources• Faster loading time• Increase the size of executable

Example 2

Use layout controlsTableLayoutControl

FlowLayoutControl

FlowLayoutControl• Allow one control to flow into another control. • Useful when you need to have multiple

controls.

Dialog• Forms that:– Provide information to the user, or– Request information from the user

• Generally modal– Cannot switch forms until dialog is closed.

• Several dialogs included with Windows Forms– MessageBox, Color, OpenFile, SaveFile, Print, etc.

• You can create your own custom dialog

Working with Dialogs• Simple Dialogs– Just a function call– MessageBox.Show()

• Common/Custom Dialog– Create instance of dialog – Set properites– Show dialog using ShowDialog method• Returns a meber of the DialogResult enumeration

– Take action based on dialog result

Working with DialogOpenFieDialog openFile1 = new OpenFileDialog();

openFile1.Filter = “JPEG Files (*.jpg)|*.jpg|PNG Files (*.png)|*.png|BMP Files (*.bmp)|*.bmp|All files (*.*)|*.*”;

if (openFile1.ShowDialog() == DialogResults.OK){ //Do something with OpenFile1.FileName //which is the filename selected by the user if (openFile1.ShowDialog() == DialogResult.OK) { pictureBox1.Load(openFile1.FileName); }

}

Working with Color DialogColorDialog colorDialog1 = new ColorDialog();

if (colorDialog1.ShowDialog() == DialogResult.OK) pictureBox1.BackColor = colorDialog1.Color; //selected color

Custom Dialog• Create form as you would any other• Set form properties to add dialog look, feel and behavior

– Set FormBorderStyle to FixedDialog• Disables resizing of dialog

– Set ControlBox property to false• Removes minimize, maximize and close buttons from title bar

– Set AcceptButton and CancelButton properties• AcceptButton - pressing Enter is the same as clicking the

button• CancelButton – pressing Escape is the same as clicking the

button

• Set dialog return value on button clicks– In event handler, or– Using the DialogResult property of the button

Example 1

In-Class Lab#3• Modify the second picture viewer – Add menu for Show, Close, Clear Picture &

Background color– Add Toolstrip for these actions. – Add multiple pictures to the resources– Create an array of images– Create an array of caption– Add a Status bar to show the caption of the

picture– Add context-menu to flip through pictures

Take-Home Exercise #3• Flag Quiz– Find some flag images and add them to resources

(at least 10 images)– Create an array of images– Create an array of country names– Create an array of correct answers– Keep track of their scores