Windows Programming Using C#

Forms Programming II

2

Contents

Menus TreeView TabControl Layout MessageBox Drawing

3

Menus

Pulldown menus provide a way to select commands and options

Normally these are in a MenuStrip across the top of the application

Begin by placing a MenuStrip across the application

It displays boxes into which menu items and cascading menus can be typed

4

Menus

The type here text allows new items to be added

When you click on type here a pull down appears letting you select Menu item ComboBox Separator TextBox

5

MenuItem Properties

Checked – if true displays check mark CheckOnClick – check state changes when

clicked CheckState – one of

CheckState.Checked CheckState.Unchecked CheckState.Indeterminate

ShortcutKeys – a member of the Shortcut enumeration indicating the shortcut key

6

MenuItem

Click – event which is raised when the menu item is clicked

Menu items are similar to buttons and are handled in the same way

* see MenuDemo

7

ComboBox Menu Items

You can use a ComboBox as a menu item Use the designer to add a set of Items to the

combo box You can then select a value The click event is raised only when you click on

the selected value, not when you change the selection

If you have nothing selected, the selected item will be null

8

TreeView

Presents a hierarchical tree view of the data

Nodes can be Selected Expanded and collapsed

Text of nodes can be edited Nodes can be added or deleted

programmatically

9

TreeNode

All nodes in the tree are instances of TreeNode

ConstructorsTreeNode(string displayText)

PropertiesNodes – get TreeNodeCollection of all

children of this node

10

TreeNode

Text – the displayed textChecked – true if the node is checkedFullPath – the labels of all nodes from the

root to this node separated by “\\”NextNode – returns next siblingPrevNode – returns previous sibling

MethodsCollapse – collapses the node

11

TreeNode

Expand – expands the nodeExpandAll – expands all children of this

nodeGetNodeCount – returns the number of child

nodes

12

TreeView

This is the actual control Properties

Nodes – get TreeNodeCollection of all children of this node

CheckBoxes – if true, displays checkboxes beside tree nodes

SelectedNode – the selected nodeLabelEdit – if true, node text can be edited

13

TreeView

EventsAfterSelect – after a node is selectedAfterExpanded – after a node is expandedAfterCollapsed – after a node is collapsedAfterEdited – after a node is edited

14

Populating a TreeView

1. Usually, create a root TreeNode

2. Add the root node onto the Nodes collection of the TreeView

3. Create a child TreeNode and add it to the Nodes collection of the root node

4. Continue this way to build whole tree

15

Populating a TreeView

TreeView tv = new TreeView();

TreeNode root = new TreeNode(root);

tv.Nodes.Add(root);

root.Nodes.Add(new TreeNode(“Vegetables”));

root.Nodes.Add(new TreeNode(“Fruit”));

root.Nodes.Add(new TreeNode(“Meat”));

root.Nodes.Add(new TreeNode(“Poultry”));

* see TreeDemo

16

TreeViewEventArg

The signature for an event handler is void EventHandler(object sender, EventArgs e)

TreeView events use a subclass called TreeViewEventArg

Properties Node – the node where the event originated

You will have to use the Node member to find which tree node is affected by some events

17

TabControl

Displays a series of tabs Each tab is a different page with its

own controls on it Each tab is like a group box or panel Create

In Visual Studio Drop controls into the tab pages Set the text property of every page to

change the label Right click on a tab and select “Add Tab”

to add a new tab

18

TabControl

Multiline – if true tabs can be in several lines SelectedIndex – index of selected tab SelectedTab – the selected tab TabPages – collection of TabPages SelectedIndexChanged – event raised when

a different tab is selected

* see TabDemo

19

Automatic Layout

All of the forms we have seen so far have been laid out based on X-Y coordinates

If the outer form is resized, the contents stay at the same size and position

There are three ways to change thisThe Dock propertyThe FlowLayoutPanelThe TableLayoutPanel

20

The Dock Property

Every control has a Dock property which can be set toNone – no dockingLeft – docked to left side of containerRight – docked to right side of containerTop – docked to top of containerBottom – docked to bottom of containerFill – fills all available space

21

The Dock Property

When controls are docked to the sides of their containing form, resizing the form resizes the controls inside as well

* see DockDemo

22

FlowLayoutPanel

Arranges its contents into horizontal or vertical rows

As form is resized, controls are arranged into new rows or columns

Created in designer by dropping controls into it

