Chương 1:

Advanced User Interface

1
 Objectives
1. WinForms – Basic Controls
Overview
 Overview Window Form and basic Control
 Form class
 Type of Control
 Basic Control

2. Advanced Controls

2
 Windows Form

3
 WinForms and .NET Framework

4
 Window Form
Tạo project : New > Project

 Tạo project : Chọn ngôn ngữ C# + Window

Application (Template) + Name + Location +
Solution Name

5
 Window Form

6
 Window Form
Solution Explorer : cho biết cấu trúc một
solution
Properties : cho biết thuộc tính của từng
control
Ở chế độ Design Form : ToolBox cho ta chọn
đưa vào Form tất cả các control mong muốn
Error List : hiến thị các danh sách lỗi khi biên
dịch
F5: Start Debugging ; Ctrl + F5 : Start Without
Debugging

7
8
 Properties
Hiển thị các thuộc tính của control và các Events
tương ứng ( nhấp đúp chọn event )

9
 Form : basic unit of Application

10
Form : property & method

11
11
Events

12
12
Life cycle of a form

Event
• Activated
• Click
• Deactivated
• FormClosed
• FormClosing
• GotFocus
• Load
• Resize

13
13
Use of Controls

Control class
Base class of all
controls available
in WinForms

14
14
Control Class – Properties-Method

Properties Method Event

canFocus • • Click
Focus
Controls • ControlAdd
• getNextControl
Enable • DoubleClick
• Hide • Validating
Name
Parent • IsMNemonic • Validated
TabIndex • Select • KeyPress
• • Leave
Visible Show
• LostFocus
• MouseClick
• Move
15
15
Common Controls

16
16
Label class : Property – Method- Event

Properties Method Event

Name • Click
• Contains
Text • Hide
TextAlign
• Show
UseMnemonic

Label fname = new Label();

fname.Text = “&First Name : “;
fname.UseMnemonic = true ;
17
17
TextBox & MaskedTextBox

18
18
TextBox class : Property – Method- Event

Properties Method Event

 CharacterCasing • AppendText • KeyPress

 MaxLength • • Leave
Clear
 MultiLine • TextChanged
• Focus
 Name
• Copy
 PasswordChar
• Paste
 ReadOnly
 Text

19
19
MaskedTextBox class : Property – Method- Event

Properties Method Event

Mask • GetPositionFro • MaskChanged

MaskFull mCharIndex • MaskedInputRej
MaskCompl • IsKeyLock ected
eted • SelectAll
Name
MaskedTextBox mks = new MaskedTextBox();
PromptChar mks.Mask = “00000-9999”;
Text mks.Text = “095204-7763”;
if(!mks.MaskFull)
{
MessageBox.Show(“Enter proper code …”);
20 }
20
Mask

21
21
Button class : Property – Method- Event

Properties Method Event

DialogResult • Focus • Click

Enabled • PerformClick • DoubleClick
• MouseDoubleClick
FlatStyle
Image
Name Button cmdOK = new Button();
cmdOK .Text = “OK” ;
Text cmdOK.FlatStyle = System.Windows.Forms.FlatStyle.Flat;

22
22
ListBox & ComboBox

ListBox : select
multivalue ( 1..N)

ComboBox : select
one value at a time

23
23
ListBox class : Property – Method- Event

Properties Method Event

 DisplayMember
• ClearSelected • SelectedIndexC
 Items
• GetItemText hanged
 SelectionMode
• • SelectedValueC
GetSelected
 SelectedIndex hanged
• SetSelected
• ValueMemberC
hanged

24
24
ComboBox class : Property – Method- Event

Properties Method Event

 DropDownStyle
 Items • GetItemText • DropDown
 MaxDropDownItem
 SelectedItem • SelectAll • SelectedIndexC
 SelectedIndex
• Select ( int start , hanged
 Text
 ValueMember
int length) • SelectedValueC
hanged
• ValueMemberC
hanged

25 Demo_Bai 1_tuan 5_frm57

25
LinkLabel Control

Display a Hyperlink that

link to a Web Page or
another Window Form

Properties : ActiveLinkColor
, Links , LinkColor ,
LinkVisited, Text ,
VisitedLinkColor

Method : Select

Event : LinkClicked

26 Demo: Form1-C12Bai1
26
Grouping Controls
 Value Setting ControlForm class
 RadioButton
 CheckBox
 CheckListBox
 Grouping Controls
 GroupBox
 Panel
 Images Control
 PictureBox
 ImageList
 Summary

27
27
RadioButton Class: Property-Method - Event

Properties Method Event

 Appearance • PerformClick • CheckedChanged

 AutoCheck • Select • Click
 Checked • Show
 Image

