Windows Forms and the User Interface pdf

Week 1

Chapter 1: Windows Forms and the
User Interface

Chapter 2: Configuring Controls
1
Chapter 1: Windows Forms
and the User Interface

Lesson 1: Adding and configuring Windows Forms

Adding Forms to the project

Properties of Windows Forms

Creating non-rectangular Windows Forms

Lesson 2: Managing control layout with container
controls
Slide 2
Adding Forms to the project

At design time

To add a new Form: right-click to the project shown in
Solution Explorer, select Add\Windows Form

To add a existing Form: right-click to the project
shown in Solution Explorer, select Add\Existing Item
(choose file .cs)


At run time

Form1 myForm;
myForm = new Form1();
myForm.Show();
Chapter 1 - Lesson 1: Adding and configuring Windows Forms
Slide 3
Properties of Windows Forms

Note:
p.11
p.9
p.11
Chapter 1 - Lesson 1: Adding and configuring Windows Forms
Slide 4
Properties of Windows Forms
(cont.)

AcceptButton property

CancelButton Property
p.11
p.10
Chapter 1 - Lesson 1: Adding and configuring Windows Forms
Slide 5
Create a non-rectangular form
(p.15)

For advanced visual effects


To create a non-rectangular form:

In Form_Load event, change the Region property

Create a new instance of the GraphicsPath class (in
System.Drawing.Drawing2D namespace)

Create the new Region from it
Chapter 1 - Lesson 1: Adding and configuring Windows Forms
A GraphicsPath represents a series of
connected lines and curves
A GraphicsPath may be composed of any
number of figures, like ellipse
Slide 6
Example: Create a non-rectangular
form
GraphicsPath myPath = new GraphicsPath();
// Adds an ellipse to the graphics path that inscribes
// the rectangle defined by the form's width and height
myPath.AddEllipse(0, 0, this.Width, this.Height);
// Creates a new Region from the GraphicsPath
Region myRegion = new Region(myPath);
// Sets the form's Region property to the new region
this.Region = myRegion;
Chapter 1 - Lesson 1: Adding and configuring Windows Forms
Exercise 1,2 p.16,p.17
Slide 7
Managing control layout with
container controls


Container controls

Panel control

GroupBox control

TabControl control

SplitContainer control

FlowLayoutPanel control

TableLayoutPanel control

Exercise: Practice with Container Controls (p.35-38)
Chapter 1 - Lesson 2: Managing control layout with container controls
Slide 8

Panel control (p.26)

Scrollable control

Supports horizontal and vertical scroll bars

No caption
Chapter 1 - Lesson 2: Managing control layout with container controls
Slide 9

GroupBox control (p.25)


Does not provide scrollbars

Have a caption (Text property)

The most common use: grouping RadioButton
controls
Chapter 1 - Lesson 2: Managing control layout with container controls
Slide 10

TabControl control (p.32)

Group sets of controls on tabs

TabPages property

A TabControl can have one or more TabPage

Each TabPage controls is like Panel control

Some important properties of the TabControl control
and TabPage control (p 36-37)
Chapter 1 - Lesson 2: Managing control layout with container controls
Slide 11

SplitContainer control (p.33)

The SplitContainer control creates a subsection of
the form


Splitter divides the SplitContainer into two
SplitterPanel

SplitterPanel like Panel control

By default, the Dock property of SplitContainer is Fill

Orientation property: orientation of the Splitter

Exercise 4 - Module 2
Chapter 1 - Lesson 2: Managing control layout with container controls
Slide 12

FlowLayoutPanel control (p.26)

FlowLayoutPanel is a subclass of the Panel control

Dynamically reposition the controls inside when it is
resized at either design time or run time

FlowDirection property

LeftToRight by default: controls placed in the
FlowLayoutPanel will locate in the upper left-hand
corner and then flow to the right

WrapContents property

If WrapContents is set to True (default), controls will
automatically wrap to the next column or row

Chapter 1 - Lesson 2: Managing control layout with container controls
Slide 13

TableLayoutPanel control
(p.28)

TableLayoutPanel is a table that provides cells for
the individual control

only one control can be placed in a single cell

TableLayoutPanel is scrollable container

A cell on TableLayoutPanel can hold the other
TableLayoutPanel control

Columns or Rows property: set the size of the rows
and columns
Chapter 1 - Lesson 2: Managing control layout with container controls
Slide 14
Chapter 2: Configuring
Controls

Lesson 1: Configuring Controls in Windows Forms

Modify the size, location of a control at design time

Anchor, dock a control within a Windows Form or
other container control


Modify control properties by using SmartTags

Manage the allocation of controls in a Windows Form
by using the Document Outline window

Lesson 2: Creating and Configuring command and
text controls
Slide 15
Layout toolbar

Adjust controls with Layout toolbar (p.51)
Chapter 2 - Lesson 1: Configuring Controls in Windows Forms
Slide 16
Common Properties of Controls

Common properties of controls (p.51)
p.54, Exercise 2 - Module 1
p.55
Chapter 2 - Lesson 1: Configuring Controls in Windows Forms
Slide 17
Smart Tags (p.56)

Some controls expose their most common tasks
through smart tags. When present, smart tags
appear as small boxes in the upper right-hand
corner of the control
Slide 18
A Combo box with a smart tag
Chapter 2 - Lesson 1: Configuring Controls in Windows Forms
Document Outline Window


Document Outline Window (p.57)

Displays all of the controls and container controls in a
form

View\Other Windows\Document Outline

Use for

Move controls from one container to another

To delete controls from the form

To add a control to a container (copy/paste)
Chapter 2 - Lesson 1: Configuring Controls in Windows Forms
Slide 19
Best practices for user interface
design (p.58)

Simplicity

Position of controls

Consistency

Aesthetics
Slide 20
Button control


Button control properties (p.67)

Exercise 7 – Module 1: DialogResult
p.70
p.71
Chapter 2 - Lesson 2: Creating and Configuring command and text controls
Slide 21
Button control (cont.)

Button control: Mouse events: MouseDown (p.64)

Demo p.64

Some other controls are the same
Chapter 2 - Lesson 2: Creating and Configuring command and text controls
Slide 22
TextBox control (p.73)

TextBox control properties

Exercise 5, 6 Module 1
Chapter 2 - Lesson 2: Creating and Configuring command and text controls
Slide 23
Label control

Label control (p.67)

Using with Textbox

To define access keys for other controls


Set next TabIndex value
Demo
Chapter 2 - Lesson 2: Creating and Configuring command and text controls
Slide 24
LinkLabel control

LinkLabel control (p.67)

Like Label control

Allows you to create a Web-style link in your form that
opens a Web page or performs some other action
when clicked

Contains a variety of properties that allow you to
configure the LinkLabel control (Table 2-5)

Demo p.68
Demo
Chapter 2 - Lesson 2: Creating and Configuring command and text controls
Slide 25