In designer it has small arrow on the top that activates menu of editing actions

23

FlowLayoutPanel

FlowDirection – layout direction BottomUp TopDown LeftToRight RightToLeft

WrapContents – whether the contents should be wrapped to a new row or column or clipped

* see LayoutDemo

24

TableLayoutPanel

Arranges the controls within it into rows and columns

Automatically resizes contents when the surrounding form is resized

The pull-out menu in designer can be used to add or delete rows and columns

25

TableLayoutPanel

ColumnCount – get/set number of columns

RowCount – get/set number of rows

* see LayoutDemo

26

MessageBox

A pop-up dialog which displays a message Use the static Show methods to see one

DialogResult Show(string) – box with simple string and OK button

DialogResult Show(string text, string caption) DialogResult Show(string text, string caption, MessageBoxButtons)

OK OKCancel RetryCancel YesNo YesNoCancel

27

DialogResult

Abort Cancel Ignore No None OK Retry Yes

28

Drawing

So far, we have used controls to draw everything on the screen

There is a lower-level interface which can be used to draw anything into a form

Using this we canHandle any type of eventDraw anythingCreate our own controls

29

Coordinates

All windows have their own coordinate space with the origin in the top-left corner

X values increase to the right Y values increase downward Coordinates are usually expressed as

an integer number of pixels

(0,0)X

Y

30

Measurement Units

Pixel is the default unit but others can be used Graphics has a property PageUnit which is a member

of the enum GraphicsUnit Display – device units: pixels for monitors & 1/100 inch for

printers Document – 1/300 inch Inch – inch Millimeter – millimeter Pixel – (default) pixel Point – 1/72 inch World – world coordinates

31

Drawing

We have already see the Color and Font classes To draw we are also interested in

Pen – the width & color of a line Brush – the fill for a figure like a rectangle

SolidBrush – a solid color TextureBrush – a pattern

Graphics – a class containing drawing methods

32

Pen

A drawing object used to specify the color and width of a line

Constructor Pen(Color, int width) Pen(Brush, int width)

Properties DashStyle – for dashed lines, one of

Solid Dash DashDot DashDotDot Dot

33

SolidBrush

A color used to fill the interior of a closed figure

ConstructorSolidBrush(Color)

PropertiesColor – get/set the brush color

34

Graphics

The graphics object is associated with a drawing surface and provides methods to draw on that surface

The graphics object is given to you by the framework, you do not create it

35

Graphics

Clear(Color) – clears the entire surface with the color

DrawArc(Pen, int x, int y, int ht, int wd, int startAngle, int endAngle) – draw an arc of an ellipse contained by the rectangle

DrawEllipse(Pen, int x, int y, int ht, int wd) – draw an ellipse within the rectangle

36

Graphics

DrawLine(Pen, Point, Point) – draw a line between two points

DrawPie(Pen, int x, int y, int ht, int wd) – draw an pie slice within the rectangle

DrawRectangle(Pen, int x, int y, int ht, int wd) – draw a rectangle

37

Graphics

DrawString(string, Font, Brush, single x, single y) – draw a string at the point

FillMethods Most of the draw methods have equivalent Fill

methods The Fill methods draw a solid figure rather than an

outline They use a brush rather than a pen

38

Event Handling

When you create your own control which draws you canAdd event handlers as we have done in the

pastOverride the methods for handling these

events in the parent classOften, it is easier to override the methods in

the parent class to make behaviour inheritable

39

Event Handling Methods

void OnMouseDown(MouseEventArgs e) void OnMouseUp(MouseEventArgs e) void OnMouseMove(MouseEventArgs e) void OnMouseWheel(MouseEventArgs e) void OnKeyDown(KeyEventArgs e) OnKeyUp(KeyEventArgs e) void OnResize(EventArgs e)

40

MouseEventArgs

Button – get button pressed Clicks – get the number of times the

button was pushed and released Delta – number of positions mouse

wheel rotated X – mouse coordinate Y – mouse coordinate

41

Painting

Forms are painted by calling OnPaint(Graphics g)

You override this method to paint whatever you need

You NEVER call this method You call Invalidate() when you want to be

repainted and the windowing system calls OnPaint() for you

42

Overriding Methods

When you override a method, your method is called, not the one in the parent class

However, the one in the parent class often does something important

Therefore, always call the method in the base class before doing your own thing

* see WinDraw