28
28
CheckBox class : Property – Method- Event
Properties Method Event

Checked • CheckedChanged
• Select
• CheckStateChange
CheckState • Show • Click
ThreeState

29 Demo_Bai1
29
CheckedListBox class : Property – Method- Event

Properties Method Event

 CheckedIndices • ClearSelected • ItemCheck

 CheckedItems
• GetItemChecked • MouseClick
 CheckOnClick
• GetItemCheckState • SelectedIndexChan
 Items
• GetItemText ged
 SelectedValue
• SetItemChecked • SelectedValueChan
 SelectedItems
• SetItemCheckState ged
 SelectedItem

30 Demo-Bai1_Tuạn_frm54
30
Grouping Control
Panel
Contains other Control
GroupBox
As Panel but appear as
Frame around Control
FlowLayoutPanel
SplitContainer
TabControl
TableLayoutPanel

31
31
Panel class : Property – Method- Event
Properties Method Event

 AutoSize • StyleChanged
• Select
 AutoSizeMode • VisibleChanged
• Show
 BorderStyle

32
32
GroupBox : Property – Method- Event
Properties Method Event

 AutoSize • StyleChanged
• Hide
 Anchor • Resize
• Show
 FlatStyle

33
33
SplitContainer
• Method
Properties •OnSplitterMoved
 Divide the form
•BorderStyle • OnSplitterMoving
into two resizable • FixedPanel
panels • IsSplitterFixed •
 As Window • Panel1 Event
•SplitterMoved
Explorer • Panel2
• SplitterMoving
• Orientation
• Click

34
34
Graphic Controls
 PictureBox
Display image on the
Form ( .bmp ,.jpg ..)
Can hold sigle image at
a time
 ImageList
Store collection of
images

35
35
PictureBox : Property – Method- Event
Properties Method Event

Image • Load • Click

ErrorImage • Leave
• LoadCompleted
InitialImage
SizeMode

36
36
ImageList: Property – Method- Event
Properties Method Event

Images • Draw • RecreateHandle

ColorDepth
ImageSize
Name

37
37
 2. Advanced Controls
 Control Properties and Layout
 ListView and TreeView Controls
 RichTextBox Control
 ProgressBar Control
 DateTimePicker Control
 MonthCalendar Control
 Timer Component
 DialogBox: FontDialog, ColorDialog, OpenFileDialog, SaveFileDialog,
PrintDialog
 Menus
 MDI Applications
 ToolStrip Control
 StatusStrip Control

38
 Control Properties and Layout (1)
 Anchor property
Causes a control to remain at a fixed distance from
the side(s) of the container even when the container
is resized.
Button được neo biên trái
Vị trí tương đối với biên trái không đổi

39 Button tự do Di chuyển tương ứng theo kích thước mới

 Control Properties and Layout (1)
 Dock property
Allows a control to span one side of its container or to fill the
entire container.

Dock = None Dock = Top

TextBox

Dock = Fill
TextBox.Multiline = True Dock = Bottom

40 Button tự do
 Control Properties and Layout (2)
Padding
Sets the space between a container's edges and
docked controls. The default is 0, causing the
control to appear flush with the containe's sides.
Location
Specifies the location (as a set of coordinates) of
the upper-left corner of the control, in relation to
its container.

41
 ListView Control

42
 ListView: Properties – Methods - Events
Properties Method Event

 Columns • • ColumnClick
ArrangeIcon()
 Items • ItemCheck
• Clear()
 MultiSelect • ItemSelectionChanged
• GetItemAt() • SelectedIndexChange
 SelectedItems
 View • Sort()

43
 ListView common properties (1)
CheckBoxes: Indicates whether items appear
with CheckBoxes.
LargeImageList: Specifies the ImageList
containing large icons for display.
SmallImageList: Specifies the ImageList
containing small icons for display.

44
 ListView common properties (2)
View: Determines appearance of ListViewItems.
Possible values are
 LargeIcon (large icon displayed, items can be in multiple
columns).
 SmallIcon (small icon displayed, items can be in multiple
columns).
 List (small icons displayed, items appear in a single
column).
 Details (like List, but multiple columns of information can
be displayed per item).
 Tile (large icons displayed, information provided to right of
icon, valid only in Windows XP or later).

45
ListView common properties (3)
FullRowselect (True/False) indicating whether the user can
select an entire row.

GridLines (True/False). If True, then gird lines between

items and subitems are drawn.

Sorting This property determines how the items will

be sorted, and as usual it’s meaningful only
in Report view.

46
 Listview Example (1)

47 Item SubItems[index]
 Listview Example (2)

48
 Listview Example (3)

49
 Listview Example
