BIM211 – Visual Programming

Building Forms

1

Contents

• Building Forms – The Basics– Changing a form’s appearance– Changing a form’s background color and image– Showing and hiding forms

• Building Forms – Advanced Techniques– Adding controls and aligning them– Anchoring and auto-sizing controls– Creating tab order– Creating topmost modal, transparent, scrollable, and

MDI forms

2

Windows Forms

• Forms are essentially windows, and the two terms are often used interchangeably.

• More accurately, window refers to what’s seen by the user and what the user interacts with, whereas form refers to what you see when you design.

3

Adding a New Form to the Project

• You can use several forms in your project.• If you want to add a new form to your project,

you can do one of the following:– Choose Project menu and select the Add Windows

Form command– Right-click the project name on the Solution Explorer

window, choose Add menu and select Windows Form or New Item commands

• Next, select Windows Form, give a name, and click Add button.

4

Changing a Form’s Name and Title

• Add a new form named OptionsForm to the Picture Viewer project.

• The first thing you should do when you create a new object is give it a descriptive name.

• Change the title of the form.• A form’s title should be one of the followings:– The name of the program (e.g. Picture Viewer)– The purpose of the form (e.g. Picture Viewer Options)– The name of the form (e.g. Options)

5

Changing Background Color

• To change a form’s background color, you change its BackColor property.

• Colors may be a system color, web color, or a custom color.

• System colors are determined by the operating system.

• For instance, some people with color blindness prefer to change their system colors to colors that have more contrast than the defaults so that objects are more clearly distinguishable.

6

7

Adding an Image to Background• To add a picture to a form, set the form’s

BackgroundImage property.• Add an image to your form now by following these

steps:– Change the Size property of the form to 400,300.– Click the BackgroundImage property in the Properties

window.– Click the Build button that appears next to the property

(the small button with three dots).– The Select Resource dialog box appears. Click the Local

Resource option button.– Click Import; locate an image file, and click OK.

8

Select Resource Dialog Box

9

Form with a Background Image

10

Background Image Properties

• Clicking the plus sign on the left of the BacgroungImage property in the Properties window lists some information about the background picture.

11

More on Background Image

• Don’t use background images unless necessary because background images makes your program slower.

• To remove the background picture, right-click the property name and select Reset command from the shortcut menu or press Delete key at the beginning of the picture name in the Properties window.

12

Form Icon

• The icon assigned to a form appears– in the left side of the form’s title bar,– in the taskbar when the form is minimized,– and in the iconic list of tasks when you press Alt+Tab to

switch to another application, as well as other places.• The icon often represents the application; therefore,

you should assign an icon to any form.• If you don’t assign an icon to a form, Visual C# supplies

a default icon to represent the form.• This default icon is generic, unattractive, and doesn’t

really represent anything—you should avoid it.

13

Giving a Form an Icon

• You assign an icon to a form in much the same way that you assign an image to the BackgroundImage property.

• Add an icon to your form now by clicking the form’s Icon property in the Properties window, clicking the Build button that appears, and selecting an icon file from your hard drive.

14

Minimize, Maximize, and Close Buttons

15

Hiding Minimize, Maximize, and Close Buttons

• In order to hide the minimize button, set the MinimizeBox property to false.

• In order to hide the maximize button, set the MaximizeBox property to false.

• In order to hide the Close button, you should set the ControlBox property to false.– In this case, minimize and maximize buttons are

hidden automatically.

16

Changing the Borders

• The appearance and behavior of a form’s border is controlled by its FormBorderStyle property.– Sizable: Default border style. The size of the form

can be changed by dragging the borders.– None: No border is visible. Used for splash screen.– FixedToolWindow: Smaller title bar with smaller

text. No minimize and maximize buttons.

17

Minimum and Maximum Sizes

• You can restrict the minimum and maximum sizes of a form by setting MinimumSize and MaximumSize properties.

• In general, you should avoid this, but sometimes it may be useful.

• Setting a specific MinimumSize doesn’t stop user from minimizing the form if it has a minimize button.

18

Showing Forms

• We created a form named OptionsForm but we didn’t see it in runtime!

• In order to show a form, you need to write some code.

• Since OptionsForm is a class, you need to instantiate an object from the class.

• The general syntax is:{formclassname} {objectname} = new {formclassname}();

19

Showing Forms (continued)

• Instantiate a new form of type OptionsForm using the following code:OptionsForm frm = new OptionsForm();

• Display the form using the following code:frm.Show();

• Note: Setting the Visible property to true also shows the form:frm.Visible = true;

