CSCI 3328 Object Oriented Programming in C Chapter

  • Slides: 37
Download presentation
CSCI 3328 Object Oriented Programming in C# Chapter 10: Graphical User Interfaces with Windows

CSCI 3328 Object Oriented Programming in C# Chapter 10: Graphical User Interfaces with Windows Forms Xiang Lian The University of Texas – Pan American Edinburg, TX 78539 [email protected] edu 1

Objectives • In this chapter, you will – Learn how to process events that

Objectives • In this chapter, you will – Learn how to process events that are generated by user interface controls and event handling – Know how to create and use Button, Label, Radio. Button, Check. Box, Text. Box, Panel and Numberic. Up. Down controls – Know how to add Tool. Tips to GUI controls – Discover how to process mouse and keyboard events – Become familiar with more controls, such as Menus, tabbed windows, and multiple document interface (MDI), List. View, Tree. View, Link. Label, List. Box, Combo. Box, Date. Time. Picker 2

Windows Forms • Dialog • MDI (window multiple document Interface) Window • Controls and

Windows Forms • Dialog • MDI (window multiple document Interface) Window • Controls and components are placed on the form • Toolbox allows you to choose controls and components • A form is a container that holds the controls and components 3

Controls 4

Controls 4

Event Handling • Events drive the program to perform a task – Click –

Event Handling • Events drive the program to perform a task – Click – Change – Time • Event handler is what you write 5

