Professional Documents
Culture Documents
LTGD C4
LTGD C4
Chương 4.
Windows Form và
các control
CHUẨN ĐẦU RA
•Sử dụng đúng và hợp lý các loại giao diện ứng dụng
•Sử dụng thành thạo các thuộc tính của Form và control để
xây dựng các ứng dụng đáp ứng yêu cầu ở mức độ từ cơ
bản đến nâng cao
•Nắm bắt và xử lý các sự kiện trong Windows Form và các
control một cách hợp lý
•Thao tác thành thạo khi chuyển form và truyền dữ liệu giữa
các form
•Xây dựng và xử lý thành thạo ứng dụng dạng MDI
1
2/21/2024
NỘI DUNG
1. Form và Control
2. Các control thông dụng
3. Các control chứa (Container control)
4. Các control dạng danh sách
5. User control
6. Menu và các hộp thoại thông dụng
7. Ứng dụng SDI và MDI
Chương 4.
Windows Form và
các control
2
2/21/2024
4.1.1 Form
•Là cửa sổ cung cấp giao diện trực quan trong loại ứng dụng
Windows Form App
•Có thể tạo nhiều form trong project
•Form chính được gọi trong hàm Main
Form
•Form Prorerties:
• Name • ForeColor
• Text • StartPossition
• ShowIcon • Opacity
• ShowInTaskBar • WindowStates
• Icon • TopMost
• BackColor • FormBorderStyle
•Form methods:
• Close()
• Hide()
• Show(), ShowDialog()
3
2/21/2024
Form (tt)
•Form Events:
• Load
• FormClosing
• Activated
• Resize
• Các sự kiện về chuột
• Các sự kiện bàn phím
•…
4
2/21/2024
4.1.2 Controls
•Controls: các thành phần có thể đặt trên form (nút lệnh, ô
nhập liệu, danh sách, các hộp kiểm, hình ảnh,… )
•Các control đều kế thừa từ class Control
10
5
2/21/2024
Controls (tt)
•Thêm control vào Form: kéo thả từ hộp Toolbox vào Form
11
Controls
•Thuộc tính chung của các control:
• Name
• Text
• BackColor
• ForeColor
• Font
• Visible
• Enabled
• Bounds
• Size
• Left, Right, Top, Bottom, Width, Height
12
6
2/21/2024
Controls
•Xếp thứ tự các control:
• View, Tab Order
• Click chuột lần lượt trên các control theo thứ tự mong muốn
13
Controls
•Sắp xếp các control:
• Sử dụng menu Format
• Sử dụng thanh công cụ
14
7
2/21/2024
Controls
•Thay đổi thuộc tính các control:
15
Controls
•Định vị các control dùng code:
• Size, Location, Top, Left, Width, Height.
TextBox1.Location = new Point (100,50);
/*thiết lập tọa độ vị trí điểm góc trên trái của textbox
là(100,50)*/
TextBox1.Size = new Size (250, 150);
/* thiết lập kích thước cho textbox với chiều rộng là 250 pixel,
chiều cao là 150 pixel */
Hoặc:
TextBox1.Left = 100;
TextBox1.Top = 50;
TextBox1.Width = 250;
TextBox1.Height = 150;
16
8
2/21/2024
Controls (tt)
•Định vị các control dùng thuộc tính Anchor:
• trái (Left)
• phải (Right)
• trên (Top)
• dưới (Bottom)..
17
Controls (tt)
•Định vị các control dùng thuộc tính Dock
18
9
2/21/2024
Controls (tt)
•Xử lý các sự kiện của control:
• Trong bảng Properties, chọn tab Events
• Double click hoặc nhập tên hàm tương ứng với sự kiện
19
Chương 4.
Windows Form và
các control
20
10
2/21/2024
21
Label
•Trình bày văn bản dạng “tĩnh
•Các thuộc tính thông dụng:
• BorderStyle.
• TextAlign
• AutoSize
22
11
2/21/2024
TextBox
•Dùng để nhập dữ liệu
•Có ba dạng:
• nhập một dòng văn bản
• nhập nhiều dòng
• nhập dạng mật khẩu
23
TextBox (tt)
•Một số thuộc tính:
• CharacterCasing
• Maxlength
• MultiLine
• PasswordChar
• ReadOnly
• ScrollBars
• WordWrap
•Sự kiện mặc định: TextChanged
24
12
2/21/2024
Button
•Nút lệnh, khi click vào sẽ thực thi một tác vụ nào đó.
•Hiển thị chuỗi hoặc hình ảnh (thuộc tính BackgroundImage)
25
CheckBox
•Hộp kiểm cho phép chọn nhiều lựa chọn.
•Thuộc tính kiểm tra chọn/không chọn: Checked
•Sự kiện mặc định: CheckedChanged.
private void btXacnhan_Click(object sender, EventArgs e)
{
lbKetqua.Text = "Sở thích của bạn là:\n";
if (chkTinhoc.Checked)
lbKetqua.Text += chkTinhoc.Text + "\n";
if (chkVanhoc.Checked)
lbKetqua.Text += chkVanhoc.Text + "\n";
if (chkNhac.Checked)
lbKetqua.Text += chkNhac.Text + "\n";
}
26
13
2/21/2024
RadioButton
•Tương tự CheckBox, nhưng chỉ cho phép chọn một trong
các lựa chọn.
•Các RadioButton nằm trong một control chứa (Form,
GroupBox, Panel) tạo thành một nhóm
27
PictureBox
•Control hiển thị hình ảnh
•Thuộc tính:
• Image
• SizeMode
28
14
2/21/2024
PictureBox
•Thiết lập thuộc tính Image cho PictureBox bằng trực quan:
29
PictureBox
•Thiết lập thuộc tính Image cho PictureBox dùng code:
• Tạo một đối tượng Image hoặc Bitmap
• Gán đối tượng vừa tạo vào thuộc tính Image của PictureBox.
• Ví dụ:
30
15
2/21/2024
Tooltip
•Hiển thị chú thích khi đưa trỏ chuột đến control
•Kéo biểu tượng Tooltip lên Form
•Hiệu chỉnh các thuộc tính
• TooltipTitle
• TooltipIcon
•Nhập chuỗi muốn hiển thị ở thuộc tính Tooltip on… của
control
31
NumericUpDown
•Control hiển thị số nguyên có thể tăng, giảm giá trị khi
chương trình thực thi.
•Một số thuộc tính:
• Value
• Increment
• Minimum.
• Maximum
•Sự kiện mặc định: ValueChanged
32
16
2/21/2024
VScrollBar, HScrollBar
•HScrollBar (Horizontal ScrollBar): thanh cuộn ngang
•VScrollBar (Vertical ScrollBar): thanh cuộn dọc.
•Một số thuộc tính:
• Value
• Minimum
• Maximum.
•Sự kiện mặc định: Scroll
33
Timer
•Control xử lý thực thi một tác vụ sau một khoảng thời gian
•Một số thuộc tính:
• Name
• Enabled: true/false
• Interval: thời gian
kích hoạt sự kiện tick
với đơn vị mili giây
•Sự kiện duy nhất: Tick
34
17
2/21/2024
Timer
•Ví dụ tạo một đồng hồ điện tử:
• Thiết lập thuộc tính cho timer1
• Interval: 1000
• Enabled: True
• Viết code trong sự kiện Tick:
private void timer1_Tick(object sender, EventArgs e)
{
lbTime.Text = String.Format("{0}:{1:00}:{2:00}",
DateTime.Now.Hour,
DateTime.Now.Minute,
DateTime.Now.Second);
}
35
Chương 4.
Windows Form và
các control
36
18
2/21/2024
37
GroupBox, Panel
•GroupBox:
• Hiển thị một khung bao
quanh một nhóm control
• Có thể hiển thị tiêu đề
•Panel:
• Không có tiêu đề
• Có thanh cuộn (scrollbar)
• Chứa nhiều control hơn
GroupBox
38
19
2/21/2024
TabControl
•Cho phép thể hiện nhiều trang trên cùng một form
•Mỗi trang là một TabPage
•Hiệu chỉnh: TabPage Collection Editor
39
Chương 4.
Windows Form và
các control
40
20
2/21/2024
41
ListBox
•Control hiển thị danh sách các phần tử là các chuỗi văn bản
•Một số thuộc tính:
• Items
• SelectedIndex
• SelectedItem
• SelectedItems
• SelectionMode
• None
• One
• MultiSimple
• MultiExtended
42
21
2/21/2024
ListBox (tt)
•Thêm phần tử vào ListBox:
• listName.Items.Add(text)
• listName.Items.AddRange(array)
• listName.Items.Insert(index, text
string[] arr = { "Phần tử 2", "Phần tử 3", "Phần tử 4" };
listBox1.Items.Add("Phần tử 1");
listBox1.Items.AddRange(arr);
listBox1.Items.Insert(2, "Phần tử 5");
43
ListBox
•Ví dụ: private void FrmListBox_Load(object sender, EventArgs e)
{
string[] arrColor = { "Red", "Green", "Blue" };
listText.Items.AddRange(arrColor);
}
private void btAdd_Click(object sender, EventArgs e)
{
if (txtText.Text != "")
listText.Items.Add(txtText.Text);
}
private void btDelete_Click(object sender, EventArgs e)
{
int index = listText.SelectedIndex;
if (index >= 0) listText.Items.RemoveAt(index);
}
44
22
2/21/2024
ComboBox
•Tương tự ListBox, nhưng khác ở dạng thức trình bày.
•Một số thuộc tính riêng:
• MaxDropDownItems
• DropDownStyle:
• Simple
• DropDown
• DropDownList
45
ImageList
•Control chứa danh sách các đối tượng Image làm nguồn
cho các control khác như ListView, TreeView
•Các thuộc tính:
• Images
• ImageSize
•Images Collection Editor:
46
23
2/21/2024
ImageList
•Cách sử dụng:
• Thêm control ImageList lên Form
• Thiết lập kích thước của các ảnh: ImageSize
• Bổ sung các ảnh vào ImageList: Images
• Truy xuất hình trong ImageList: ImageIndex
• Sử dụng ImageList cho các control (ListView, TreeView)
• Các thuộc tính: ImageList, LargeImageList, SmallImageList
• Thiết lập các Item/Node với ImageIndex tương ứng
• Có thể dùng thao tác trực quan hoặc viết code
47
ListView
•Trình bày danh sách với nhiều dạng khác nhau.
48
24
2/21/2024
ListView
•Một số thuộc tính:
• Columns
• Items
• LargeImageList: chứa hình hiển thị ở chế độ View=LargeIcon.
• SmallImageList: chứa hình hiển thị ở chế độ View=SmallIcon,
Detail, List.
• View: cách hiển thị của ListView.
• SelectedItems: danh sách các phần tử được chọn
49
ListView
•Thiết kế ListView trong môi trường trực quan: cửa sổ
ListView Tasks.
50
25
2/21/2024
ListView
•Thêm cột vào ListView bằng code:
listView1.Columns.Add (“ColumnName", Width, Alignment);
• ColumnName: chuỗi tiêu đề cột.
• Width: độ rộng, mặc định bằng với kích thước chuỗi.
• Alignment:
• HorizontalAlignment.Left (mặc định)
• HorizontalAlignment.Right
• HorizontalAlignment.Center
ListView chỉ hiển thị dạng cột khi View = View.Detail
•Thêm các phần tử vào ListView bằng code:
• Tạo đối tượng ListViewItem: chuỗi hiển thị ở cột đầu tiên
• Các chuỗi hiển thị ở các cột kế tiếp là các đối tượng SubItem
51
ListView
listView1.View = View.Details;
//Thêm 3 cột vào listview
listView1.Columns.Add("Họ tên", 150);
listView1.Columns.Add("Học vấn", 80, HorizontalAlignment.Center);
listView1.Columns.Add("Ngày đăng ký", 100, HorizontalAlignment.Right);
//Thêm một hàng trong listview
ListViewItem item = new ListViewItem("Nguyễn Văn Thành");
item.SubItems.Add("Đại học");
item.SubItems.Add(DateTime.Now.ToString("dd/MM/yyyy"));
listView1.Items.Add(item);
52
26
2/21/2024
ListView
•Xóa một phần tử trong ListView:
listView1.Items.Remove(item);
listView1.Items.RemoveAt(index);
listView1.Items.Clear();
• Trong đó:
• item là một đối tượng ListViewItem
• index là vị trí phần tử trong ListView
•Thay đổi chế độ hiển thị:
listView1.View = View.Details; //hoặc List, LargeIcon,…
53
ListView
private void btThem_Click(object sender, EventArgs e)
•Ví dụ {
ListViewItem item = new ListViewItem(txtHoten.Text);
item.SubItems.Add(txtHocvan.Text);
item.SubItems.Add(DateTime.Now.ToString("dd/MM/yyyy"));
if (rdNam.Checked) item.ImageIndex = 1; //hình icon Nam
else item.ImageIndex = 0; //hình icon Nữ
listDangky.Items.Add(item);
}
private void btXoa_Click(object sender, EventArgs e)
{
foreach (ListViewItem item in listDangky.SelectedItems)
listDangky.Items.Remove(item);
}
54
27
2/21/2024
TreeView
•Trình bày danh sách phân cấp dạng node
•Một số thuộc tính:
• Nodes: danh sách các phần tử
• ImageList: control ImageList, chứa các
biểu tượng hiển thị trong TreeView.
• SelectedNode: node đang được chọn.
• TopNode: node cao nhất trong TreeView.
55
TreeView
•Thiết kế TreeView trong môi trường trực quan: cửa sổ
TreeView Tasks
56
28
2/21/2024
TreeView
•Mỗi phần tử trong TreeView là một TreeNode
• Thêm từng node vào TreeView:
treeView.Nodes.Add(treenode)
treeView.Nodes [level].Nodes.Add(treenode)
treeView.Nodes [level].Nodes[level1].Nodes.Add(treenode)
• Tạo đối tượng TreeNode →thiết lập các thuộc tính cho đối
tượng → thêm node mới tạo vào TreeView:
TreeNode newnode= new TreeNode (“node name”);
newnode.ImageIndex = 0;
treeView1.Nodes.Add(newnode);
57
TreeView
•Ví dụ private void FrmTreeView_Load(object sender, EventArgs e)
{
treeView1.Nodes.Clear();
TreeNode newnode = null, subnode=null;
for (int i = 1; i <= 3; i++)
{
newnode = new TreeNode(String.Format("Node {0}", i));
newnode.ImageIndex = 0;
for (int j = 1; j <= 2; j++)
{
subnode = new TreeNode(String.Format("Node
{0}.{1}", i, j));
subnode.ImageIndex = 1;
newnode.Nodes.Add(subnode);
}
treeView1.Nodes.Add(newnode);
}
}
58
29
2/21/2024
Chương 4.
Windows Form và
các control
4.5 UserControl
59
User control
•Là control do người sử dụng tự định nghĩa.
•Được sử dụng như các control thông thường khác bằng
cách kéo thả từ cửa sổ Toolbox.
•UserControl được tạo ra còn có thể được sử dụng trong
các ứng dụng khác.
•Tạo UserControl dùng trong một ứng dụng:
• Project →Add User Control
• UserControl được tạo ra giống như một form nhưng không có
tiêu đề.
• Thiết kế giao diện và thao tác trên UserControl như với một
form thông thường.
60
30
2/21/2024
User control
•Tạo User control sử dụng trong ứng dụng khác
• Tạo ứng dụng Class Library
• Xóa file Class1.cs.
• Thêm một UserControl vào project.
• Thực hiện các thao tác trên UserControl
• Biên dịch → file có phần mở rộng là dll.
• Trong ứng dụng khác, click chuột phải trên Toolbox → Choose
item…, chọn file dll nói trên, click nút OK.
• UserControl sẽ hiển thị trên cửa sổ Toolbox
61
User control
•Ví dụ tạo ClockControl hiển thị một đồng hồ điện tử
62
31
2/21/2024
User control
•Xóa file Class
63
User control
64
32
2/21/2024
User control
•Thêm vào Label và control Timer:
public partial class CLock : UserControl
{
public CLock()
{
InitializeComponent();
}
private void CLock_Load(object sender, EventArgs e)
{
label1.BackColor = bgColor;
label1.ForeColor = textColor;
}
private void timer1_Tick(object sender, EventArgs e)
{
label1.Text = String.Format("{0}:{1:##}:{2:##}",
DateTime.Now.Hour, DateTime.Now.Minute,
DateTime.Now.Second);
}
}
65
User control
•Build → thư mục project có file ClockCtrl.dll
66
33
2/21/2024
User control
•Click nút Browse…, chọn file ClockCtrl.dll
•Trên thanh Toolbox xuất hiện control Clock, kéo vào form
67
Chương 4.
Windows Form và
các control
68
34
2/21/2024
4.6.1 Menu
•Menu được tổ chức phân cấp
• Menu
• Sub menu
• Menu item
69
Menu (tt)
•Control MenuStrip
•Một số thuộc tính
• Text
• Shortcut Keys
• Image
• AutoTooltip,...
•Các loại menu item
• MenuItem
• ComboBox
• TextBox
• Separator
•Sự kiện mặc định: Click
70
35
2/21/2024
71
72
36
2/21/2024
OpenFileDialog
•Hộp thoại chọn và mở file
•Các thuộc tính cơ bản:
• Filter: chuỗi quy định loại file được hiển thị trong danh sách
• Multiselect: cho phép chọn nhiều hoặc chỉ chọn một file, mặc
định là false.
• FileName: file được chọn kiểu string (Multiselect = false)
• FileNames: danh sách các file được chọn kiểu string
(Multiselect = true).
73
OpenFileDialog (tt)
•Sử dụng hộp thoại OpenFileDialog:
74
37
2/21/2024
OpenFileDialog (tt)
75
SaveFileDialog
•Tương tự OpenFileDialog, không có thuộc tính Multiselect
76
38
2/21/2024
SaveFileDialog (tt)
•Ví dụ: ghi nội dung trong textBox1 ra file được chọn từ hộp
thoại
private void btSave_Click(object sender, EventArgs e)
{
SaveFileDialog dlg = new SaveFileDialog();
dlg.Filter = "Text File (*.txt)|*.txt" + "|Code file (*.cpp)|*.cpp";
if (dlg.ShowDialog() == DialogResult.OK)
{
File.WriteAllText(dlg.FileName, textBox1.Text);
}
}
77
FontDialog
•Hộp thoại chọn font chữ.
•Các thuộc tính: Font, Color, ShowEffects, ShowApply,
ShowColor
private void btChangeFont_Click(
object sender, EventArgs e)
{
FontDialog dlg = new FontDialog();
dlg.ShowEffects = true;
dlg.ShowColor = true;
dlg.ShowApply = true;
if (dlg.ShowDialog() == DialogResult.OK)
textBox1.Font = dlg.Font;
}
78
39
2/21/2024
FontDialog (tt)
•Ví dụ:
private void btChangeFont_Click(
object sender, EventArgs e)
{
FontDialog dlg = new FontDialog();
dlg.ShowEffects = true;
dlg.ShowColor = true;
dlg.ShowApply = true;
if (dlg.ShowDialog() == DialogResult.OK)
textBox1.Font = dlg.Font;
}
79
ColorDialog
•Hộp thoại cho phép chọn màu
•Các thuộc tính
• AllowFullOpen: true/false - cho/không cho phép người sử dụng
định nghĩa một màu tùy chọn.
• FullOpen: true/false - cho/không cho phép mở hộp thoại màu
dạng đầy đủ.
private void btChangeColor_Click(object sender,
EventArgs e)
{
ColorDialog dlg = new ColorDialog();
dlg.FullOpen = true;
if (dlg.ShowDialog() == DialogResult.OK)
textBox1.ForeColor = dlg.Color;
}
80
40
2/21/2024
FolderBrowserDialog
•Hộp thoại chọn thư mục
•Các thuộc tính cơ bản:
• Description
• SelectedPath
• ShowNewFolderButton
private void btBrowse_Click(object sender,
EventArgs e)
{
FolderBrowserDialog dlg = new
FolderBrowserDialog();
dlg.Description = "Choose a folder";
dlg.ShowNewFolderButton = true;
if (dlg.ShowDialog() == DialogResult.OK)
textBox1.Text = dlg.SelectedPath;
}
81
Chương 4.
Windows Form và
các control
82
41
2/21/2024
83
84
42
2/21/2024
//class Form1
//Hàm xử lý sự kiện click lên button btOpenForm2
private void btOpenForm2_Click(object sender, EventArgs e)
{
Form2 f = new Form2(txtMessage.Text);
f.Show();
}
85
86
43
2/21/2024
87
88
44
2/21/2024
89
90
45
2/21/2024
91
46