BIM211

1
BIM211 Visual Programming

• Building Forms

2
Contents

• Building Forms The Basics
• Changing a forms appearance
• Changing a forms 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

3
Windows Forms

• Forms are essentially windows, and the two terms
  are often used interchangeably.
• More accurately, window refers to whats seen by
  the user and what the user interacts with,
  whereas form refers to what you see when you
  design.

4
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.

5
Changing a Forms 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 forms 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)

6
Changing Background Color

• To change a forms 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.

7
(No Transcript)
8
Adding an Image to Background

• To add a picture to a form, set the forms
  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.

9
Select Resource Dialog Box
10
Form with a Background Image
11
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.

12
More on Background Image

• Dont 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.

13
Form Icon

• The icon assigned to a form appears
• in the left side of the forms title bar,
• in the taskbar when the form is minimized,
• and in the iconic list of tasks when you press
  AltTab 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 dont assign an icon to a form, Visual C
  supplies a default icon to represent the form.
• This default icon is generic, unattractive, and
  doesnt really represent anythingyou should
  avoid it.

14
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
  forms Icon property in the Properties window,
  clicking the Build button that appears, and
  selecting an icon file from your hard drive.

15
Minimize, Maximize, and Close Buttons
16
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.

17
Changing the Borders

• The appearance and behavior of a forms 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.

18
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 doesnt stop user
  from minimizing the form if it has a minimize
  button.

19
Showing Forms

• We created a form named OptionsForm but we didnt
  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()

20
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

21
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()

22
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.

23
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 dont 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.

24
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 cant
  work with the document on the main Word window
  until the Print dialog box is closed.

25
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()

26
Initial Display Position of a Form

• The location on the display (monitor) where a
  form first appears isnt random, but rather it is
  controlled by the forms 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.

27
Forms State

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

28
Preventing a Form from Appearing in the Taskbar

• To prevent a form from appearing in the taskbar,
  set the forms 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 AltTab,
  even though the program cant be accessed via the
  taskbar.
• Visual C doesnt allow the application to become
  completely inaccessible to the user.

29
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.

30
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?

31
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.

32
Snap Lines Example
33
Selecting a Group of Controls

• You can select a group of control on a form in
  design view in the following ways
• 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.
• Select a control and select other controls while
  Ctrl key is pressed.
• 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.

34
Selecting by Dragging Mouse
35
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.

36
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.

37
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.

38
When you resize the form, the controls remain in
the same position.
39
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.

40
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.

41
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.

42
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.

43
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.

44
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.

45
Tab Order Mode
46
TabStop Property

• To remove a control from the tab sequence, set
  its TabStop property to False.
• When a controls TabStop property is set to
  False, users can still select the control with
  the mouse, but they cant enter the control by
  using the Tab key.

47
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)

48
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.

49
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 thats
  between solid and invisible.

50
50 Opaqueness
51
Transparent Form Example

• Microsoft Outlook 2003 and newer makes good use
  of opacity in its alerts that pop up to tell you
  when youve 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.

52
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.

53
MDI Forms

• All the projects youve 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.

54
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.

55
Adobe Photoshop
56
Creating MDI Forms

• Create a new project and change the
  IsMdiContainer property of the form (named
  MDIParentForm) to True.
• Add another form (Child1Form) to the project.
• Write the following code into the Load event of
  the MDIParentForm
• Child1Form objChild new Child1Form()
• objChild.MdiParent this
• objChild.Show()

57
Creating MDI Forms (continued)

• Add a new form (Child2Form) to the project.
• Add a button to Child1Form and write the
  following code into its Click event
• Child2Form objChild new Child2Form()
• objChild.MdiParent this.MdiParent
• objChild.Show()
• Run the program.

58
MDI Form Application
59
More About MDI Forms

• If MDI forms still confuse you, dont worry. Most
  of the applications youll 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 dont 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.