Bài giảng Công nghệ .NET - Chương IV: Window form

171 trang hapham 930

Download

Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Công nghệ .NET - Chương IV: Window form", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

bai_giang_cong_nghe_net_chuong_iv_window_form.ppt

Nội dung text: Bài giảng Công nghệ .NET - Chương IV: Window form

Bài giảng CÔNG NGHỆ . NET Thời lượng : 60 LT + 30 TH GV : ĐẶNG VĂN ĐÀNG 1
CÔNG NGHỆ . NET Chương IV WINDOW FORM 2
Nội Dung ◼ Tổng quan controls ◼ Property & layout của control ❑ Anchor ❑ Docking ◼ Các control thông dụng ❑ Label, textbox, button ❑ ListBox, Combobox, listView ❑ GroupBox, Panel & TabControl ❑ CheckBox, RadioButton, CheckedListBox, TrackBar ❑ PictureBox, ImageList ❑ NumericUpDown, DomainUpDown ❑ RichTextBox, DateTimePicker, MonthCalendar ❑ Advanced controls ❑ Common Dialog & Custom Control ◼ Mouse Event handling ◼ Keyboard event handling 3
Chương IV . WINDOW FORM Tổng quan controls ◼ 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 4
Chương IV . WINDOW FORM Tổng quan controls ◼ Một số thuộc tính của control ❑ Text: mô tả text xuất hiện trên control ❑ Focus: phương thức chuyển focus vào control ❑ TabIndex: thứ tự của control nhận focus ◼ Mặc định được VS.NET thiết lập ❑ Enable: thiết lập trạng thái truy cập của control ❑ Visible: ẩn control trên form, có thể dùng phương thức Hide ❑ Anchor: ◼ Neo giữ control ở vị trí xác định ◼ Cho phép control di chuyển theo vị trí ❑ Size: xác nhận kích thước của control 5
Chương IV . WINDOW FORM Thuộc tính controls Common 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 Enabled Xác định khi control trạng thái enable Focused Xác định khi control nhận focus Font Font hiển thị text trên control TabIndex Thứ tự tab của control TabStop Nếu true, user có thể sử dụng tab để select control Text Text hiển thị trên form TextAlign Canh lề text trên control Visible Xác định hiển thị control 6
Chương IV . WINDOW FORM Control Layout - Anchor None Sizable FormBorderStyle Fixed3D FixedDialog FixedSingle 7
Chương IV . WINDOW FORM Control Layout - Anchor ◼ Khi FormBorderStyle = Sizable, form cho phép thay đổi kích thước khi Runtime ❑ Sự bố trí của control cũng thay đổi! ◼ 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: cố định theo biên phải ◼ Top: cố định theo biên trên ◼ Bottom: cố định theo biên dưới 8
Chương IV . WINDOW FORM Control Layout - Anchor Button được neo biên trái Vị trí tương đối với biên trái không đổi Button tự do Di chuyển tương ứng theo kích thước mới 9
Chương IV . WINDOW FORM Control Layout - Anchor ◼ Thiết lập Anchor cho control Chọn các biên để neo Biên được chọn neo, màu đậm 10
Chương IV . WINDOW FORM Control Layout - Anchor Neo theo bốn phía 11
Chương IV . WINDOW FORM 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 ListView gắn bên phải TreeView gắn bên trái 12
Chương IV . WINDOW FORM Control Layout - Docking Top Left Fill Right Bottom None 13
Chương IV . WINDOW FORM Control Layout - Docking Dock = None Dock = Top TextBox Dock = Fill TextBox.Multiline = True Dock = Bottom 14
Chương IV . WINDOW FORM Label, TextBox, Button 15
Chương IV . WINDOW FORM Label, TextBox, Button ◼ Label ❑ Cung cấp chuỗi thông tin chỉ dẫn ◼ Chỉ đọc ◼ Được định nghĩa bởi lớp Label ❑ Dẫn xuất từ Control ◼ TextBox ❑ Thuộc lớp TextBox ❑ Vùng cho phép user nhập dữ liệu ◼ Cho phép nhập dạng Password ◼ Button ❑ cho phép cài đặt 1 hành động. ◼ Checkbox và RadioButton 16 ❑ Dẫn xuất từ ButtonBase
Chương IV . WINDOW FORM Label, TextBox, Button 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ị 17
Chương IV . WINDOW FORM Label, TextBox, Button TextBox Thuộc tính thường dùng AcceptsReturn Nếu true: nhấn enter tạo thành dòng mới trong chế độ multiline Multiline Nếu true: textbox ở chế độ nhiều dòng, mặc định là false PasswordChar Chỉ hiển thị ký tự đại diện cho text ReadOnly Nếu true: textbox hiển thị nền xám, và ko cho phép nhập liệu, mặc định là false ScrollBars Thanh cuộn cho chế độ multiline Event thường dùng TextChanged Kích hoạt khi text bị thay đổi, trình xử lý được khởi tạo mặc định khi kích đúp vào 18 textbox trong màn hình design view
Chương IV . WINDOW FORM Label, TextBox, Button Button Thuộc tính thường dùng Text Chuỗi hiển thị trên bề mặt button Event thường dùng Click Kích hoạt khi user kích vào button, khai báo mặc định khi người lập trình kích đúp vào button trong màn hình Design View của Form. 19
Chương IV . WINDOW FORM Label, TextBox, Button ◼ Demo TextBox Double click vào Chuyển thành chữ hoa textbox để tạo event handler cho event TextChanged 20
Chương IV . WINDOW FORM Label, TextBox, Button ◼ Chỉ cho nhập số Sự kiện phát sinh khi textbox nhận focus và Sự kiện KeyPress user nhấn 1 phím 21
Chương IV . WINDOW FORM ListBox & ComboBox 22
Chương IV . WINDOW FORM ListBox & ComboBox ◼ ListBox ❑ Cung cấp một danh sách các item cho phép user chọn ❑ ListBox cho phép hiển thị scroll nếu các item vượt quá vùng thể hiện của ListBox Properties Items SelectedItems MultiColumn ListBox Sorted SelectedIndex Text SelectedItem 23
Chương IV . WINDOW FORM ListBox & ComboBox ◼ Method & Event Method ClearSelected ListBox GetSelected SetSelected Event FindString SelectedIndexChanged SelectedValueChanged 24
Chương IV . WINDOW FORM ListBox & ComboBox ◼ Thuộc tính Items cho phép thêm item vào ListBox Cho phép thêm item Danh sách item trong màn hình thiết kế form 25
Chương IV . WINDOW FORM ListBox & ComboBox ◼ ListBox hiển thị dạng Multi Column Hiển thị nhiều cột 26
Chương IV . WINDOW FORM ListBox & ComboBox ◼ Demo ListBox Kiểm tra xem chuỗi nhập có trong list box? - Nếu có: select item đó - Ngược lại: thêm chuỗi mới vào list box 27
Chương IV . WINDOW FORM ListBox & ComboBox ◼ Sự kiện SelectedIndexChanged Mỗi khi kích chọn vào item trong listbox sẽ xóa item được chọn tương ứng SelectedIndexChanged 28
Chương IV . WINDOW FORM ListBox & ComboBox ◼ ComboBox ❑ Kết hợp TextBox với một danh sách dạng drop down ❑ Cho phép user kích chọn item trong danh sách drop down Items Sorted DropDownStyle ComboBox MaxDropDownItems Text AutoCompleteMode DropDownHeight 29
Chương IV . WINDOW FORM ListBox & ComboBox ◼ DropDownStyle 30
Chương IV . WINDOW FORM ListBox & ComboBox Bổ sung item trong màn hình design 31 view
Chương IV . WINDOW FORM ListBox & ComboBox Mỗi khi kích chọn một item hiển thị item được chọn trên MessageBox 32
Chương IV . WINDOW FORM ListBox & ComboBox AutoComplete Gõ “Ng” ◼ Tính năng AutoComplete AutoCompleteMode AutoCompleteSource 33
Chương IV . WINDOW FORM ListView 34
Chương IV . WINDOW FORM List View ◼ 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 ◼ Windows Explorer hiển thị thông tin thư mục, tập tin ❑ Có thể hiển thị thông tin nhiều dạng qua thuộc tính View ◼ 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 ◼ ◼ Lớp ListView dẫn từ System.Windows.Forms.Control 35
Chương IV . WINDOW FORM List View ◼ Properties GridLines Sorting SmallImageList Columns LargeImageList Items MultiSelect FullRowSelect 36
Chương IV . WINDOW FORM List View ◼ Các dạng thể hiện của ListView Details Small Icons List Large Icons Tile 37
Chương IV . WINDOW FORM 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 38
Chương IV . WINDOW FORM List View Small Icons Mỗi item xuất hiện với icon nhỏ và một label bên phải 39
Chương IV . WINDOW FORM 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 40
Chương IV . WINDOW FORM List View Tile 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 41
Chương IV . WINDOW FORM List View 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 42
Chương IV . WINDOW FORM List View ◼ 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); 43
Chương IV . WINDOW FORM List View Dialog soạn thảo cột 44
Chương IV . WINDOW FORM List View ◼ 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 item 1 45 Subitem[0] Subitem[1] Subitem[2]
Chương IV . WINDOW FORM ListView ◼ Minh họa thêm item qua code ListViewItem item1 = new ListViewItem(); ListViewItem.ListViewSubItem subitem1; subitem1 = new ListViewItem.ListViewSubItem(); item1.Text = “MKU"; subitem1.Text = “Phu quoi- long ho – Vinh long"; item1.SubItems.Add(subitem1); Thêm subitem vào item listView1.Items.Add(item1); Thêm item vào danh sách items của ListView 46
Chương IV . WINDOW FORM ListView ◼ Sự kiện SelectedIndexChanged 47
Chương IV . WINDOW FORM GroupBox, Panel & TabControl 48
Chương IV . WINDOW FORM GroupBox & Panel ◼ Bố trí controls trên GUI ◼ GroupBox ❑ 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 ❑ Lớp GroupBox kế thừa từ System.Windows.Forms.Control ◼ Panel ❑ Chứa nhóm các control ❑ Không có caption ❑ Có thanh cuộn (scrollbar) 49 ◼ Xem nhiều control khi kích thước panel giới hạn
Chương IV . WINDOW FORM GroupBox & Panel GroupBox Mô tả Thuộc tính thường dùng Controls Danh sách control chứa trong GroupBox. Text Caption của GroupBox Panel 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 50
Chương IV . WINDOW FORM GroupBox & Panel ◼ Minh họa GroupBox groupBox1 chứa 2 control textBox1 và button1 textBox2 và button2 chứa trong Controls của Form 51
Chương IV . WINDOW FORM GroupBox & Panel ◼ Minh họa Panel scroll 52
Chương IV . WINDOW FORM TabControl ◼ Dạng container chứa các control khác ◼ Cho phép thể hiện nhiều page trên một form duy nhất ◼ Mỗi page chứa các control tương tự như group control khác. ❑ Mỗi page có tag chứa tên của page ❑ Kích 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) 53
Chương IV . WINDOW FORM TabControl ◼ TabControl có thuộc tính TabPages ❑ Chứa các đối tượng TabPage TabPage TabControl TabPage 54
Chương IV . WINDOW FORM TabControl ◼ Thuộc tính Appearance Normal Buttons FlatButton 55
Chương IV . WINDOW FORM TabControl ◼ Thuộc tính, phương thức & sự kiện thường dùng Properties TabPages Method TabCount SelectTab SelectedTab DeselectTab Multiline Event SelectedIndex SelectedIndexChanged 56
Chương IV . WINDOW FORM TabControl ◼ Thêm/Xóa TabPage Kích chuột phải Thêm/Xóa TabPage 57
Chương IV . WINDOW FORM TabControl ◼ 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 58
Chương IV . WINDOW FORM TabControl ◼ 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 59
Chương IV . WINDOW FORM TabControl ◼ 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); } 60
Chương IV . WINDOW FORM CheckBox, CheckedListBox RadioButton & TrackBar 61
Chương IV . WINDOW FORM CheckBox ◼ 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 ◼ Lớp đại diện CheckBox Properties Appearance Checked CheckedChanged Text ThreeState 62
Chương IV . WINDOW FORM CheckBox ◼ 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 63
Chương IV . WINDOW FORM RadioButton ◼ Cho phép user chọn một option trong số nhóm option ◼ Khi user 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. ◼ Lớp đại diện: RadioButton ◼ Khác với nhóm CheckBox cho phép chọn nhiều option, còn RadioButton chỉ cho chọn một trong số các option. Appearance Checked CheckedChanged Text 64
Chương IV . WINDOW FORM RadioButton Nhóm RadioButton thứ 1 chứa trong GroupBox1 Nhóm RadioButton thứ 2 chứa trong GroupBox2 65
Chương IV . WINDOW FORM CheckedListBox ◼ Tương tự như list box nhưng mỗi item sẽ có thêm check box. Properties CheckedItems CheckedIndices SelectedIndexChanged SelectedIndices SelectedValueChanged SelectedIndices MultiColumn Method SelectionMode ClearSelected Items SetSelected 66
Chương IV . WINDOW FORM CheckedListBox ◼ Thuộc tính Items lưu trữ danh sách item ◼ Có thể bổ sung vào thời điểm ❑ Design time ❑ Run time Item được check Item được select 67
Chương IV . WINDOW FORM CheckedListBox ◼ MultiColumn = true Các item được tổ chức theo nhiều cột 68
Chương IV . WINDOW FORM CheckedListBox ◼ Sự kiện SelectedIndexChanged 69
Chương IV . WINDOW FORM TrackBar ◼ Cho phép user 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 Properties Minimum Maximum ValueChanged Scroll TickFrequency TickStyle Value SetRange 70
Chương IV . WINDOW FORM TrackBar public void AddTrackBar() { TrackBar tb1 = new TrackBar(); Tạo thể hiện tb1.Location = new Point(10, 10); tb1.Size = new Size(250, 50); tb1.Minimum = 0; Thiết lập khoảng: 0 - 100 tb1.Maximum = 100; Số vị trí di chuyển khi dùng tb1.SmallChange = 1; phím mũi tên tb1.LargeChange = 5; Số vị trí di chuyển tb1.TickStyle = TickStyle.BottomRight; khi dùng phím Page Kiểu stick ở bên tb1.TickFrequency = 10; dưới/bên phải track tb1.Value = 10; Controls.Add(tb1); Số khoảng cách giữa 71 } các tick mark
Chương IV . WINDOW FORM TrackBar ◼ Bổ sung Label hiển thị giá trị của TrackBar 72
Chương IV . WINDOW FORM PictureBox & ImageList 73
Chương IV . WINDOW FORM PictureBox ◼ 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 74
Chương IV . WINDOW FORM PictureBox 5 pictureBox với các SizeMode tương ứng 75
Chương IV . WINDOW FORM ImageList ◼ 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 76
Chương IV . WINDOW FORM ImageList ◼ Các bước sử dụng ImageList ❑ Kéo control ImageList từ ToolBox thả 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 77
Chương IV . WINDOW FORM ImageList ◼ Tạo ImageList 78
Chương IV . WINDOW FORM ImageList ◼ Sử dụng ImageList trong ListView listView1 Khai báo ImageList cho ListView Hiển thị dạng small icon 79
Chương IV . WINDOW FORM ImageList ◼ Thêm Item Khai báo image cho item qua 80 ImageIndex
Chương IV . WINDOW FORM ImageList ◼ Demo Mỗi item sẽ có ảnh theo đúng thứ tự ImageIndex được khai báo trong ImageList 81
Chương IV . WINDOW FORM NumericUpDown & DomainUpDown 82
Chương IV . WINDOW FORM NumericUpDown ◼ Cho phép user chọn các giá trị trong khoảng xác định thông qua ❑ Nút up & down ❑ 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 83 ❑ UpButton
Chương IV . WINDOW FORM NumericUpDown ◼ Đ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 } 84
Chương IV . WINDOW FORM NumericUpDown ◼ Demo Tăng giảm giá trị Hiển thị giá trị Hexa Nhập trực tiếp giá trị 85
Chương IV . WINDOW FORM DomainUpDown ◼ Cho phép user chọn item trong số danh sách item thông qua ❑ Button Up & Down ❑ Nhập từ bàn phím ◼ Properties ❑ Items: danh sách item ❑ ReadOnly: true 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 86 ❑ SelectedItemChanged
Chương IV . WINDOW FORM DomainUpDown ◼ Nhập item cho DomainUpDown String Collection Editor Cho phép nhập item 87
Chương IV . WINDOW FORM Graphic & RichText Controls 88
Chương IV . WINDOW FORM DateTimePicker ◼ 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 ◼ Properties ❑ Format: định dạng hiển thị ◼ long, short, time, custom ❑ CustomFormat: ◼ dd: hiển thị 2 con số của ngày ◼ MM: hiển thị 2 con số của tháng ◼ yyyy: hiển thị 4 con số của năm ◼ (xem thêm MSDN Online) ❑ 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 89
Chương IV . WINDOW FORM DateTimePicker 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); } 90
Chương IV . WINDOW FORM DateTimePicker ◼ Demo Định dạng xuất: 'Ngày' dd 'tháng' MM 'năm' yyyy Kích drop down để hiện thị hộp chọn ngày Chọn ngày trong khoảng 91 cho trước
Chương IV . WINDOW FORM MonthCalendar ◼ Cho phép user 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. ◼ Một số thuộc tính thông dụng ❑ 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 92
Chương IV . WINDOW FORM 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 93
Chương IV . WINDOW FORM Advanced Controls 94
Chương IV . WINDOW FORM Timer ◼ 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. Properties Enabled Interval Stop Tick 95
Chương IV . WINDOW FORM Timer ◼ Hiển thị giờ hệ thống Hiển thị thời gian Enable sự kiện Tick Khoảng thời gian chờ giữa 2 lần gọi Tick 96
Chương IV . WINDOW FORM Timer ◼ Sự kiện Tick Khai báo trình xử lý sự kiện Tick 97
Chương IV . WINDOW FORM Timer ◼ 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 98
Chương IV . WINDOW FORM ProgressBar ◼ 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 ❑ Step: số bước tăng khi gọi hàm PerformStep ❑ Value: giá trị hiện tại ❑ Style: kiểu của progress bar ◼ Phương thức ❑ PerformStep(): tăng thêm step ❑ Increment(int value): tăng vị trí hiện tại của tiến độ với giá trị xác định 99
Chương IV . WINDOW FORM ProgressBar ◼ Khai báo thanh tiến độ 0-100, step = 10 Max = 100 Min = 0 Step = 10 100
Chương IV . WINDOW FORM ProgressBar 101
Chương IV . WINDOW FORM ProgressBar ◼ Demo Thể hiện trực quan tiến độ Tăng tiến độ theo step và cập nhật lại % hoàn thành lên label 102
Chương IV . WINDOW FORM ToolTip ◼ Cung cấp chức năng hiển thị một khung text nhỏ khi user di chuyển chuột vào control bất kỳ ◼ Khung text chứa nội dung mô tả ý nghĩa của control ◼ Cách sử dụng ❑ Từ ToolBox kéo ToolTip thả vào form ❑ Kích chọn control muốn thêm tooltip ❑ Trong cửa sổ Properties của control sẽ có thuộc tính ToolTip. Thêm text vào thuộc tính này để hiển thị khi tooltip xuất hiện. 103
Chương IV . WINDOW FORM ToolTip ◼ Tạo ToolTip 104
Chương IV . WINDOW FORM ToolTip ◼ Khai báo Tooltip cho textbox trong Design View Nội dung Tooltip 105
Chương IV . WINDOW FORM ToolTip ◼ Khai báo tooltip cho button Nhập nội dung Tooltip cần hiển thị 106
Chương IV . WINDOW FORM ToolTip ◼ Khai báo tooltip cho listbox bằng code 107
Chương IV . WINDOW FORM ToolTip ◼ Demo ToolTip xuất hiện khi user di chuyển chuột vào vùng control 108
Chương IV . WINDOW FORM Common Dialog, Custom Control, MessageBox 109
Chương IV . WINDOW FORM Common Dialog ◼ Các dialog thường được sử dụng ❑ Được warp thành các lớp trong FCL/BCL OpenFileDialog ColorDialog Common Dialog SaveFileDialog FontDialog PrintDialog 110
Chương IV . WINDOW FORM Common Dialog ◼ Cách sử dụng ❑ 1. Kéo thả dialog vào form ◼ VS sẽ tạo thể hiện chứa trong lớp form ❑ 2. Khai báo đối tượng và tạo thể hiện của lớp CD ◼ VD: OpenFileDialog oFile = new OpenFileDialog(); Common Dialog Common 111
Chương IV . WINDOW FORM OpenFileDialog ◼ Sử dụng để chọn file lưu trên đĩa ◼ Cách sử dụng từ ToolBox Drag & drop Code phát sinh tự động xyz.Designer.cs 112
Chương IV . WINDOW FORM OpenFileDialog ◼ Code phát sinh của VS xyz.Designer.cs Tạo thể hiện Hiển thị Form 113
Chương IV . WINDOW FORM OpenFileDialog ◼ Code tự viết – không dùng Toolbox 114
Chương IV . WINDOW FORM OpenFileDialog Thuộc tính, phương thức Thuộc tính FileName Lấy tên file được chọn FileNames Lấy tên tất cả các file được chọn Filter Xác định kiểu file cần mở InitialDirectory Thư mục khởi tạo Multiselect Cho phép chọn nhiều file Title Tiêu đề của dialog Phương thức ShowDialog Hiển thị dialog Sự kiện 115 FileOk Xuất hiện khi user kích vào OK
Chương IV . WINDOW FORM SaveFileDialog ◼ Sử dụng để tạo file trên đĩa. ◼ Cách sử dụng ❑ Sử dụng SaveFileDialog component trên Toolbox ◼ Tương tự như OpenFileDialog! ❑ Tạo thể hiện của lớp SaveFileDialog 116
Chương IV . WINDOW FORM SaveFileDialog ◼ Demo: nhập văn bản vào textbox, sau đó lưu xuống file *.txt. ❑ Tạo ứng dụng dụng Windows Form có các control ◼ 1 label: caption của textbox ◼ 1 textbox: chứa nội dung text do user nhập ◼ 1 button: gọi SaveFileDialog và lưu file ◼ 1 SaveFileDialog: khai báo dialog SaveFile. 117
Chương IV . WINDOW FORM SaveFileDialog ◼ Thiết kế form Drag & drop Multiline=true 118
Chương IV . WINDOW FORM SaveFileDialog ◼ Viết phần xử lý cho button “Lưu file” System.IO 119
Chương IV . WINDOW FORM SaveFileDialog 120
Chương IV . WINDOW FORM OpenFileDialog ◼ Mở rộng bổ sung phần đọc file text từ demo trên ❑ Open file *.txt và hiển thị nội dung của file trên TextBox. ◼ Bổ sung thêm button “Mở file” và kéo thành phần OpenFileDialog thả vào form Drag & drop 121
Chương IV . WINDOW FORM SaveFileDialog ◼ Viết phần xử lý button “Mở file” 122
Chương IV . WINDOW FORM SaveFileDialog ◼ Demo Hiển thị nội dung file 123
Chương IV . WINDOW FORM FontDialog ◼ Chức năng hiển thị hộp thoại chọn font chữ được install trong máy ❑ Trong ứng dụng làm việc với document, đồ họa ◼ Sử dụng FontDialog ❑ Từ ToolBox kéo thả FontDialog vào Form ◼ Sử dụng trong lúc thiết kế ❑ Khai báo thể hiện FontDialog và hiển thị ◼ Viết code 124
Chương IV . WINDOW FORM FontDialog Thuộc tính, phương thức thường dùng Thuộc tính Font Get/set font được chọn Color Get/set màu của font ShowColor Hiển thị hay không hiển thị chọn màu ShowApply Hiển thị/ không button Apply Phương thức ShowDialog Hiển thị dialog ra màn hình Sự kiện Apply Kích hoạt khi user chọn apply 125
Chương IV . WINDOW FORM FontDialog ◼ Demo: gọi FontDialog thiết lập font cho control ◼ Tạo Form có dạng sau Label để test font Drag & drop Button chọn font 126
Chương IV . WINDOW FORM FontDialog ◼ Phần xử lý cho button “Font” 127
Chương IV . WINDOW FORM FontDialog 128
Chương IV . WINDOW FORM FontDialog ◼ Bổ sung chức năng “Apply” của FontDialog ❑ Khi FontDialog đang hiển thị cho phép user kích chọn nút Apply label thay đổi font theo. ◼ Cách thực hiện ❑ Khai báo có hiện thị button Apply cho FontDialog ◼ fontDialog1.ShowApply = true ◼ Đăng ký trình xử lý sự kiện cho button “Apply” ❑ Tạo trình xử lý cho sự kiện “Apply” của FontDialog ❑ Đăng ký trình xử lý cho sự kiện Apply của FontDialog 129
Chương IV . WINDOW FORM FontDialog ◼ Code minh họa 130
Chương IV . WINDOW FORM ColorDialog ◼ Hiển thị chức năng chọn màu ◼ Sử dụng theo 2 cách ❑ Kéo ColorDialog từ Toolbox thả vào form ❑ Viết code tạo đối tượng ◼ ColorDialog sử dụng giá trị màu có kiểu Color ❑ Màu ARGB ◼ Alpha ◼ Red ◼ Green ◼ Blue 131
Chương IV . WINDOW FORM ColorDialog ◼ Demo chọn màu: chọn màu nền cho form Drag & drop 132
Chương IV . WINDOW FORM ColorDialog ◼ Phần xử lý cho button “Color” 133
Chương IV . WINDOW FORM MessageBox ◼ Hiển thị hộp thoại chứa thông tin chỉ dẫn đến user ◼ Bao gồm các phần ❑ Text ❑ Button ❑ Symbol ◼ Lớp MessageBox có phương thức tĩnh Show để hiển thị dialog. ❑ Bắt giá trị trả về để biết phản ứng của user 134
Chương IV . WINDOW FORM MessageBox ◼ Có khoảng 21 phiên bản của Show ◼ Một số phiên bản thường sử dụng ❑ DialogResult Show(string text); ❑ DialogResult Show(string text, string caption); ❑ DialogResult Show(string text, string caption, MessageBoxButtons button); ❑ DialogResult Show(string text, string caption, MessageBoxButtons button, MessageBoxIcon icon); ❑ 135
Chương IV . WINDOW FORM MessageBox ◼ Các button hiển thị theo message ❑ Cho phép user chọn lựa các phản ứng với message ❑ Được định nghĩa trong MessageBoxButtons OK OKCancel AbortRetryIgnore MessageBoxButtons YesNoCancel YesNo RetryCancel 136
Chương IV . WINDOW FORM MessageBox ◼ MessageBoxIcon: định nghĩa các icon kèm theo message MessageBoxIcon.Asterisk MessageBoxIcon.Information MessageBoxIcon.Error MessageBoxIcon.Stop MessageBoxIcon.Hand MessageBoxIcon.Exclamation MessageBoxIcon.Warning MessageBoxIcon.Question MessageBoxIcon.None 137
Chương IV . WINDOW FORM MessageBox ◼ Một số các MessageBox minh họa 138
Chương IV . WINDOW FORM User Control ◼ Công việc kéo thả nhóm control thường sử dụng nhàm chán ◼ User control phục vụ mục đích tái sử dụng ◼ Vấn đề: ❑ Nhóm control phục vụ cho việc login thường xuất hiện trong ứng dụng ◼ Yêu cầu: ❑ Tạo nhóm control phục vụ cho việc login ❑ Nhóm control này bao gồm ◼ 2 label ◼ 2 textbox 139
Chương IV . WINDOW FORM User Control ◼ Bước 1: Tạo ứng dụng Windows Control Library 140
Chương IV . WINDOW FORM User Control ◼ Bước 2: thiết kế user control như sau 2 TextBox 2 Label có chứa image 141
Chương IV . WINDOW FORM User Control ◼ Khai báo các property cho user control ❑ Mỗi property gắn với textBox ◼ UserName gắn với txtUID ◼ Password gắn với txtPwd 142
Chương IV . WINDOW FORM User Control ◼ Biên dịch user control ◼ Kết quả được file assembly có phần mở rộng là DLL ◼ Sử dụng user control trong client app ❑ Add vào phần References của project ◼ Tạo đối tượng user control, add vào form ❑ Add vào ToolBox | Choose Items ◼ Kéo user control thả vào form, code phát sinh tự động 143
Chương IV . WINDOW FORM User Control ◼ Tạo ứng dụng Test User control ❑ Tạo ứng dụng Windows Form ❑ Thêm User Control vào ToolBox ◼ Kích chuột phải vào ToolBox ◼ Chọn chức năng Choose Items ◼ Chọn file DLL của User control vừa tạo ❑ Kéo user control thả vào form 144
Chương IV . WINDOW FORM User Control ◼ Kéo thả user control vào form Drag & drop Phát sinh code trong designer.cs 145
Chương IV . WINDOW FORM User Control ◼ Sử dụng User Control như control bình thường trên form. ◼ Truy cập user control HAGLogin thông qua 2 property đã định nghĩa khi xây dựng control này ❑ UserName: là textBox User Name ❑ Password: là nội dung của textBox Password 146
Chương IV . WINDOW FORM Mouse Event 147
Chương IV . WINDOW FORM Mouse Event ◼ Mouse là thiết bị tương tác thông dụng trên GUI ◼ Một số các thao tác phát sinh từ mouse ❑ Di chuyển ❑ Kích chuột ◼ Ứng dụng cần xử lý sự kiện chuột nào sẽ khai báo trình xử lý tương ứng ◼ Lớp MouseEventArgs được sử dụng để chứa thông tin truyền vào cho trình xử lý sự kiện mouse. ◼ Mỗi trình xử lý sự kiện sẽ có tham số là đối tượng object và đối tượng MouseEventArgs (hoặc EventArgs) 148
Chương IV . WINDOW FORM Mouse Event ◼ Tham số cho sự kiện liên quan đến mouse MouseEventArgs Số lần kích chuột Button được nhấn Tọa độ (x,y) của con trỏ chuột 149
Chương IV . WINDOW FORM Mouse Event Sự kiện chuột với tham số kiểu EventArgs MouseEnter Xuất hiện khi con trỏ chuột đi vào vùng biên của control MouseLeave Xuất hiện khi con trỏ chuột rời khỏi biên của control Sự kiện chuột với tham số kiểu MouseEventArgs MouseDown/ Xuất hiện khi button được nhấn/thả và con trỏ MouseUp chuột đang ở trong vùng biên của control MouseMove Xuất hiện khi chuột di chuyển và con trỏ chuột ở trong vùng biên của control 150
Chương IV . WINDOW FORM Mouse Event Thuộc tính của lớp MouseEventArgs Button Button được nhấn {Left, Right, Middle, none} có kiểu là MouseButtons Clicks Số lần button được nhấn X Tọa độ x của con trỏ chuột trong control Y Tọa độ y của con trỏ chuột trong control 151
Chương IV . WINDOW FORM Mouse Event ◼ MouseMove 152
Chương IV . WINDOW FORM Mouse Event ◼ Demo Vị trí hiện tại của con trỏ chuột Hiển thị tọa độ hiện tại của con trỏ chuột 153
Chương IV . WINDOW FORM Mouse Event ◼ Demo thao tác: kích chuột trái tại một điểm A, giữ chuột trái và di chuyển chuột, chương trình sẽ vẽ đường thẳng từ điểm A đến vị trí hiện tại chuột. ◼ Các sự kiện cần xử lý ❑ MouseDown: ◼ Xác định điểm A ban đầu ❑ MouseMove ◼ Kiểm tra nếu Left button của chuột đang giữ ❑ Sử dụng Graphics để vẽ đường thẳng từ A đến vị trí hiện tại 154
Chương IV . WINDOW FORM Mouse Event ◼ Bước 1: ❑ Tạo biến lưu trữ điểm A khi user kích chuột trái ❑ Biến pA có kiểu Point là biến thành viên của Form1 Lớp Form1 Biến pA lưu giữ tọa độ khi chuột trái được click 155
Chương IV . WINDOW FORM Mouse Event ◼ Bước 2 ❑ Khai báo xử lý sự kiện MouseDown trong Form1 ◼ Trong cửa sổ event của Form1, kích đúp vào sự kiện MouseDown Lưu lại điểm được nhấn chuột 156
Chương IV . WINDOW FORM Mouse Event ◼ Bước 3 ❑ Cài đặt xử lý sự kiện MouseMove ◼ Kiểm tra nếu LeftButton được nhấn ❑ Vẽ đường thẳng từ pA đến vị trí hiện tại 157
Chương IV . WINDOW FORM Mouse Event Tại sao có hiệu ứng vậy? SV tự cải tiến 158
Chương IV . WINDOW FORM Keyboard Event 159
Chương IV . WINDOW FORM Keyboard Event ◼ Phát sinh khi một phím được nhấn hoặc thả ◼ Có 3 sự kiện ❑ KeyPress ❑ KeyUp ❑ KeyDown ◼ KeyPress phát sinh kèm theo với mã ASCII của phím được nhấn ◼ KeyPress không cho biết trạng thái các phím bổ sung {Shift, Alt, Ctrl } ◼ Sử dụng KeyUp & KeyDown để xác định trạng thái các phím bổ sung. 160
Chương IV . WINDOW FORM Keyboard Event Sự kiện với tham số kiểu KeyEventArgs KeyDown Phát sinh khi phím được nhấn KeyUp Phát sinh khi phím được thả Sự kiện với tham số kiểu KeyPressEventArgs KeyPress Khởi tạo khi phím được nhấn Thuộc tính của lớp KeyPressEventArgs KeyChar Chứa ký tự ASCII của phím được nhấn Handled Cho biết sự kiện KeyPress có được xử lý chưa Thuộc tính của lớp KeyEventArgs Alt, Control, Trạng thái các phím bổ sung Shift Handled Cho biết sự kiện đã xử lý 161
Chương IV . WINDOW FORM Keyboard Event Thuộc tính của lớp KeyEventArgs (tt) KeyCode Trả về mã ký tự được định nghĩa trong Keys enumeration KeyData Chứa mã ký tự với thông tin phím bổ sung KeyValue Trả về số int, đây chính là mã Windows Virtual Key Code Modifier Trả về giá trị của phím bổ sung 162
Chương IV . WINDOW FORM Keyboard Event ◼ Keys Enumeration 163
Chương IV . WINDOW FORM Keyboard Event ◼ Minh họa các sự kiện: KeyPress, KeyDown, KeyUp ❑ Khi user nhấn một phím ◼ Bắt sự kiện KeyPress: xuất ra phím được nhấn ◼ Bắt sự kiện KeyDown: xuất ra các tham số trong KeyEventArgs ❑ Khi user thả phím ◼ Xóa các thông tin mô tả phím được nhấn trong các label ◼ Cách thực hiện ❑ Tạo một form minh họa ❑ Thiết kế trên form có 2 Label: ◼ lblChar: hiển thị ký tự được nhấn trong KeyPress ◼ lblKeyInfo: hiển thị các thông tin của KeyEventArgs khi KeyDown 164
Chương IV . WINDOW FORM Keyboard Event ◼ Bước 1: tạo Windows Form như hình mô tả Label chứa ký tự được nhấn trong sự kiện KeyPress Label chứa thông tin mã ký tự được nhấn trong sự kiện KeyDown 165
Chương IV . WINDOW FORM Keyboard Event ◼ Bước 2: ❑ Tạo KeyPress Event Handling cho form 166
Chương IV . WINDOW FORM Keyboard Event ◼ Bước 3: ❑ Tạo KeyDown Event Handling cho form 167
Chương IV . WINDOW FORM Keyboard Event ◼ Demo 168
Chương IV . WINDOW FORM Keyboard Event ◼ CT Calculator (BT3) mở rộng cho phép xử lý các phím ❑ Form nhận xử lý thông điệp KeyDown ◼ Xác định các phím tương ứng rồi gọi sự kiện click của button ◼ VD: user gõ phím 1, tương tự như button “1” được nhấn ◼ Cách thực hiện ❑ Khai báo trình xử lý sự kiện KeyDown cho Form chính ❑ Thiết lập thuộc tính KeyPreview cho Form để nhận sự kiện bàn phím. 169
Chương IV . WINDOW FORM Keyboard Event ◼ Viết phần xử lý cho sự kiện KeyDown ❑ Xác định các phím tương ứng để gọi sự kiện click của các button. Gọi event Click của button “1” Phím '=' được nhấn 170 Phím ‘+' được nhấn
Chương IV . WINDOW FORM Tóm tắt ◼ Thiết kế layout trên form ❑ Anchor ❑ Dock các control ◼ Các control trên form ❑ Control nhập liệu ❑ Control chọn giá trị ❑ Container control ❑ Component ❑ Advanced control ◼ Mouse event ◼ Keyboard event 171