void TaoItem(ListView lvw)
{
ListViewItem lvwItem = new ListViewItem() ;
lvwItem.Text =txtMa.Text ;// text cua item
lvwItem.SubItems.Add (txtHT.Text) ;// cac subitem
lvwItem.SubItems.Add(txtDC.Text);
lvwItem.SubItems.Add(dtpNS.Text);
lvwItem.SubItems.Add(cboLop.Text);
lvwItem.ImageIndex =0;// hinh trang thai Item detail
lvw.Items.Add(lvwItem);
}

50
 Listview Example
private void bntXoa_Click(object sender, EventArgs e)
{
foreach (ListViewItem lvwItem in lvwSV.Items)
{
if (lvwItem.Selected == true)
lvwSV.Items.Remove(lvwItem);
}
}
Hay:
private void bntXoa_Click(object sender, EventArgs e)
{
foreach (ListViewItem lvwItem in lvwSV.SelectedItems)
{
lvwItem.Remove();
}
}

51
 Listview Example
private void mnuUpdate_Click(object sender, EventArgs e)
{
ListViewItem item = lvwSV.SelectedItems[0];
if(item !=null)
{
item.SubItems[0].Text = txtMa.Text;//' <=> item.Text
item.SubItems[1].Text = txtHT.Text;
item.SubItems[2].Text = txtDC.Text;
item.SubItems[3].Text = dtpNS.Text;
item.SubItems[4].Text = cboLop.Text;
}
}

52
Listview Example
private void lvwSV_MouseDown(object sender, MouseEventArgs e)
{
if (e.Button != MouseButtons.Right)
{
ListViewItem item = lvwSV.GetItemAt(e.X, e.Y);
if (item != null)
{
txtMa.Text = item.SubItems[0].Text;//' <=> item.Text
txtHT.Text = item.SubItems[1].Text;
txtDC.Text = item.SubItems[2].Text;
dtpNS.Text = item.SubItems[3].Text;
cboLop.Text = item.SubItems[4].Text;
}

}
}

53
Demo_C12_Bai1+Form6B
 TreeView Control

54
 TreeView: Properties – Methods - Events
Properties Method Event

 Nodes • CollapseAll • AfterCollapse

 SelectedNode • AfterExpand
• ExpandAll
 ShowPlusMinus • AfterSelect
• GetNodeAt • ItemDrag
 ShowRootLines
• GetNodeCount • NodeMouseClick
 TopNode
 ImageList
 CheckBoxes

55
 Adding New Items at Design Time
Add an imageList control to the form and add
some icons to the imageList
Add a TreeView control to the form
 Locate the Nodes property in the Property box, and
you’ll see that its value is Collection.
To add items, click the button with the ellipses, and
the TreeView item editor window will appear

56
 Adding New Items at Design Time
To add the root
item, just click the
here

Add items under

the selected node

57
 Adding New Items at Runtime
The Add method adds a new node to the Nodes
collection. The Add method accepts as an
argument a string or a TreeNode object.
TreeNode newNode;
newNode=treeview1.Nodes.Add(nodeCaption);
 nodeCaption is a string that will be displayed on
the control

58
 The Nodes.Add Method
To use this form of the method, you must first
declare and initialize a TreeNode object:
TreeNode nodeObj =new TreeNode;
nodeObj.Text = “Tree Node” ;
nodeObj.ForeColor = Color.BlueViolet ;
TreeView1.Nodes.Add(nodeObj) ;

59
 The Nodes.Add Method
The last overloaded form of the Add method
allows you to specify the index in the current
Nodes collection, where the node will be
added:

newNode =
Treeview.Nodes[index].Nodes.Add(nodeObj);

60
 Treeview Example