Example of Event-Driven GUI • Click event of Button private void click. Button_Click(object sender,

Example of Event-Driven GUI • Click event of Button private void click. Button_Click(object sender, Event. Args e) { Message. Box. Show("Button was clicked"); } 6

Visual Studio Generated Code • Can give great insight into what is going on

Visual Studio Generated Code • Can give great insight into what is going on • See what is in the Designer. cs – It will have all controls and components you placed there 7

Integrated Development Environment • Events events Properties window 8

Integrated Development Environment • Events events Properties window 8

Creating Event Handlers • Double click on a control and write code – Known

Creating Event Handlers • Double click on a control and write code – Known as default event • You can use the properties window to create event handlers • Click on the events (looks like the lightning) in the properties window 9

Control Properties and Layout • Controls derive from class Control • Common control properties

Control Properties and Layout • Controls derive from class Control • Common control properties – – – – – Back. Color Background. Image Enabled Focused Font Fore. Color Tab. Index Text Visible • Common methods – Hide – Select – Show 10

Anchor Property • Anchoring causes controls to remain at a fixed distance from the

Anchor Property • Anchoring causes controls to remain at a fixed distance from the sides of the container, even when the container is resized – Darkened bar indicate the container’s sides to which the control is anchored 11

Dock Property and Other Properties • Dock • Other properties – – Location Size

Dock Property and Other Properties • Dock • Other properties – – Location Size Maximum. Size Minimum. Size 12

Labels, Text. Boxes and Buttons • A Label displays text that the user cannot

Labels, Text. Boxes and Buttons • A Label displays text that the user cannot directly modify • A Text. Box is an area in which either text can be displayed by a program or user can type text via keyboard – A password Text. Box • Set Use. System. Password. Char to true • A Button is a control that the user clicks to trigger a specific action or to select an option in a program 13

Common Properties/Events of Labels, Text. Boxes and Buttons • Label – Font, Text. Align

Common Properties/Events of Labels, Text. Boxes and Buttons • Label – Font, Text. Align • Text. Box – Accept. Return • If true in a multiline Text. Box, pressing Enter in the Text. Box creates a new line – Multiline, Read. Only, Use. System. Password. Char – Event: Text. Changed Scroll. Bars, Text, • Button – Text, Flat. Style – Event: Click 14

Group. Boxes and Panels • Group. Boxes and Panels arrange controls on a GUI

Group. Boxes and Panels • Group. Boxes and Panels arrange controls on a GUI • All controls in a Group. Box or Panel move together when the Group. Box or Panel is moved • Properties of Group. Boxes – Controls – Text • Properties of Panels – Auto. Scroll (when resizing panels) – Border. Style – Controls 15

Check. Boxes and Radio. Buttons • Check. Boxes – Appearance, Checked, Check. State, Text

Check. Boxes and Radio. Buttons • Check. Boxes – Appearance, Checked, Check. State, Text – Three. State • Checked, unchecked, and indeterminate (grey color; can be set programmatically) – Event: Checked. Changed, Check. State. Changed • Radio. Buttons – Checked, Text – Event: Checked. Changed 16

Example of Check. Boxes and Radio. Buttons private void bold. Check. Box_Checked. Changed(object sender,

Example of Check. Boxes and Radio. Buttons private void bold. Check. Box_Checked. Changed(object sender, Event. Args e) { output. Label. Font = new Font(output. Label. Font, output. Label. Font. Style ^Font. Style. Bold); } ------------------------------------------private Message. Box. Buttons button. Type; private void button. Type_Checked. Changed(object sender, Event. Args e) name of a radio button { if (sender == ok. Radio. Button) button. Type = Message. Box. Buttons. OK; } 17

Picture. Box • Properties – Image – Size. Mode • Events – Click •

Picture. Box • Properties – Image – Size. Mode • Events – Click • Example of setting image resources – image. Picture. Box. Image=(Image) (Properties. Resource. Manager. Get. Object("image 1"); 18

Tool. Tips • Drag Tool. Tip to the form – Then each control has

Tool. Tips • Drag Tool. Tip to the form – Then each control has a new property "Tool. Tip on tool. Tip 1" • Properties – Auto. Pop. Delay • The amount of time that the tool tip appears while the mouse is over a control – Initial. Delay • The amount of time that a mouse must hover a control before a tool tip appears – Reshow. Delay: • The amount of time between which two different tool tips appear • Load Method of the form – tooltip 1. Set. Tool. Tip(this. button 1, "tips here"); • Event – Draw 19

Numeric. Up. Down Control • Properties – – – Decimal. Places Increment Maximum Minmum

Numeric. Up. Down Control • Properties – – – Decimal. Places Increment Maximum Minmum Up. Down. Align Value • Event – Value. Changed 20

Mouse Handling private void Painter. Form_Mouse. Down(object sender, Mouse. Event. Args e) { should.

Mouse Handling private void Painter. Form_Mouse. Down(object sender, Mouse. Event. Args e) { should. Paint = true; } private void Painter. Form_Mouse. Up(object sender, Mouse. Event. Args e) { should. Paint = false; } private void Painter. Form_Mouse. Move(object sender, Mouse. Event. Args e) { if (should. Paint) Location of the mouse { Graphics graphics = Create. Graphics(); graphics. Fill. Ellipse(new Solid. Brush(Color. Blue. Violet), e. X, e. Y, 4, 4); graphics. Dispose(); //dispose of resources } } 21

Mouse Handling (cont'd) • Event. Args – Mouse. Enter – Mouse. Leave • Event

Mouse Handling (cont'd) • Event. Args – Mouse. Enter – Mouse. Leave • Event Mouse. Event. Args – – Mouse. Down Mouse. Hover Mouse. Move Mouse. Up • Properties of class Mouse. Event. Args – – Button (Left, Right, Middle or none button of the mouse) Clicks (number of clicking times) X Y 22

Keyboard Events • Event Key. Event. Args – Key. Down – Key. Up •

Keyboard Events • Event Key. Event. Args – Key. Down – Key. Up • Event Key. Press. Event. Args – Key. Press • Properties of class Key. Press. Event. Args – Key. Char – Handled (whether the event was handled) • Properties of class Key. Event. Args – – Alt (whether Alt key was pressed) Control (whether Ctrl key was pressed) Shift (whether Shift key was pressed) Handled (whether the event was handled) 23

Menus • Main menu bar – Type menu name – Place & character before

Menus • Main menu bar – Type menu name – Place & character before a letter to underline it • E. g. , &File • Effect: File (you can press Alt+F keys to select file menu) – Select shortcut keys for menu items – You can remove a menu item by selecting it with mouse and pressing Delete key 24

Menus (cont'd) • Options of menu items – Right click a menu item –

Menus (cont'd) • Options of menu items – Right click a menu item – Tool. Strip. Menu. Item – Combo. Box – Separator – Text. Box 25

Menus (cont'd) • Menu. Strip Properties – Has. Children – Right. To. Left •

Menus (cont'd) • Menu. Strip Properties – Has. Children – Right. To. Left • Tool. Strip. Menu. Item Properties – – Checked Check. On. Click Index Menu. Items • Tool. Strip. Menu. Item Event – Click 26

Example of Menus • Checked Property – black. Tool. Strip. Menu. Item. Checked =

Example of Menus • Checked Property – black. Tool. Strip. Menu. Item. Checked = true; • Event private void black. Tool. Strip. Menu. Item_Click(object sender, Event. Args e) { display. Label. Fore. Color = Color. Black; black. Tool. Strip. Menu. Item. Checked = true; } 27

Month. Calendar Control • Properties – First. Day. Of. Week – Max. Date –

Month. Calendar Control • Properties – First. Day. Of. Week – Max. Date – Max. Selection. Count • Maxixmum number of dates that can be selected at once – Min. Date – Monthly. Bolded. Dates • An array of dates that will be displayed in bold in the calendar – Selection. End – Selection. Range – Selection. Start • Event – Date. Changed 28

Date. Time. Picker Control • Properties – – – Calendar. Fore. Color Calendar. Month.

Date. Time. Picker Control • Properties – – – Calendar. Fore. Color Calendar. Month. Background Custom. Format Date Format Max. Date Min. Date Show. Check. Box Show. Up. Down Time. Of. Day Value • Event – Value. Changed 29

Example of Date. Time. Picker private void date. Time. Picker. Drop. Off_Value. Changed(object sender,

Example of Date. Time. Picker private void date. Time. Picker. Drop. Off_Value. Changed(object sender, Event. Args e) { Date. Time drop. Off. Date = date. Time. Picker. Drop. Off. Value; if (drop. Off. Date. Day. Of. Week == Day. Of. Week. Friday || drop. Off. Date. Day. Of. Week == Day. Of. Week. Saturday || drop. Off. Date. Day. Of. Week == Day. Of. Week. Sunday) output. Label. Text = drop. Off. Date. Add(3). To. Long. Date. String(); else output. Label. Text = drop. Off. Date. Add(2). To. Long. Date. String(); } 30

Link. Label Control • Properties – Link. Visited • If true, the link appears

Link. Label Control • Properties – Link. Visited • If true, the link appears as though it has been visited – Link. Color – Text – Visited. Link. Color • Event – Link. Clicked • System. Diagnostics. Process. Start(@"C: "); • System. Diagnostics. Process. Start("http: //faculty. utpa. edu/lianx"); • System. Diagnostics. Process. Start("notepad"); 31

List. Box Control • Properties of List. Box – Selection. Mode – Multi. Column

List. Box Control • Properties of List. Box – Selection. Mode – Multi. Column – Selected. Index • If no items are selected, Selected. Index = 1 – Selected. Indices • For multiple selected items – Selected. Items – Sorted • Indicate whether items are sorted alphabetically • Methods of List. Box – Clear. Selected – Get. Selected(index) • Return true, if the corresponding item is selected • Event of List Box – Selected. Index. Changed 32

Example of List. Box Control • my. List. Box. Items. Add(my. List. Item); •

Example of List. Box Control • my. List. Box. Items. Add(my. List. Item); • Checked. List. Box Control – Inherit from List. Box 33

Combo. Box Control • Properties – – – Drop. Down. Style Items Max. Drop.

Combo. Box Control • Properties – – – Drop. Down. Style Items Max. Drop. Down. Items Selected. Index Selected. Item Sorted • Event – Selected. Index. Changed 34

Other Controls • Tree. View Control – "Nodes" property • Add root, or add

Other Controls • Tree. View Control – "Nodes" property • Add root, or add child – After. Select event • When selected node changes 35

Other Controls (cont'd) • Tab. Control – Contains Tab. Page objects which are similar

Other Controls (cont'd) • Tab. Control – Contains Tab. Page objects which are similar to Panels and Group. Boxes – my. Tab. Page. Controls. Add(my. Control); – my. Tab. Page. Controls. Add(my. Tab. Page); • Properties – Image. List – Item. Size • Tab size – – – Multiline Selected. Index Selected. Tab. Count Tab. Pages • Add more tabs • Event – Selected. Index. Changed 36

37

37