20

Exercise

• Add a new button to the PictureViewer form with the text Options and with the name btnOptions.

• Write the following code into the Click event of the btnOptions button:OptionsForm frmOptionsDialog = new OptionsForm();frmOptionsDialog.Show();

21

Form Modality

• In the exercise above, a new Options dialog box is created and shown whenever you press the Options button in the Picture Viewer form.

• This is because the Options dialog box is a non-modal window.

• The Find and Replace window in Word is another example of non-modal window.

22

Modal and Non-Modal Windows

• When a non-modal window is opened, other windows are not disabled and they can be used.

• On the other hand, when a form is displayed as a modal form, all other forms in the same application become disabled until the modal form is closed; the other forms don’t accept any keyboard or mouse input. The user is forced to deal with only the modal form. After the modal form is closed, the user is free to work with other visible forms within the program.

23

Modal Forms

• Modal forms are most often used to create dialog boxes in which the user works with a specific set of data and controls before moving on.

• The Print dialog box of MS Word, for example, is a modal dialog box.

• When the Print dialog box is displayed, you can’t work with the document on the main Word window until the Print dialog box is closed.

24

Modal or Modeless?

• If you display a form using the Show() method, it is opened in non-modal (or modeless) form.

• If you want to display a form in modal form, you have to display it using ShowDialog() method.OptionsForm frmOptionsDialog = new OptionsForm();frmOptionsDialog.ShowDialog();

25

Initial Display Position of a Form• The location on the display (monitor) where a form

first appears isn’t random, but rather it is controlled by the form’s StartPosition property.

• Manual: Location property is used.• CenterScreen: The form appears on center.• WindowsDefaultLocation: The location is determined

by the operating systen.• WindowsDefaultBounds: The location and the size are

both determined by the operating system.• CenterParent: The form is centered within the bounds

of its parent form.

26

Form’s State

• You can force a form to appear minimized or maximized. Whether a form is maximized, minimized, or shown normally is known as the form’s state, and it’s determined by its WindowState property:– Normal– Minimized– Maximized

27

Preventing a Form from Appearing in the Taskbar

• To prevent a form from appearing in the taskbar, set the form’s ShowInTaskbar property to False.

• If the user minimizes a form with its ShowInTaskbar property set to False, she can still get to the application by pressing Alt+Tab, even though the program can’t be accessed via the taskbar.

• Visual C# doesn’t allow the application to become completely inaccessible to the user.

28

Hide() and Close()

• If you hide a form using Hide() method, the form disappears without closing it or freeing its resources. The form still resides in the memory and can still be manipulated by code.

• If you use Close() method of a form, the form is completely closed and the resources it consumes are released.

29

Exercise

• Add an OK button to OptionsForm and write the following code into its Click event:this.Hide();

• Run the program.• Change the code to

this.Close();

• Do you see the difference?

30

Snap Lines

• When you move a control in a form and as the edge of the control is aligned vertically or horizontally with another control (or border of the form), a snap line appears, and the edge “snaps” to the line.

• You can use this feature of Visual Studio in order to align the controls.

31

Snap Lines Example

32

Selecting a Group of Controls• You can select a group of control on a form in

design view in the following ways:1. Click on an empty space on the form and drag the

mouse so that the controls to be selected remains in the rectangle you draw.

2. Select a control and select other controls while Ctrl key is pressed.

3. When the form is selected, click Ctrl-A if you want to select all controls on the form.

• You can change a property value in the Properties window when multiple controls are selected. This causes the corresponding property to change for all selected controls.

33

Selecting by Dragging Mouse

34

Aligning Controls

• If you want to align the controls on a form (e.g. if you want them to be in the same vertical alignment) then you can use the Layout toolbar.

• If the Layout toolbar is not visible, you can turn it on using the View menu and selecting the Layout command under the Toolbars submenu.

35

Layout Toolbar

• Using the Layout toolbar, you can– Align the left edge, middle, or right edge of selected

controls.– Align the top edge, middle, or bottom edge of selected

controls.– Make the selected controls the same width, height, or

both.– Make horizontal or vertical spacing between the selected

controls nice and even.– Move layering of the selected controls backward or

forward.– Set a Tab Order for the controls.

36

Anchoring and Autosizing Controls

• The default behavior of all new controls is that controls are docked to the top and left edges of their containers.

• What if you want a control to always appear in the upper-right corner or lower-left corner of a form?

• You can accomplish this task using the Anchor property of the controls.

37

When you resize the form, the controls remain in the same position.

38

Anchor