61
Treeview Example
private void btnCN_Click(object sender, EventArgs e)
{
TreeNode nodecha = new TreeNode();
nodecha.Text = txtMa.Text;
nodecha.Nodes.Add(txtHT.Text);
nodecha.Nodes.Add(txtDC.Text);
nodecha.Nodes.Add(dtpNS.Text);
nodecha.Nodes.Add(cboLop.Text);
nodecha.SelectedImageIndex = 1;// hinh o vi tri trang thai
chon
nodecha.ImageIndex = 0; // trang thai binh thuong khong
chon
treSV.Nodes.Add(nodecha);

62
 Treeview Example
private void
deleteToolStripMenuItem_Click(object sender,
EventArgs e)
{
if (treSV.Nodes.Count >0 )
if (treSV.SelectedNode !=null )
treSV.SelectedNode.Remove();

}
Xóa Node cha con xóa theo

63
 Treeview Example
private void reNameToolStripMenuItem_Click(object
sender, EventArgs e)
{
TreeNode mySelectedNode;
mySelectedNode =treSV.SelectedNode;
if (mySelectedNode != null)
{
treSV.LabelEdit = true; // cho phep doi ten
if (!mySelectedNode.IsEditing)
mySelectedNode.BeginEdit(); //' De co
con nhay chop chop
}
}

64 Demo-C12_Bai1_Bai6
 RichTextBox Control

65
 RichTextBox Control
Properties Method Event

 Font • AppendText • Click

 ScrollBars • HScroll
• Copy
 SelectedText • VScroll
• Redo
 SelectionFont
• Undo
 SelectionLength
 Text
• SelectAll
 WordWrap

66
 RichTextBox Control

67
 ProgressBar Control

68
 ProgressBar Control

69
 ProgressBar Control

70
Menus System
There are two types of menus
- Main menu ( appears on the menu bar of the form )
- Context Menu : popup menu (when right click mouse)

71
71
MenuStrip

72
72
ToolStripMenuItem
Properties
AllowMerge
LayoutStyle
ShowItemTooltip
Stretch
GetItemAt
MenuActivate
MenuDeactivate
Checked
CheckState
Select
73
73
ContextMenuStrip
 Provide a short cut for accessing menu
 Similar to the context menu
Properties Methods
SourceControl IsParent
TextDirection MdiListItem
MenuItems
GetContextM
enu
GetMainMenu
MergeMenu
74
74
MainMenu
Contains a collection of the MenuItem class
Properties Methods Events
MenuItems GetForm Popup
RightToLeft GetMainMen Collapse
SourceContro u
l FindMenuIte
m
Show

75
75
MenuItems Class

76
76
Multiple Document Interface (MDI) Windows (1)
Single document interface (SDI).
Multiple document interface (MDI) allow users to
edit multiple documents at once.
The main application window of an MDI program
is called the parent window, and each window
inside the application is referred to as a child
window.

77
 MDI windows (2)
There’s only one parent window.
A maximum of one child window can be active
at once.
Child windows cannot be parents themselves
and cannot be moved outside their parent.
A child window behaves like any other
window (with regard to closing, minimizing,
resizing, etc.).

78
 MDI windows (3)

79
 Common MDI Child Properties
IsMdiChild: Indicates whether the Form is an MDI
child. If true, Form is an MDI child (read-only
property).
MdiParent: Specifies the MDI parent Form of the
child.

80
 Common MDI Parent Properties
ActiveMdiChild: Returns the Form that is the
currently active MDI child (returns null if no
children are active).
IsMdiContainer: Indicates whether a Form can be
an MDI parent.
MdiChildren: Returns the MDI children as an
array of Forms.

81
 Common Method & Events
LayoutMdi: Determines the display of child
forms on an MDI parent. The method takes as
a parameter an MdiLayout enumeration with
possible values ArrangeIcons, Cascade,
TileHorizontal and TileVertical.
Ex: this.LayoutMdi( MdiLayout.Cascade );
Common Event:
MdiChildActivate: Generated when an MDI child is
closed or activated.

82
 Redisplaying Child Windows
 private void mnuFileOpenTree_Click(object sender, EventArgs e)
 {if (KiemTraFormTonTai("frmTreeView") == false)
 {frmTreeView frm = new frmTreeView();
 frm.Name = "frmTreeView";
 frm.MdiParent = this;
 frm.Show();
 }
 }
 Boolean KiemTraFormTonTai(string frmName)
 {
 foreach (Form frm in this.MdiChildren)
 {

 if (frm.Name.Equals(frmName))
 {
 frm.Activate(); // active form
 return true;
 }
 }
 return false ;
 }
83
ToolStrip control
• The ToolStrip control is a new control in .Net Framework 2.0.
• The ToolStrip control is used to create the ToolStrip control.
• When this control is palced on the form you can add buttons, lables,
seperators, combo boxes, and drop down buttons using the ToolStrip control.

• ImageList • GetNextItem(..)
• Items
• LayoutStyle

Properties Methods

• ItemAdded
• ItemClicked
• ItemRemoved

Events
84
84
ToolStrip control

85
85
StatusStrip control
• StatusStrip control is a new control introduced in .Net Framewok 2.0.
• The default StatusStrip control has no panel and displayed at the
bottom of the form.
• To add panels to a StatusStrip control, you use the
ToolStripItemCollection.AddRange method, or use the StatusStrip
Items Collection Editor at design time.

86
86
StatusStrip control

Propertie Event
s ItemAdded
LayoutStyl
e
87 Stretch Demo_Bai1_Nhieuform
87
 Danh sách Seminar
Tìm hiểu Linq
Tìm hiểu Điện toán đám mây
Tìm hiểu WPF
Tìm hiểu Silver Light
Tìm hiểu WCF
Tìm hiểu về web service

88