Transcript EEM336 – Microprocessors I

BIM313 – Advanced 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
BackgroundImage
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 system.
• 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