Gi i thi u:ớ ệ
Ngoài ch c năng gom nhóm các đi u khi n khác thành các nhóm ch cứ ề ể ứ năng b ng GroupBox nh bài h c trằ ư ọ ước. Visual Studio còn có các đi u khi nề ể khác nh Panel, SplitContainer, TabControl đ gom nhóm các đi u khi n khác.ư ể ề ể M c tiêu:ụ
Trình bày và v n d ng Panel cho đ ánậ ụ ồ
Trình bày và v n d ng SplitContainer cho đ ánậ ụ ồ
Trình bày và v n d ng TabControl cho đ ánậ ụ ồ
Rèn luy n tính c n th n, t giác, sáng t o, làm vi c nhóm.ệ ẩ ậ ự ạ ệ N i dung chính:ộ
18.1. Panel
Cũng nh GroupBox, Panel là m t đi u khi n dùng đ ch a các đi u khi nư ộ ề ể ể ứ ề ể khác.
Panel có các thu c tính AutoSize, AutoSizeMode nh GroupBox và thu c tínhộ ư ộ đường vi n BorderStyle nh Label.ề ư
Đi m khác bi t c a Panel v i GroupBox là đi u khi n Panel không có tiêu để ệ ủ ớ ề ể ề mô
t (không có thu c tính Text) và có thanh trả ộ ượt ScrollBar ngang và ScollBar d c (có thu c tính AutoScroll).ọ ộ
Đi u khi n Panel đ t trong nhóm Containers c a c a s Toolbox ề ể ặ ủ ử ổ
Hình 18.1. Hi n th đi u khi n Panelể ị ề ể
B ng 18.1. B ng mô t các thu c tính c a Panelả ả ả ộ ủ
Thu c tínhộ Mô tả
AutoScroll
Mang giá tr True ho c False.ị ặ
N u là True: ế Panel t đ ng xu t hi n thanh trự ộ ấ ệ ượt khi kích thước Panel không th hi n th h t các đi u khi nể ể ị ế ề ể
ch aứ bên
trong
N u là False: Panel s không hi n th thanh trế ẽ ể ị ượt
BorderStyle
Ki u để ường vi n c a Panel khi hi n th . Có 3 giá tr :ề ủ ể ị ị None, FixedSingle và Fixed3D
None: Không hi n th để ị ường vi nề
FixedSingle:Quanh Panel s hi n th m t đẽ ể ị ộ ường vi nề đ n.ơ
Fixed3D: Hi n th để ị ường vi n c a Panel d ng 3 chi u.ề ủ ạ ề 18.2. SplitContainer
Đi u khi n ề ể SplitContainer giúp phân chia form thành hai ph n. C thầ ụ ể h nơ
SplitContainer được c u t o b i hai đi u khi n ấ ạ ở ề ể Panel, m i ỗ Panel trong đi uề khi nể
SplitContaner đ u có ch c năng nh m t đi u khi n ề ứ ư ộ ề ể Panel thông thường. Khi thêm đi u khi n ề ể SplitContainer t c a s Toolbox vào form thì m c đ nhừ ử ổ ặ ị SplitContainer có thu c tính ộ Dock mang giá tr ị Fill. Kích thước c a ủ hai Panel trong SplitContainet có th thay đ i nh ể ổ ờ Splitter, Splitter là m t v ch phânộ ạ cách hai Panel. Đi u khi n ề ể SplitContainer n m trong nhóm Containers c aằ ủ c a s Toolbox ử ổ
Hình 18.2. Hi n th đi u khi n SplitContainerể ị ề ể
Các Panel đ u h tr thanh trề ỗ ợ ượt (ScrollBar) khi thu c tính ộ AutoScroll được thi tế
l p là True.ậ
Tuy nhiên Panel trong SplitContainer không có thu c tính ộ BorderStyle đ thi tể ế l p đậ ường vi n, vì là đi u khi n ch a trong SplitContainer, do đó thu c tínhề ề ể ứ ộ BorderStyle được đ t đi u khi n ặ ở ề ể SplitContainer. Các giá tr c a thu c tínhị ủ ộ BorderStyle c a ủ SplitContainer cũng g m 3 giá tr nh ồ ị ư Panel: None, Fixed3D, FixedSingle.
V ch phân cách ạ Splitter có th phân cách theo chi u d c ho c chi u ngang tùyể ề ọ ặ ề thu c vào thu c tính ộ ộ Orientation. Thu c tính ộ Orientation mang hai giá tr đị ể thi t l p SplitContair là: ế ậ Vertical và Horizontal nh sau:ư
Hình 18.3. Các ki u hi n th c a đi u khi n SplitContainerể ể ị ủ ề ể
N u không mu n cho ngế ố ười dùng d ch chuy n v ch phân cách ị ể ạ Splitter đ thayể đ i kích thổ ước c a hai ủ Panel, l p trình viên có th thi t l p thu c tínhậ ể ế ậ ộ IsSplitterFixed c a ủ SplitContainer là True. Ngoài ra m t đi m đ c bi t là cóộ ể ặ ệ
th ch đ nh không cho phép thay đ i kích thể ỉ ị ổ ướ ủc c a Panel1 ho c Panel2 b ngặ ằ cách k t h p thu c tính ế ợ ộ FixedPanel và thu c tính ộ IsSplitterFixed nh b ngư ả sau:
B ng 18.2. B ng mô t thu c tính IsSplitterFixed và FixedPanelả ả ả ộ
Thu c tínhộ Tác d ngụ
IsSplitterFixed = False
Thu c tính ộ FixedPanel không có hi u l c. Ngệ ự ười dùng có th thay đ i kích thể ổ ước c a Panel1 và củ ả Panel2
IsSplitterFixed = True
Thi t l p thu c tính FixedPanel:ế ậ ộ
FixedPanel = None: Người dùng không th sể ử d ngụ
v ch phân cách ạ Splitter đ thay đ i kích thể ổ ước c aủ cả
Panel1 và Panel2. Nh ng kích thư ước c hai Panelả sẽ
thay đ i khi ổ SplitContainer có thu c tính ộ Dock là Fill và người dùng thay đ i kích thổ ước form.
FixedPanel = Panel1: Người dùng không th thayể đ i kích thổ ước Panel1 (Khi thay đ i kích thổ ước form thì kích thước Panel2 thay đ i, kích thổ ước Panel1 là không đ i).ổ
FixedPanel = Panel2: Người dùng không th thayể đ i kích thổ ước Panel2 (Khi thay đ i kích thổ ước form thì kích thước Panel1 thay đ i, kích thổ ước Panel2 là không đ iổ).
M t trong hai ộ Panel c a ủ SplitContainer có th n đi b ng cách thi t l p thu cể ẩ ằ ế ậ ộ tính Panel1Collapsed và Panel2Collapsed là True. Vi c n hai ệ ẩ Panel ch có cóỉ tác
d ng v i m t ụ ớ ộ Panel. Nghĩa là ch có th thi t l p m t trong hai thu c tínhỉ ể ế ậ ộ ộ Panel1Collapsed và Panel2Collapsed là True. Khi Panel1Collapsed là True thì Panel2Collapsed là False và ngượ ạc l i.
B ng 18.3. B ng mô t các thu c tính c a SplitContainerả ả ả ộ ủ
Thu c tínhộ Mô tả
BorderStyle Thiêt l p đậ ường viên cho SplitContainer. G m 3 giá tr :ồ ị None, FixedSingle, Fixed3D.
FixedPanel C đ nh kích thố ị ước c a các ủ Panel trong SplitContainer.
G m 3 giá tr : ồ ị None, Panel1, Panel2.
IsSplitterFixed Mang hai giá tr True và False. N u là True, c đ nh v chị ế ố ị ạ phân cách Splitter
Orientation Xác đ nh v ch phân cách Splitter s phân cách theo chi uị ạ ẽ ề ngang hay d c. G m 2 giá tr : Vertical, Horizontal.ọ ồ ị
Panel1Collapse d
Mang hai giá tr True ho c False. N u là True s nị ặ ế ẽ ẩ Panel1
Panel1MinSize L y kích thấ ước nh nh t ho c thi t l p kích thỏ ấ ặ ế ậ ước nhỏ nh t cho Panel1ấ
Panel2Collapse d
Mang hai giá tr True ho c False. N u là True s nị ặ ế ẽ ẩ Panel2
Panel2MinSize L y kích thấ ước nh nh t ho c thi t l p kích thỏ ấ ặ ế ậ ước nhỏ nh t cho Panel2ấ
SplitterDistance
Tr v kho ng cách b ng pixel t Splitter đ n c nh bênả ề ả ằ ừ ế ạ trái (n u hai Panel n m d c) hay đ n c nh trên (n u haiế ằ ọ ế ạ ế Panel n m ngang)ằ
SplitterWidth thi t l p đ r ng c a v ch phân cách Splitterế ậ ộ ộ ủ ạ
Ví d : Vi t chụ ế ương trình có giao di n nh hình bên dệ ư ưới. G m: 1 đi u khi nồ ề ể SplitContainer v i Panel1 ch a 1 đi u khi n ListView và Panel2 ch a 1 đi uớ ứ ề ể ứ ề khi n WebBrowser.ể
Yêu c u: Ngầ ười dùng nh p đậ ường d n website vào TextBox và nh n nútẫ ấ thêm. Đường d n website v a nh p s đẫ ừ ậ ẽ ược đ a vào ListView. Ngư ười dùng có th hi n th b t c website nào trên WebBrowser b ng cách nh p chu tể ể ị ấ ứ ằ ấ ộ vào đường d n ch a trong ListView. ẫ ứ
Hình 18.4. Form dùng các đi u khi n và k t h p Panel đ phân b , gom nhómề ể ế ợ ể ổ Th c hi n chự ệ ương trình:
Bước 1: T o Form có thu c tính Text = “Form 1”.ạ ộ Bước 2: Đ a vào form các đi u khi n ư ề ể
Bước 3: Th c hi n l p trình cho các Buttonự ệ ậ S ki n Click cho nút btnThoatự ệ
S ki n ự ệ Load c a Form1: ủ
S ki n ự ệ Click c a nút btnThem: ủ
S ki n ự ệ Click c a nút btnCapNhat: ủ
S ki n ự ệ Click c a nút btnXoa: ủ
S ki n ự ệ MouseClick c a listLinkWebsite: ủ
3. TabControl
TabControl là đi u khi n d ng Containers, do đó có th ch a các di uề ể ạ ể ứ ề khi nể
khác. Đi m đ c bi t c a TabControl là cho phép th hi n nhi u page trên m tể ặ ệ ủ ể ệ ề ộ form duy nh t. M i page có th ch a nhi u đi u khi n khác bên trong. Đi uấ ỗ ể ứ ề ề ể ề khi nể
TabControl n m trong nhóm Containers c a c a s Toolbox ằ ủ ử ổ
Hình 18.5. Hi n th đi u khi n TabControlể ị ề ể TabPage:
Thu c tính quan tr ng nh t c a ộ ọ ấ ủ TabControl là TabPage. M t ộ TabControl có thể
có nhi u ề TabPage . Người dùng có th nh p vào các tab đ chuy n đ iể ấ ể ể ổ qua l i gi a các ạ ữ TabPage v i nhau ớ
Hình 18.7. Hi n th giao di n c a TabControlể ị ệ ủ
TabPage là đi u khi n d ng Container n m trong ề ể ạ ằ TabControl và có th ch aể ứ các
đi u khi n khác bên trong. M i ề ể ỗ TabPage có các thu c tính riêng, l p trình viênộ ậ có th thi t l p giá tr thu c tính khác nhau trên m i ể ế ậ ị ộ ỗ TabPage c a ủ TabControl b ng cách nh p chu t trái ch n thu c tính ằ ấ ộ ọ ộ TabPages trên c a s Properties.ử ổ Khi đó m t c a s TabPage Collection Editor s hi n th nh hình bên dộ ử ổ ẽ ể ị ư ưới.
T i c a s này, cũng có th thêm ho c xóa các ạ ử ổ ể ặ TabPage b ng cách nh n nútằ ấ Add ho c Remove ặ
Hình 18.8. Màn hình đ thêm để ược các TabPage
Đi u khi n ề ể TabPage có nhi u đi m gi ng v i đi u khi n ề ể ố ớ ề ể Panel. TabPage cũng
h tr thanh trỗ ợ ượt khi c n n u nh thu c tính ầ ế ư ộ AutoScroll được thi t l p làế ậ True, có thu c tính ộ BorderStyle đ thi t l p để ế ậ ường vi n quanh ề TabPage v i 3ớ giá tr : ị None, FixedSingle, Fixed3D. Tuy nhiên có đi m khác bi t v i ề ệ ớ Panel là TabPage h tr thu c tính ỗ ợ ộ Text, chu i mô t đỗ ả ược thi t l p trong thu c tínhế ậ ộ Text s hi n th trên tab c a ẽ ể ị ủ TabPage:
Hình 18.9. Màn hình hi n th các TabPage trên giao di nể ị ệ B ng 18.4. B ng mô t các thu c tính c a TabControlả ả ả ộ ủ
Thu c tínhộ Mô tả
Appearance Thu c tính ch đ nh TabPage s hi n th hình d ng nào.ộ ỉ ị ẽ ể ị ở ạ Có 3 giá tr : ị Normal, Button FlatButtons.
Alignment
Thu c tính xác đ nh các tab s hi n th trên, dộ ị ẽ ể ị ở ưới, trái hay ph i c a ả ủ TabControl. G m các giá tr :ồ ị
Multiline
Mang hai giá tr True ho c False.ị ặ
N u là True: Cho phép hi n th nhi u dòngnđ ch a cácế ể ị ề ể ứ tab n u s lế ố ượng các tab vượt ngoài ph m vi kích thạ ước c a ủ TabControl.
N u là False: Ch cho phép tab hi n th trên m t dòngế ỉ ể ị ộ TabPages Ch a t p các các ứ ậ TabPage có trong TabControl
TabCount Tr v s lả ề ố ượng TabPage mà TabControl có SelectedTab Tr v đi u khi n ả ề ề ể TabPage được ch nọ SelectedIndex Tr v v trí c a ả ề ị ủ TabPage được ch nọ
Ví d : Vi t chụ ế ương trình qu n lý nhân s nh hình 18.9 và 18.10. Chả ự ư ương trình
g m 2 ồ TagPage: TagPage Qu n lý nhân viên và ả TagPage Qu n lý giáo viên.ả
TagPage qu n lý nhân viên: Cho phép thêm, s a và xóa nhân viên. Thôngả ử tinh nhân viên c n qu n lý bao g m: H tên nhân viên, ch c v c a nhân viên,ầ ả ồ ọ ứ ụ ủ h s lệ ố ương và lương c b n.ơ ả
TagPage Qu n lý giáo viên: Cho phép thêm s a xóa giáo viên. Thông tinả ử giáo
viên c n qu n lý g m: H tên giáo viên, ch c v c a giáo viên, ti n gi ngầ ả ồ ọ ứ ụ ủ ề ả m tộ
ti t, s ti t d y và h c v c a giáo viên. ế ố ế ạ ọ ị ủ
Hình 18.10. Màn hình Tab Qu n lý nhân viênả
Hình 18.11. Màn hình Tab Qu n lý nhân viênả S ki n ự ệ Click c a btnCapNhatNV: ủ
S ki n ự ệ Click c a btnThemNV: ủ
S ki n ự ệ Click c a btnXoaNV: ủ
S ki n ự ệ SelectedIndexChanged c a listNhanVien: ủ
Câu h i ôn t p và bài t pỏ ậ ậ
1. Thi t k chế ế ương trình t o Button có giao di n nh sau:ạ ệ ư
Hình 18.12. Form t đ ng phát sinh các nútự ộ Yêu c u:ầ
Khi nh n F5 ch y chấ ạ ương trình xu t hi n giao di n nh yêu c u.ấ ệ ệ ư ầ
Người dùng nh p t ng s Button c n phát sinh trong TextBox txtTongNut;ậ ổ ố ầ nh pậ
s Button mu n phát sinh trên m t hàng trong TextBox txtNutHang. Giao di nố ố ộ ệ hi n th nh sauể ị ư
Hình 18.13. Màn hình k t qu khi nh p d li uế ả ậ ữ ệ
Khi người dùng nh n vào m t nút nh n xu t thông báo “B n v a nh n nút:ấ ộ ấ ấ ạ ừ ấ _” . Riêng nút s 10 khi ngố ười dùng nh n s xu t thông báo “Chúc m ngấ ẽ ấ ừ b n đã trúng 01 t USD” ạ ỉ
Hình 18.14. Màn hình thông báo