• If the Anchor property of a control is Top, Left, then the distance of the control from the top and left borders of the control does not change during resize.

39

Anchor Exercise

• Make the Anchor property of the buttons and labels Top, Right.

• During a resize, they move with the top and right borders of the form.

40

Anchor Exercise (continued)• Select the picture

box and select all anchor points as shown below.

• When you enlarge the form, picture box is enlarged too.

41

Creating a Tab Order

• When you press Tab key while on a form, the focus moves from the current control to the next control in the tab order.

• This enables easy keyboard navigation on forms.

• The tab order for controls on a form is determined by the TabIndex properties of the controls.

42

TabIndex

• The control with the TabIndex value of 0 is the first control that receives the focus when the form first displays.

• When you press Tab, the control with the TabIndex of 1 receives the focus, and so on.

• Each control has a unique TabIndex value, and TabIndex values are always used in ascending order.

43

Changing Tab Order

• The last button on the Layout toolbar is the Tab Order button.

• When you click it, a set of numbers appear over the controls.

• These numbers are the TabIndex properties.• Just click the controls in the order you want. You

can see the change the order and color of the numbers.

• After setting the tab order, click the Tab Order button again to close the tab order mode.

44

Tab Order Mode

45

TabStop Property

• To remove a control from the tab sequence, set its TabStop property to False.

• When a control’s TabStop property is set to False, users can still select the control with the mouse, but they can’t enter the control by using the Tab key.

46

Layering Controls

• Rarely, some controls may overlap.• Whenever two controls overlap, whichever

control is added to the form most recently appears on top of the other.

• You can control the ordering of controls by using the Bring to Front or Send to Back buttons found on the right side of the Layout toolbar.

• (You can access those commands by right-clicking a control too)

47

Creating Topmost Modal Windows

• Find and Replace window stays on top of all other Word windows.

• You can create such a window by setting its TopMost property to true.

48

Creating Transparent Forms

• The Opacity property controls the opaqueness of the form as well as all controls on the form.

• The default Opacity value of 100% means that the form and its controls are completely opaque (solid), whereas a value of 0% creates a completely transparent form (no real point in that).

• A value of 50% then, creates a form that’s between solid and invisible.

49

50% Opaqueness

50

Transparent Form Example

• Microsoft Outlook 2003 and newer makes good use of opacity in its alerts that pop up to tell you when you’ve received an email.

• The Opacity of these alerts is cycled from 0 to 100, left at 100 for a short time, and then cycled back down to 0 as it disappears.

51

Creating Scrollable Forms• The scrolling behavior of a form is determined by the

following three properties:• AutoScroll: This property determines whether

scrollbars will ever appear on a form.• AutoScrollMinSize: The minimum size of the scroll

region (area). If the size of the form is adjusted so that the client area of the form is smaller than the AutoScrollMinSize, scrollbars appear.

• AutoScrollMargin: This property determines the margin given around controls during scrolling. This essentially determines how far past the edge of the outermost controls you can scroll.

52

MDI Forms

• All the projects you’ve created so far have been single document interface (SDI) projects.

• In SDI programs, every form in the application is a peer of all other forms; no intrinsic hierarchy exists between forms.

• A multiple document interface (MDI) program contains one parent window (also called a container) and one or more child windows.

53

MDI Form Example

• A classic example of an MDI program is Adobe Photoshop.

• When you run Photoshop, a single parent window appears. Within this parent window, you can open any number of documents, each appearing in its own child window.

• In an MDI program, all child windows share the same toolbar and menu bar, which appears on the parent window.

54

Adobe Photoshop

55

Creating MDI Forms

1. Create a new project and change the IsMdiContainer property of the form (named MDIParentForm) to True.

2. Add another form (Child1Form) to the project.3. Write the following code into the Load event of

the MDIParentForm:Child1Form objChild = new Child1Form();objChild.MdiParent = this;objChild.Show();

56

Creating MDI Forms (continued)

4. Add a new form (Child2Form) to the project.5. Add a button to Child1Form and write the

following code into its Click event:Child2Form objChild = new Child2Form();objChild.MdiParent = this.MdiParent;objChild.Show();

6. Run the program.

57

MDI Form Application

58

More About MDI Forms

• If MDI forms still confuse you, don’t worry. Most of the applications you’ll write as a new Visual C# programmer will be SDI programs.

• As you become more familiar with creating Visual C# projects in general, start experimenting with MDI projects.

• Remember, you don’t have to make a program an MDI program simply because you can; make an MDI program if the requirements of the project dictate that you do so.

59