Bài giảng Lập trình trên môi trường Windows - Chương 3: Điều khiển trên Form (Windows Controls) - Dương Thành Phết

Chương 3: ĐIỀU KHIỂN TRÊN FORM (WINDOWS CONTROLS) 1  Giảng Viên: ThS. Dương Thành Phết  Email: phetcm@gmail.com  Facebook: DuongThanhPhet  Website:  Tel: 0918158670 LẬP TRÌNH TRÊN MÔI TRƯỜNG WINDOWS KHOA CÔNG NGHỆ THÔNG TIN NỘI DUNG Thiết kế Layout trên Form 2 Các control trên Form 3 Mouse Event & Keyboard Event 4 2 Tổng quan về Controls 1 3 1.TỔNG QUAN VỀ CONTROLS 1.1. Giới thiệu:  Control là một thành phần cơ bản trên form  Có các thành phần  Thuộc tính  Phương thức  Sự kiện  Tất cả các control chứa trong namespace: System.Windows.Forms 1.2. Thuộc tính controls Properties Description BackColor Màu nền của control BackgroundImage Ảnh nền của control ForeColor Màu hiển thị text trên form Enable Thiết lập trạng thái truy cập của control Focus Chuyển focus vào control Font Font hiển thị text trên control TabIndex Thứ tự tab của control TabStop Sử dụng tab để select control Text Text hiển thị trên control TextAlign Canh lề text trên control Visible Xác định hiển thị control Size Kích thước của control 4 1.TỔNG QUAN CONTROLS 5 2. THIẾT KẾ LAYOUT TRÊN FORM 2.1 Control layout - anchor 2.2. Control layout - docking 6 2.1 CONTROL LAYOUT - ANCHOR None FixedSingle Fixed3D FixedDialog Sizable FormBorderStyle 7  Khi FormBorderStyle = Sizable cho phép thay đổi kích thước khi thực thi  Sử dụng thuộc tính Anchor: Cho phép control phản ứng lại với thao tác resize của form  Control có thể thay đổi vị trí tương ứng với việc resize của form  Control cố định không thay đổi theo việc resize của form  Các trạng thái neo: Left(Cố định theo biên trái); Right; Top; Bottom. 2.1 CONTROL LAYOUT - ANCHOR 8 Button được neo biên trái Button tự do Vị trí tương đối với biên trái không đổi Di chuyển tương ứng theo kích thước mới 2.1 CONTROL LAYOUT - ANCHOR 9  Thiết lập Anchor cho control Chọn các biên để neo Biên được chọn neo, màu đậm 2.1 CONTROL LAYOUT - ANCHOR 10 Neo theo bốn phía 2.1 CONTROL LAYOUT - ANCHOR 11 2.2 CONTROL LAYOUT - DOCKING  Các control có thể gắn (dock) với một cạnh nào đó của form, hoặc container của control. Windows Explorer TreeView gắn bên trái ListView gắn bên phải 12 Left Right Bottom None Fill Top 2.2. CONTROL LAYOUT - DOCKING 13 TextBox Dock = None Dock = Top Dock = Fill TextBox.Multiline = True Dock = Bottom 2.2. CONTROL LAYOUT - DOCKING 14 3. CÁC CONTROL TRÊN FORM 3.1.Label 3.2.Textbox 3.3.Button 3.4.Listbox 3.5.Combobox 3.6.List view 3.9. Tabcontrol 3.8.Panel 3.7.Groupbox 3.10.Checkbox 3.24. Multimedia 3.23. Tooltip 3.22. Progressbar 3.21. Timer 3.20. Richtextbox 3.19. Monthcalendar 3.18. Datetimepicker 3.17. Domainupdown 3.16. Numericupdown 3.14. Picturebox 3.12. Checkedlistbox 3.11.Radiobutton 3.15. Imagelist 3.13. Trackbar 15 3.1 LABEL  Chức năng:  Cung cấp chuỗi thông tin chỉ dẫn  Chỉ đọc Label Thuộc tính thường dùng Font Font hiển thị của text Text Nội dung text hiển thị TextAlign Canh lề text ForeColor Màu text Visible Trạng thái hiển thị 3.2 TEXTBOX 16  Chức năng:  Vùng cho phép user nhập dữ liệu  Cho phép nhập dạng Password TextBox Thuộc tính thường dùng AcceptsReturn Enter tạo thành dòng mới trong chế độ multiline Multiline Textbox ở chế độ nhiều dòng, mặc định là false PasswordChar Chỉ hiển thị ký tự đại diện cho text ReadOnly Chế độ chỉ đọc không cho phép nhập liệu ScrollBars Thanh cuộn cho chế độ multiline Event thường dùng TextChanged Kích hoạt khi text bị thay đổi 17  Ví dụ Chuyển thành chữ hoa Double click vào textbox để tạo event handler cho event TextChanged 3.2. TEXTBOX textBox1.Text = textBox1.Text.ToUpper(); 18 Sự kiện KeyPress Sự kiện phát sinh khi textbox nhận focus và user nhấn 1 phím  Ví dụ 3.2. TEXTBOX 19 3.3. BUTTON  Chức năng:  Cho phép cài đặt 1 hành động Button Thuộc tính thường dùng Text Chuỗi hiển thị trên button Event thường dùng Click Kích hoạt khi user kích vào button 20 3.4. LISTBOX  Chức năng:  Cung cấp một danh sách các item cho phép chọn  ListBox cho hiển thị scroll nếu các item vượt quá vùng thể hiện của ListBox ListBox Thuộc tính thường dùng MultiColumn Cho phép nhiều cột SelectedIndex Chỉ số mục được chọn SelectedItem Giá trị của mục được chọn SelectedItems Tập các mục đang được chọn trong List Box Sorted Cho phép các mục luôn luôn được sắp xếp Selecttion mode Qui định số mục được chọn trong listbox Items.Count Tổng số mục trong Listbox SelectedItems.Count Tổng số mục được chọn trong Listbox 21 3.4. LISTBOX ListBox Method thức thường dùng ClearSelected Bỏ tất cả các mục chọn Clear Xóa tất cả các mục trong Listbox Items.Add(“Chuỗi”) Thêm 1 mục vào listbox Items.Insert(i,”chuỗi”) Chèn thêm mục vào vị trí i Items.Remove(“Chuỗi”) Xóa mục khỏi listbox Items.RemoveAt(i) Xóa mục tại chỉ số i khỏi Listbox Items.Remove(lst.Selecte dItem); Xóa mục được chọn Even thường dùng SelectedIndexChanged Chỉ số của Mục được chọn bị thay đổi SelectedValueChanged Giá trị của Mục được chọn bị thay đổi 22  Thuộc tính Items cho phép thêm item vào ListBox Danh sách item Cho phép thêm item trong màn hình thiết kế form 3.4. LISTBOX 23  ListBox hiển thị dạng Multi Column Hiển thị nhiều cột 3.4. LISTBOX 24 Ví dụ: Kiểm tra xem chuỗi nhập có trong list box? - Nếu có: Chọn item đó - Ngược lại: Thêm chuỗi mới vào list box 3.4. LISTBOX 25  Sự kiện SelectedIndexChanged SelectedIndexChanged Mỗi khi kích chọn vào item trong listbox  sẽ xóa item được chọn tương ứng 3.4. LISTBOX 26  Chức năng:  Kết hợp TextBox với 1 danh sách dạng drop down  Cho phép click 3.5. COMBOBOX-DROPDOWNLIST ComboBox Thuộc tính thường dùng Items Tập hợp các mục DropDownStyle Kiểu DropdownList Text Chuỗi mặc định đầu tiên DropDownHeight Chiều cao Sorted Luôn được sắp xếp AutoCompleteMode Tự động hoàn tất  Ghi chú: Các phương thức và sự kiện tương tự như Listbox 27  DropDownStyle 3.5. COMBOBOX 28 Bổ sung item trong màn hình design view 3.5. COMBOBOX 29 Mỗi khi kích chọn một item  hiển thị item được chọn trên MessageBox 3.5 COMBOBOX Sự kiện SelectedIndexchanged: Xảy ra mỗi khi click chọn item 30  Tính năng AutoComplete Gõ “Ng” AutoCompleteMode AutoCompleteSource AutoComplete 3.5. COMBOBOX 31 3.6. LIST VIEW  Chức năng: Dạng control phổ biến hiện thị một danh sách item  Các item có thể có các item con gọi là subitem  Có thể hiển thị thông tin theo nhiều dạng thông qua thuộc tính View (như windows explorer) • Xem dạng chi tiết thông tin • Xem dạng icon nhỏ • Xem dạng icon lớn • Xem dạng tóm tắt • 32 3.6. LIST VIEW ListView Thuộc tính thường dùng View Các hình thức trình bày/hiển thị SmallImageList Hình nhỏ LargeImageList Hình lớn FullRowSelect Cho phép chọn cả dòng MultiSelect Cho phép chọn nhiều Items Tập hợp các mục trong Listview Columns Chia cột Sorting Cho phép sắp xếp GridLines Tạo lưới (view=Detail) 33  Các dạng thể hiện của ListView 3.6. LIST VIEW Large Icons: Mỗi item xuất hiện với 1 icon kích thước lớn và một label bên dưới Small Icons: Mỗi item xuất hiện với icon nhỏ và một label bên phải 34  Các dạng thể hiện của ListView 3.6. LIST VIEW List: Mỗi item xuất hiện với icon nhỏ với label bên phải, item được sắp theo cột nhưng không có tiêu đề cột Title: Mỗi item xuất hiện với icon kích thước lớn, bên phải có label chứa item và subitem 35 Detail: Mỗi item xuất hiện trên một dòng, mỗi dòng có các cột chứa thông tin chi tiết 3.6. LIST VIEW  Các dạng thể hiện của ListView 36  Tạo các cột cho ListView – Details qua  Cửa sổ properties  Columns để tạo.  Sử dụng code trong chương trình. ColumnHeader columnHeader1 = new ColumnHeader(); ColumnHeader columnHeader2 = new ColumnHeader(); ColumnHeader columnHeader3 = new ColumnHeader(); columnHeader1.Text = "Name"; columnHeader2.Text = "Address"; columnHeader3.Text = "Telephone Number"; listView1.Columns.Add(columnHeader1); listView1.Columns.Add(columnHeader2); listView1.Columns.Add(columnHeader3); 3.6. LIST VIEW 37 Dialog soạn thảo cột 3.6. LIST VIEW 38  Thêm các item vào ListView  Thêm item trong màn hình thiết kế form  Thêm item thông qua code  Các lớp định nghĩa Item  System.Windows.Forms.ListViewItem  Mỗi item trong ListView có các item phụ gọi là subitem • Lớp ListViewItem.ListViewSubItem định nghĩa các subitem của ListView • Lớp ListViewSubItem là inner class của ListViewItem ColumnHeader1 ColumnHeader2 ColumnHeader3 Subitem[0] Subitem[1] Subitem[2] item 1 3.6. LIST VIEW 39 Minh họa thêm item dùng code ListViewItem item1 = new ListViewItem(); ListViewItem.ListViewSubItem subitem1; subitem1 = new ListViewItem.ListViewSubItem(); item1.Text = "Hutech"; subitem1.Text = "144/24 DBP - F.25 - Q.BT"; item1.SubItems.Add(subitem1); listView1.Items.Add(item1); Thêm subitem vào item Thêm item vào danh sách items của ListView 3.6. LIST VIEW 40  Sự kiện SelectedIndexChanged 3.6. LIST VIEW 41 3.7. GROUPBOX  Chức năng:  Hiển thị một khung bao quanh một nhóm control  Có thể hiển thị một tiêu đề: Thuộc tính Text  Khi xóa một GroupBox thì các control chứa trong nó bị xóa theo Thuộc tính thường dùng Controls Danh sách control chứa trong GroupBox. Text Caption của GroupBox 42 groupBox1 chứa 2 control textBox1 và button1 textBox2 và button2 chứa trong Controls của Form 3.7. GROUPBOX 43 3.8. PANEL  Chức năng  Chứa nhóm các control  Không có caption  Có thanh cuộn (scrollbar) • Xem nhiều control khi kích thước panel giới hạn Thuộc tính thường dùng AutoScroll Xuất hiện khi panel quá nhỏ để hiển thị hết các control, mặc định là false BorderStyle Biên của panel, mặc định là None, các tham số khác như Fixed3D, FixedSingle Controls Danh sách control chứa trong panel 44 scroll 3.8. PANEL 45 - Dạng container chứa các control khác - Cho phép thể hiện nhiều page trên một form - Mỗi page chứa các control như group control.  Mỗi page có tag chứa tên của page  Click vào các tag để chuyển qua lại giữa các page - Ý nghĩa:  Cho phép thể hiện nhiều control trên một form  Các control có cùng nhóm chức năng sẽ được tổ chức trong một tab (page) 3.9. TABCONTROL  Chức năng: 46  TabControl có thuộc tính TabPages, Chứa các đối tượng TabPage TabControl TabPage TabPage 3.9. TABCONTROL 47 Buttons  Thuộc tính Appearance Normal FlatButton 3.9. TABCONTROL 48  Thuộc tính, phương thức & sự kiện thường dùng 3.9. TABCONTROL TabControl Thuộc tính thường dùng TabPages Tập hợp các trang TabCount SelectedTab Multiline SelectedIndex Method thường dùng SelectTab DeselectTab Event thường dùng SelectedIndexChanged 49  Thêm/Xóa TabPage Click chuột phải Thêm/Xóa TabPage 3.9. TABCONTROL 50  Chỉnh sửa các TabPage  Chọn thuộc tính TabPages của TabControl  Sử dụng màn hình TabPage Collection Editor để chỉnh sửa 3.9. TABCONTROL 51  Bổ sung Control vào TabControl  Chọn TabPage cần thêm control  Kéo control từ ToolBox thả vào TabPage đã chọn Chọn TabPage cần thêm 3.9. TABCONTROL 52  Sử dụng code để thêm các TabPage vào TabControl private void AddTabControl() { TabControl tabControl1 = new TabControl(); TabPage tabPageGeneral = new TabPage("General"); TabPage tabPageView = new TabPage("View"); tabControl1.TabPages.Add(tabPageGeneral); tabControl1.TabPages.Add(tabPageView); tabControl1.Location = new Point(20, 20); this.Controls.Add(tabControl1); } 3.9. TABCONTROL 53 3.10. CHECKBOX  Chức năng: Control đưa ra một giá trị cho trước và user có thể  Chọn giá trị khi Checked = true  Không chọn giá trị: Checked = false Thuộc tính thường dùng Appearance Text Nhãn cạnh Checkbox ThreeState Thiết lập 1 trong 3 trạng thái Checked Trạng thài được chọn Event thường dùng CheckedChanged Khi thay đổi chọn, không chọn 54 ThreeState = true : cho phép thiết lập 3 trạng thái:  Checkstate = Indeterminate: không xác định  CheckState= Checked: chọn  CheckState= Unchecked: không chọn Chưa chọn 3.10. CHECKBOX 55 3.11. RADIOBUTTON  Chức năng:  Cho phép chỉ chọn 1 trong 1 nhóm option  Khi chọn 1 option thì tự động option được chọn trước sẽ uncheck  Các radio button chứa trong 1 container (form, GroupBox, Panel, TabControl) thuộc một nhóm. Thuộc tính thường dùng Appearance Checked Text Event thường dùng CheckedChanged 56 Nhóm RadioButton thứ 2 chứa trong GroupBox2 Nhóm RadioButton thứ 1 chứa trong GroupBox1 3.11. RADIOBUTTON 57 3.12. CHECKEDLISTBOX  Chức năng: Tương tự như list box nhưng mỗi item sẽ có thêm check box. Thuộc tính thường dùng CheckedItems CheckedIndices SelectedIndices MultiColumn SelectionMode Items Method thường dùng ClearSelected SetSelected Event thường dùng SelectedIndexChanged SelectedValueChanged 58  Thuộc tính Items lưu trữ danh sách item  Có thể bổ sung vào thời điểm  Design  Run time Item được check Item được select 3.12. CHECKEDLISTBOX 59  MultiColumn = true Các item được tổ chức theo nhiều cột 3.12. CHECKEDLISTBOX 60  Sự kiện SelectedIndexChanged 3.12. CHECKEDLISTBOX 61 3.13. TRACKBAR  Chức năng:  Cho phép thiết lập giá trị trong khoảng cố định cho trước  Thao tác qua thiết bị chuột hoặc bàn phím Thuộc tính thường dùng Minimum Maximum TickFrequency TickStyle Value Method thường dùng SetRange Event thường dùng ValueChanged Scroll 62 public void AddTrackBar() { TrackBar tb1 = new TrackBar(); tb1.Location = new Point(10, 10); tb1.Size = new Size(250, 50); tb1.Minimum = 0; tb1.Maximum = 100; tb1.SmallChange = 1; tb1.LargeChange = 5; tb1.TickStyle = TickStyle.BottomRight; tb1.TickFrequency = 10; tb1.Value = 10; Controls.Add(tb1); } Tạo thể hiện Thiết lập khoảng: 0 - 100 Số vị trí di chuyển khi dùng phím mũi tên Số vị trí di chuyển khi dùng phím Page Kiểu stick ở bên dưới/bên phải track Số khoảng cách giữa các tick mark 3.13. TRACKBAR 63  Bổ sung Label hiển thị giá trị của TrackBar 3.13. TRACKBAR 64 3.14. PICTUREBOX  Chức năng: Sử dụng để hiển thị ảnh dạng bitmap, metafile, icon, Jpeg, Gif. Sử dụng thuộc tính Image để thiết lập ảnh lúc design hoặc runtime. Các thuộc tính • Image: ảnh cần hiển thị • SizeMode: Normal; StretchImage; AutoSize; CenterImage; Zoom 5 pictureBox với các SizeMode tương ứng 65 3.15. IMAGELIST  Chức năng: Cung cấp tập hợp những đối tượng image cho các control khác sử dụng • ListView • TreeView Các thuộc tính thường dùng • ColorDepth: Độ sâu của màu • Images: Trả về ImageList.ImageCollection • ImageSize: Kích thước ảnh • TransparentColor: Xác định màu là transparent 66  Các bước sử dụng ImageList  Kéo control ImageList từ ToolBox vào Form  Thiết lập kích thước của các ảnh: ImageSize  Bổ sung các ảnh vào ImageList qua thuộc tính Images  Sử dụng ImageList cho các control • Khai báo nguồn image là image list vừa tạo cho control (Thường là thuộc tính ImageList) • Thiết lập các item/node với các ImageIndex tương ứng (Việc thiết lập có thể ở màn hình design view hoặc code view) 3.15. IMAGELIST 67  Tạo ImageList 3.15. IMAGELIST 68  Sử dụng ImageList trong ListView Hiển thị dạng small icon Khai báo ImageList cho ListView listView1 3.15. IMAGELIST 69  Thêm Item Khai báo image cho item qua ImageIndex 3.15. IMAGELIST 70  Demo Mỗi item sẽ có ảnh theo đúng thứ tự ImageIndex được khai báo trong ImageList 3.15. IMAGELIST 71 3.16. NUMERICUPDOWN  Chức năng: Cho phép chọn các giá trị trong khoảng xác định thông qua: Nút up & down hoặc Nhập trực tiếp giá trị  Các thuộc tính: Minimum Maximum Value  Increment  Sự kiện: ValueChanged  Phương thức: DownButton UpButton 72  Đoạn code thêm control NumericUpDown public void AddNumericUpDown() { NumericUpDown numUpDn = new NumericUpDown(); numUpDn.Location = new Point(50, 50); numUpDn.Size = new Size(100, 25); numUpDn.Hexadecimal = true; // hiển thị dạng hexa numUpDn.Minimum = 0; // giá trị nhỏ nhất numUpDn.Maximum = 255; // giá trị lớn nhất numUpDn.Value = 0xFF; // giá trị khởi tạo numUpDn.Increment = 1; // bước tăng/giảm Controls.Add(numUpDn); // thêm control vào ds control của form } 3.16. NUMERICUPDOWN 73  Demo Nhập trực tiếp giá trị Tăng giảm giá trị Hiển thị giá trị Hexa 3.16. NUMERICUPDOWN 74 3.17. DOMAINUPDOWN  Chức năng:  Cho chọn item trong số danh sách item thông qua: Button Up & Down hoặc Nhập từ bàn phím  Properties  Items: danh sách item  ReadOnly: Chỉ cho phép thay đổi giá trị qua Up & Down  SelectedIndex: chỉ mục của item đang chọn  SelectedItem: item đang được chọn  Sorted: sắp danh sách item  Text: text đang hiển thị trên DomainUpDown.  Event  SelectedItemChanged 75  Nhập item cho DomainUpDown String Collection Editor Cho phép nhập item 3.17. DOMAINUPDOWN 76 3.18. DATETIMEPICKER  Chức năng:  Cho phép chọn ngày trong khoảng xác định thông qua giao diện đồ họa dạng calendar  Kết hợp ComboBox và MonthCalendar  Thuộc tính:  Format: Định dạng hiển thị (long, short,...)  CustomFormat: • dd: Hiển thị 2 con số của ngày • MM: Hiển thị 2 con số của tháng •  MaxDate: Giá trị ngày lớn nhất  MinDate: Giá trị ngày nhỏ nhất  Value: Giá trị ngày hiện tại đang chọn 77 private void AddDateTimePicker() { DateTimePicker DTPicker = new DateTimePicker(); DTPicker.Location = new Point(40, 80); DTPicker.Size = new Size(160, 20); DTPicker.DropDownAlign = LeftRightAlignment.Right; DTPicker.Value = DateTime.Now; DTPicker.Format = DateTimePickerFormat.Custom; DTPicker.CustomFormat = "'Ngày' dd 'tháng' MM 'năm' yyyy"; this.Controls.Add(DTPicker); } 3.18. DATETIMEPICKER 78  Demo Kích drop down để hiện thị hộp chọn ngày Chọn ngày trong khoảng cho trước Định dạng xuất: 'Ngày' dd 'tháng' MM 'năm' yyyy 3.18. DATETIMEPICKER 79 3.19. MONTHCALENDAR  Chức năng: Cho phép chọn một ngày trong tháng hoặc nhiều ngày với ngày bắt đầu và ngày kết thúc.  Thuộc tính:  MaxDate, MinDate  SelectionStart: Ngày bắt đầu chọn  SelectionEnd: Ngày kết thúc Sinh viên tự tìm hiểu thêm 80 3.20. RICHTEXTBOX  Chức năng:  Mở rộng từ TextBox, có thể hiển thị text dạng rich text format (RTF)  Các text có thể có các font chữ và màu sắc khác nhau.  Đoạn text có thể được canh lề, có thể chứa các ảnh  Ứng dụng WordPad là dạng RichTextBox Sinh viên tự tìm hiểu thêm 81 3.21. TIMER  Chức năng:  Bộ định thời gian, thiết lập một khoảng thời gian xác định (interval) và khi hết khoảng thời gian đó Timer sẽ phát sinh sự kiện tick. Thuộc tính thường dùng Enabled Interval Method thường dùng Start Stop Event thường dùng Tick 82  Hiển thị giờ hệ thống Enable sự kiện Tick Khoảng thời gian chờ giữa 2 lần gọi Tick Hiển thị thời gian 3.21. TIMER 83  Sự kiện Tick Khai báo trình xử lý sự kiện Tick 3.21. TIMER 84  Demo Mỗi giây sự kiện Tick phát sinh. Trình xử lý của Tick sẽ lấy giờ hệ thống và hiển thị lên Label 3.21. TIMER 85 3.22. PROGRESSBAR  Chức năng: Hiển thị tiến độ thực hiện của một công việc nào đó  Các thuộc tính:  Minimum: Giá trị nhỏ nhất  Maximum: Giá trị lớn nhất