Bài giảng Lập trình giao diện: Chương 4 Windows Form và các Control, với mục tiêu giúp các bạn có thể 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.
08/07/2020 LẬP TRÌNH GIAO DIỆN Nguyễn Thị Mai Trang Nguyễn Thị Mai Trang 1 Chương Windows Form Control 08/07/2020 Mục tiêu • Sử dụng hợp lý loại giao diện ứng dụng • Sử dụng thành thạo thuộc tính Form control để xây dựng ứng dụng đáp ứng yêu cầu mức độ từ đến nâng cao • Nắm bắt xử lý kiện Windows Form control cách hợp lý • Thao tác thành thạo chuyển form truyền liệu form • Xây dựng xử lý thành thạo ứng dụng dạng MDI Nguyễn Thị Mai Trang 3 Nội dung Form Các controls Các controls Các controls chứa Các controls dạng danh sách Các controls khác UserControl Thêm controls lúc chương trình thực thi Menu 10 Các hộp thoại thông dụng 11 Ứng dụng SDI – MDI Nguyễn Thị Mai Trang 4 08/07/2020 4.1 Form • Là cửa sổ ứng dụng giao diện người dùng dạng đồ họa • Cung cấp giao diện tương tác với người sử dụng thao tác trực quan • Trong ứng dụng Windows Forms, project tạo, ln có sẵn form • Có thể bổ sung thêm nhiều form khác • Khi chương trình thực thi, form gọi Nguyễn Thị Mai Trang 5 Form (tt) • Các thuộc tính Form – Name: Tên Form – Text: Chuỗi hiển thị tiêu đề – ShowIcon: true/false – hiển thị/không hiển thị icon bên trái tiêu đề – ShowInTaskBar: true/false – hiển thị/không hiển thị biểu tượng form Taskbar form thực thi – Icon: tên tập tin *.ico làm biểu tượng tiêu đề form – BackColor: màu form – ForeColor: màu chuỗi control form – StartPossition: vị trí hiển thị form – Opacity: độ rõ form, mặc định 100% Nguyễn Thị Mai Trang 6 08/07/2020 Form (tt) • Các thuộc tính Form (tt) – WindowStates: trạng thái form thực thi: • Minimized (thu nhỏ) • Maximized (phóng to) • Normal (trạng thái thiết kế) – isMdiContainer: sử dụng ứng dụng MDI • true: form chọn MDI form (form cha) • false: form bình thường – TopMost: • true: form nằm chồng lên cửa sổ khác • false: form bình thường – FormBorderStyle: kiểu đường viền form – MainMenuStrip: control MenuStrip gắn form Nguyễn Thị Mai Trang 7 Form (tt) • Một số phương thức Form – Close (): đóng form – Hide (): ẩn form – Show (): Hiển thị form dạng modeless-dialog (khi form hiển thị, người sử dụng thao tác với thành phần khác ứng dụng) – ShowDialog (): Hiển thị form dạng modal-dialog (khi form hiển thị, người sử dụng thao tác với thành phần khác ứng dụng đóng form) Nguyễn Thị Mai Trang 8 08/07/2020 Form (tt) • Các kiện Form – FormClosed: gọi tự động form đóng – FormClosing: gọi tự động form đóng – Click: gọi tự động click chuột lên form – Activated: gọi tự động form kích hoạt mã lệnh hay tác động người sử dụng – Load: gọi tự động form nạp, dùng để khởi tạo giá trị thành phần form – KeyPress, KeyDown, KeyUp: gọi tự động phím nhấn form – Resize: gọi tự động form bị thay đổi kích thước Nguyễn Thị Mai Trang 9 Form (tt) • Cài đặt kiện Form: bảng properties, chọn tab Events Nguyễn Thị Mai Trang 10 10 08/07/2020 Thêm form vào project Nguyễn Thị Mai Trang 11 11 Thêm form vào project (tt) Nguyễn Thị Mai Trang 12 12 08/07/2020 Tạo Form kế thừa (Inherited Form) Nguyễn Thị Mai Trang 13 13 Tạo Form kế thừa (tt) • Chọn Form cha (lớp sở): • Tạo nhanh form kế thừa: public partial class Form3 : Form1 { public Form3() { InitializeComponent(); } } Nguyễn Thị Mai Trang 14 14 08/07/2020 Tạo Form lúc chương trình thực thi • Tạo đối tượng thuộc class Form • Xây dựng thuộc tính cho đối tượng • Gọi phương thức Show, ShowDialog Nguyễn Thị Mai Trang 15 15 4.2 Controls • Controls thành phần mà ta bổ sung lên form thiết kế giao diện cho chương trình • Ví dụ: nút lệnh, ô cho phép người sử dụng nhập liệu, loại danh sách lựa chọn, hộp kiểm, hình ảnh,… • Các control tổ chức thành nhóm nằm cửa sổ Toolbox, cho phép người sử dụng kéo thả vào form cách trực quan Nguyễn Thị Mai Trang 16 16 08/07/2020 Controls (tt) • Thêm controls vào Form: – Hộp công cụ (Toolbox): cung cấp danh sách Component liệt kê theo nhóm, cho phép thiết kế giao tiếp với người dùng – Hiện ToolBox: • View, Toolbox • Chọn biểu tượng cơng cụ • Ctrl+W X Nguyễn Thị Mai Trang 17 17 Controls (tt) • Thêm controls vào Form: – Kéo thả control từ hộp Toolbox vào Form Nguyễn Thị Mai Trang 18 18 08/07/2020 Controls (tt) • Thuộc tính chung control: – BackColor: Màu – ForeColor: Màu chữ control – Text: Chuỗi hiển thị control – Visible: ẩn hay hiển thị control – Name: Tên control, dùng để truy xuất thuộc tính control – Locked: Khố khơng cho di chuyển Form – Enabled: Vơ hiệu hố hay cho phép sử dụng Nguyễn Thị Mai Trang 19 19 Controls (tt) • Sự kiện chung control: – Click: click chuột lên control – MouseMove: di chuyển chuột control – MouseDown: nhấn chuột control – MouseUp: nhả chuột sau nhấn chuột control – Move: di chuyển control mã lệnh hay sử dụng chuột – SizeChanged: kích thước control thay đổi mã lệnh hay người sử dụng – Paint: xảy control vẽ lại Nguyễn Thị Mai Trang 20 20 10 08/07/2020 4.7 User control • Là control người sử dụng tự định nghĩa • Được sử dụng control thông thường khác cách kéo thả từ cửa sổ Toolbox • UserControl tạo cịn sử dụng ứng dụng khác • Tạo UserControl dùng ứng dụng: – Project Add User Control – UserControl tạo giống form khơng có tiêu đề – Thiết kế giao diện thao tác UserControl với form thông thường Nguyễn Thị Mai Trang 67 67 User control (tt) • Tạo User control sử dụng ứng dụng khác – Tạo ứng dụng loại Class Library project – Sau biên dịch thành công, ứng dụng tạo file có phần mở rộng dll – Trong ứng dụng khác, click chuột phải cửa sổ Toolbox, chọn Choose item…, chọn file dll nói trên, click nút OK để hoàn tất – UserControl hiển thị cửa sổ Toolbox control khác Nguyễn Thị Mai Trang 68 68 34 08/07/2020 4.8 Thêm control lúc chương trình thực thi • Khai báo tạo đối tượng control muốn thêm vào form • Thiết lập thuộc tính cho đối tượng: – vị trí: Location, X, Y – kích thước: Size, Width, Height – • Khai báo kiện cho control cần • Thêm đối tượng control vào danh sách Controls Form Control chứa (Panel, GroupBox, TabControl…) Nguyễn Thị Mai Trang 69 69 4.9 Menu • Control cho phép tổ chức chức xử lý ứng dụng theo nhóm • Menu tổ chức phân cấp – Menu – Sub menu – Menu item Nguyễn Thị Mai Trang 70 70 35 08/07/2020 Menu (tt) • Tạo menu: sử dụng điều khiển MenuStrip • Một số thuộc tính Menu – Text: chuỗi hiển thị – Shortcut Keys: phím nóng kết hợp với menu – Image: hình ảnh hiển thị menu – AutoTooltip, • Các loại menu item – MenuItem – ComboBox – TextBox – Separator • Sự kiện mặc định: Click Nguyễn Thị Mai Trang 71 71 4.10 Các hộp thoại thơng dụng Windows • Là lớp hộp thoại thiết kế cho mục đích sử dụng khác như: – Hộp thoại mở file, lưu file – Hộp thoại chọn font chữ – Hộp thoại chọn màu – Hộp thoại chọn thư mục – Hộp thoại in ấn – … Nguyễn Thị Mai Trang 72 72 36 08/07/2020 Các hộp thoại thông dụng Windows (tt) Nguyễn Thị Mai Trang 73 73 Sử dụng hộp thoại • Trong thiết kế: – Kéo thả vào từ Toolbox – Thiết lập thuộc tính cửa sổ Properties – Gọi phương thức ShowDialog, kiểm tra kiểu trả phương thức ShowDialog để xử lý: • DialogResult.OK: chấp nhận thao tác • DialogResult.Cancel: hủy thao tác Nguyễn Thị Mai Trang 74 74 37 08/07/2020 Sử dụng hộp thoại (tt) • Sử dụng code: – Khai báo đối tượng lớp hộp thoại – Thiết lập thuộc tính cho đối tượng – Gọi phương thức ShowDialog, kiểm tra kiểu trả phương thức ShowDialog để xử lý: • DialogResult.OK: chấp nhận thao tác • DialogResult.Cancel: hủy thao tác – Ví dụ: ColorDialog dlg =new ColorDialog(); if(dlg.ShowDialog()==DialogResult.OK) {….} Nguyễn Thị Mai Trang 75 75 OpenFileDialog • Hộp thoại cho phép chọn mở file • Lớp OpenFileDialog kế thừa từ lớp FileDialog Nguyễn Thị Mai Trang 76 76 38 08/07/2020 OpenFileDialog (tt) • Các thuộc tính bản: – Filter: chuỗi quy định loại file hiển thị danh sách file cho phép người sử dụng chọn – Multiselect: true/false: cho phép chọn nhiều file chọn file, mặc định false – FileName: file chọn kiểu string (sử dụng trường họp thuộc tính Multiselect = false) – FileNames: danh sách file chọn kiểu string (sử dụng trường hợp thuộc tính Multiselect = true) Nguyễn Thị Mai Trang 77 77 OpenFileDialog (tt) • Cách sử dụng hộp thoại OpenFileDialog: – Kéo biểu tượng OpenFileDialog từ cửa sổ Toolbox vào Form khai báo tạo đối tượng code – Thiết lập thuộc tính cho hộp thoại – Gọi phương thức ShowDialog, truy xuất thuộc tính FileName FileNames đối tượng hộp thoại để xử lý Nguyễn Thị Mai Trang 78 78 39 08/07/2020 SaveFileDialog • Tương tự OpenFileDialog, kế thừa từ lớp FileDialog, hộp thoại cho phép lưu file lên đĩa, khơng có thuộc tính Multiselect Nguyễn Thị Mai Trang 79 79 FontDialog • Hộp thoại cho phép chọn font chữ • Các thuộc tính bản: – Font: font chữ chọn – Color: màu chữ chọn – ShowEffects: true/false - hiển thị/không hiển thị khung Effects – ShowApply: true/false - hiển thị/không hiển thị nút Apply – ShowColor: true/false - hiển thị/không hiển thị combobox chọn màu chữ Nguyễn Thị Mai Trang 80 80 40 08/07/2020 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àu tùy chọn – FullOpen: true/false - cho/không cho phép mở hộp thoại màu dạng đầy đủ Nguyễn Thị Mai Trang 81 81 FolderBrowserDialog • Hộp thoại cho phép chọn thư mục • Các thuộc tính bản: – Description: chuỗi hiển thị hộp thoại – SelectedPath: đường dẫn thư mục chọn – ShowNewFolderButton: True/False: hiển thị/ không hiển thị nút tạo thư mục Nguyễn Thị Mai Trang 82 82 41 08/07/2020 4.11 Ứng dụng dạng SDI - MDI • SDI (Single Document Interface) – Tại thời điểm, làm việc với tài liệu • • • • NotePad WordPad Paint … • MDI (Multiple Document Interface) – Tại thời điểm, làm việc với nhiều tài liệu • Microsoft Word • Microsoft Excel • Microsoft PowerPoint •… Nguyễn Thị Mai Trang 83 83 Ứng dụng SDI • Là loại ứng dụng có nhiều form, form thường có mối liên quan tương tác với nhau, khơng tồn loại quan hệ cha-con • Các thao tác thường gặp ứng dụng có nhiều form chuyển form truyền liệu form Nguyễn Thị Mai Trang 84 84 42 08/07/2020 Ứng dụng SDI • Chuyển qua lại form: – Show(): mở form, form hiển thị, thao tác với form khác ứng dụng – ShowDialog(): • Mở form dạng modal dialog: người sử dụng phải thao tác với form, thao tác với thành phần khác ứng dụng trước đóng form • ShowDialog() trả đối tượng DialogResult, thường dùng để xác nhận hành động người sử dụng – Hide(): ẩn form, giữ nguyên liệu trạng thái form trước form bị ẩn Nguyễn Thị Mai Trang 85 85 Ứng dụng SDI – Chuyển form sử dụng Property kiểu đối tượng: //class Form4 Form form1; //Khai báo Property public Form Form_1 { set { form1 = value; } } private void btOpenForm1_Click( object sender, EventArgs e) { this.Close(); form1.Show(); } //class Form1 private void btOpenForm4_Click( object sender, EventArgs e) { Form4 f = new Form4(); f.Form_1 = this; this.Hide(); f.Show(); } Nguyễn Thị Mai Trang 86 86 43 08/07/2020 Ứng dụng SDI (tt) – Chuyển form sử dụng biến đối tượng static: //class Form1 public static Form1 form1; private void btOpenForm5_Click( object sender, EventArgs e) { form1 = this; this.Hide(); Form5 f = new Form5(); f.Show(); } //class Form5 private void btOpenForm1_Click( object sender, EventArgs e) { Form1.form1.Show(); this.Close(); } Nguyễn Thị Mai Trang 87 87 Ứng dụng SDI (tt) • Truyền liệu form: – Sử dụng phương thức khởi tạo: //class Form2 //Khai báo phương thức khởi tạo có tham số public Form2 (String text):this() { lbText.Text = text; } //class Form1 //Hàm xử lý kiện click lên button btOpenForm2 private void btOpenForm2_Click(object sender, EventArgs e) { Form2 f = new Form2(txtMessage.Text); f.Show(); } Nguyễn Thị Mai Trang 88 88 44 08/07/2020 Ứng dụng SDI (tt) – Truyền liệu form sử dụng Properties: //class Form3 private string message; //Khai báo Property public string Message { set { message = value; } } //Hàm xử lý kiện Form3_Load private void Form3_Load( object sender, EventArgs e) { lbText.Text = message; } //class Form1 private void btOpenForm3_Click ( object sender, EventArgs e) { Form3 f = new Form3(); f.Message = txtMessage.Text; f.Show(); } Nguyễn Thị Mai Trang 89 89 Ứng dụng MDI • Là loại ứng dụng mà có form làm form (MDI Form – cịn gọi form cha hay main form) • Từ form gọi mở form (child form) • Các form thực thi nằm form cha với nhiều cách xếp đa dạng • Ứng dụng MDI gồm có thành phần như: –Một form ứng dụng –Ít form con, form mở nằm form cha • Menu ứng dụng nằm form cha, menu chứa chức cho phép mở form Nguyễn Thị Mai Trang 90 90 45 08/07/2020 Ứng dụng MDI (tt) Nguyễn Thị Mai Trang 91 91 Ứng dụng MDI (tt) • MDI Form: – Là form chứa form khác – isMdiContainer = true • Child Form: – form nằm MDI Form – MdiParent = form cha – Ví dụ: • Form2 frmChild = new Form2(); frmChild.MdiParent = this; frmChild.Show (); – Trong tham chiếu this form gọi đến Form2 Nguyễn Thị Mai Trang 92 92 46 08/07/2020 Ứng dụng MDI (tt) • Một số thuộc tính form thường dùng ứng dụng MDI: – IsMdiChild: true/false - cho biết form có/khơng phải form – MdiParent: đối tượng Form form cha form – ActiveMdiChild: đối tượng Form form hoạt động (active) – IsMdiContainer: true/false - xác định form có/khơng phải MDI form – MdiChildren: danh sách form Nguyễn Thị Mai Trang 93 93 Ứng dụng MDI (tt) • Sắp xếp form ứng dụng MDI: – Sử dụng phương thức LayoutMdi • Duyệt qua form con: – Duyệt danh sách MdiChildren Nguyễn Thị Mai Trang 94 94 47 08/07/2020 Ứng dụng MDI (tt) • Các bước tạo ứng dụng MDI: – Tạo form cha – Thiết kế form tùy theo yêu cầu ứng dụng, bổ sung menu form – Bổ sung vào form cha menu New để gọi form – Trộn xếp menu form cha form form cha form có sử dụng menu – Gọi form kiện click menu New – Ví dụ: xem tài liệu học tập Lập trình giao diện Nguyễn Thị Mai Trang 95 95 Ứng dụng MDI (tt) • Ví dụ: xem tài liệu học tập Lập trình giao diện Nguyễn Thị Mai Trang 96 96 48 ... dụ: xem tài liệu học tập Lập trình giao diện Nguyễn Thị Mai Trang 95 95 Ứng dụng MDI (tt) • Ví dụ: xem tài liệu học tập Lập trình giao diện Nguyễn Thị Mai Trang 96 96 48 ... Editor Nguyễn Thị Mai Trang 41 41 4. 5 Các control dạng danh sách • • • • • ListBox ComboBox ImageList ListView TreeView Nguyễn Thị Mai Trang 42 42 21 08/07/2020 ListBox • Control hiển thị danh... đổi kích thước Nguyễn Thị Mai Trang 9 Form (tt) • Cài đặt kiện Form: bảng properties, chọn tab Events Nguyễn Thị Mai Trang 10 10 08/07/2020 Thêm form vào project Nguyễn Thị Mai Trang 11 11 Thêm