LẬP TRÌNH ỨNG DỤNG VỚI NGÔN NGỮ C# Lập trình giao diện với Windows Forms Bộ môn Hệ thống thông tin Khoa Công nghệ thông tin ĐH Khoa học tự nhiên TP HCM Tóm tắt nội dung bài thực hành Hướng dẫn tạo và[.]
PHÁT TRIỂN ỨNG DỤNG CSDL Tháng 9/2014 LẬP TRÌNH ỨNG DỤNG VỚI NGƠN NGỮ C# Lập trình giao diện với Windows Forms Tóm tắt nội dung thực hành: Hướng dẫn tạo lập trình giao diện Windows Forms đơn giản ngôn ngữ C# Bộ môn Hệ thống thông tin Khoa Công nghệ thông tin MỤC LỤC MỤC TIÊU ỨNG DỤNG WINDOWS FORMS ĐẦU TIÊN 2.1 TẠO PROJECT WINDOWS FORMS 2.2 CẤU TRÚC MỘT CHƯƠNG TRÌNH WINDOWS FORMS 2.3 LẬP TRÌNH GIAO DIỆN ĐƠN GIẢN 2.4 NGUYÊN TẮC HOẠT ĐỘNG CỦA GIAO DIỆN WINDOWS FORMS MỘT SỐ CONTROLS PHỔ BIẾN 3.1 TẠO THÊM CÁC LỰA CHỌN VỚI RADIOBUTTON 3.2 NHÓM CÁC CONTROLS BẰNG CÁC CONTAINER 3.3 THÊM CÁC LỰA CHỌN TRONG DANH SÁCH DÀI BẰNG COMBOBOX 10 3.4 THỂ HIỆN DỮ LIỆU VỚI DATAGRIDVIEW 12 3.4.1 Kết nối DataGridView với đối tượng 12 3.4.2 Chỉnh sửa cột DataGridView 15 Mục tiêu Sau hoàn thành tập sinh viên có thể: Tạo ứng dụng Windows Forms đơn giản Làm quen với số control đơn giản Làm quen với số control thể liệu Công cụ sử dụng: Visual Studio: sinh viên sử dụng tài khoản MSDNAA để tải cài đặt ứng dụng visual studio Ứng dụng Windows Forms 2.1 Tạo project Windows Forms Để tạo project Windows Forms, tạo project dạng Windows Forms Application ngôn ngữ C# BộmônHệthốngthông tin | Khoa CNTT | ĐH KHTN TP HCM | 1/2013 Trang 2.2 Cấu trúc chương trình Windows Forms Khi tạo xong, chương trình Windows Forms bao gồm thành phần quan trọng sau: Tập tin Program.cs: mã nguồn chứa hàm main chương trình Mặc định, mã nguồn hàm main khởi tạo chương trình với giao diện Form1 Các tập tin xử lý Form1 bao gồm: Form1.cs: chứa mã nguồn xử lý người dùng định nghĩa thêm Mặc định, ban đầu Form1.cs Form1.designer.cs: chứa mã nguồn giao diện Tại đây, từ khoá partial cho phép định nghĩa lớp Form1 đặt tập tin Form1.cs Form1.designer.cs Lúc này, mã nguồn giao diện chưa có phần thêm BộmônHệthốngthông tin | Khoa CNTT | ĐH KHTN TP HCM | 1/2013 Trang Phần mã nguồn mục “Windows Forms Designer generated code” thể phần mã nguồn giao diện Form1 Visual Studio tự phát sinh thêm vào Tập tin App.config: tập tin cho phép định nghĩa thuộc tính cấu hình cho ứng dụng Có thể sử dụng để lưu trữ thơng tin kết nối sở liệu, BộmônHệthốngthông tin | Khoa CNTT | ĐH KHTN TP HCM | 1/2013 Trang 2.3 Lập trình giao diện đơn giản Sử dụng View/Toolbox để controls có Windows Forms Lúc này, kéo thả control vào giao diện Form1 sau Để tạo giao diện trên, kéo control Label, Textbox Button vào giao diện Sau đó, thay đổi thuộc tính Text tương ứng Ngồi ra, thay đổi thuộc tính ID control thành: lblHoTen(cho label), txtHoTen(cho textbox) btnXinChao(cho button) Có thể thay đổi cách mở cửa sổ View/Properties chọn vào control tương ứng Sau đó, chọn vào button Xin chao, chọn tab Event cửa sổ properties Double Click vào kiện Click để phát sinh mã nguồn xử lý kiện Click Hàm xử lý kiện click cho button Xin Chao phát sinh tập tin Form1.cs Sau đó, cài đặt thêm chức lấy thông tin từ textbox Ho ten xu ất hình chuỗi “Xin chào “ + BộmơnHệthốngthơng tin | Khoa CNTT | ĐH KHTN TP HCM | 1/2013 Trang Chạy chương trình để kiểm chứng lại cách hoạt động 2.4 Nguyên tắc hoạt động giao diện Windows Forms Với Windows Forms, tất thành phần giao diện Form control như: textbox, button, label, gridview,… lớp Trong đó, thêm m ột control vào giao diện lớp tự động phát sinh thêm vào lớp Form tập tin Form.designer.cs Mã nguồn tập tin sau thêm label, textbox button thêm vào số phần sau: Form1 chứa thuộc tính lớp button, textbox label với tên ID control Hàm InitializeComponent: hàm gọi khởi tạo Form1 Hàm sử dụng để khởi tạo control khai báo khởi tạo cho giao diện Form1 Đầu tiên, thuộc tính control khai báo Sau đó, thuộc tính controls khởi tạo thiết lập lại Name, Text, Location (vị trí control giao diện Form1) TabIndex thứ tự control người dùng nhấn tab BộmônHệthốngthông tin | Khoa CNTT | ĐH KHTN TP HCM | 1/2013 Trang BộmônHệthốngthông tin | Khoa CNTT | ĐH KHTN TP HCM | 1/2013 Trang Lớp Form1 có thuộc tính Controls chứa control có Form1 Trong ví d ụ trên, đoạn mã sau dùng để thêm label, textbox button vào giao diện Form1 Để xử lý kiện nhấn chuột button Xin chao, Windows Forms phát sinh dòng lệnh sau hàm InitializeComponent: Trong đó, this.btnXinChao_Click tên hàm xử lý kiện lớp Form1 tập tin Form1.cs Một số controls phổ biến Trong Windows Forms, nhiều control thông dụng hỗ trợ như: checkbox, combobox, radiobutton,… 3.1 Tạo thêm lựa chọn với RadioButton Lần lượt kéo radio button vào giao diện đặt tên hình Đồng thời, đổi ID control thành lblGioiTinh, rdoNam rdoNu thiết lập rdoNam thành lựa chọn mặc định cách thiết lập thuộc tính Checked thành True Lập trình nút btnDangKy để hiển thị thông tin cá nhân BộmônHệthốngthông tin | Khoa CNTT | ĐH KHTN TP HCM | 1/2013 Trang 3.2 Nhóm controls Container Trong Windows Forms, control nhóm lại đặt control khác để bố trí giao diện trực quan Trong hình bên dưới, giao diện nhóm lại groupbox giúp giao diện dễ nhìn Các control dạng container ln có thuộc tính Controls tương tự lớp Form để thêm control vào Sau kéo control vào groupbox, đoạn mã sau phát sinh tập tin Form1.designer.cs: BộmônHệthốngthông tin | Khoa CNTT | ĐH KHTN TP HCM | 1/2013 Trang Ngồi ra, sử dụng số container khác như: Panel, Split Container, Tab Control, Bên cạnh vai trị thể thơng tin giao diện, lớp container cịn đóng vai trị nhóm radio button Trong giao diện sau, có số radio button chọn Để giải tình trạng này, cần đặt nhóm radio button vào container khác Trong ví dụ sau, sử dụng Panel để nhóm giới tính nơi vào panel khác BộmônHệthốngthông tin | Khoa CNTT | ĐH KHTN TP HCM | 1/2013 Trang Khi chương trình dạy, phần viền panel khơng hiển thị nên cho giao diện tương tự khơng có panel Tuy nhiên, lúc chọn giới tính nơi riêng 3.3 Thêm lựa chọn danh sách dài ComboBox ComboBox cho phép chọn lựa chọn từ danh sách nhiều lựa chọn radio button Để thêm lựa chọn vào combo box, thay đổi giá trị thuộc tính Items properties combo box cboThanhPho vừa thêm vào BộmônHệthốngthông tin | Khoa CNTT | ĐH KHTN TP HCM | 1/2013 Trang 10 Có thể xử lý kiện SelectedIndexChanged để xử lý cho hành động sau người dùng thay đổi lựa chọn combo box Ví dụ sau xử lý nạp danh sách quận vào combo box cboQuan dựa thành phố chọn cboThanhPho BộmônHệthốngthông tin | Khoa CNTT | ĐH KHTN TP HCM | 1/2013 Trang 11 3.4 Thể liệu với DataGridView DataGridView control thể liệu dạng bảng lên giao diện 3.4.1 Kết nối DataGridView với đối tượng DataGridView sử dụng để thể liệu từ mảng Trong ví dụ sau, sử dụng DataGridView để thể mảng họ tên sau nhấn nút Đăng ký Đầu tiên, tạo lớp SinhVien chứa thông tin sinh viên BộmônHệthốngthông tin | Khoa CNTT | ĐH KHTN TP HCM | 1/2013 Trang 12 Sau đó, thêm thuộc tính chứa danh sách sinh viên vào lớp Form1 Thay đổi hàm xử lý kiện cho button Đăng Ký, tạo đối tượng SinhVien thêm vào danh sách lstSinhVien BộmônHệthốngthông tin | Khoa CNTT | ĐH KHTN TP HCM | 1/2013 Trang 13 Kết nối danh sách lstSinhVien với DataGridView thơng qua thuộc tính DataSouce để thể liệu Lúc này, sau nhập đầy đủ thông tin nhấn vào nút Đăng ký, thông tin sinh viên bên hiển thị vào DataGridView BộmônHệthốngthông tin | Khoa CNTT | ĐH KHTN TP HCM | 1/2013 Trang 14 3.4.2 Chỉnh sửa cột DataGridView Mặc định, DataGridView tự động tìm thuộc tính có lớp đối tượng tạo thành cột Ở đây, lớp SinhVien tạo thuộc tính gồm: HoTen, GioiTinh, NoiO, Quan, ThanhPho nên grdDanhSachSinhVien hi ển thị tên cột theo tên thuộc tính Để hiển thị tên cột riêng, không phụ thuộc vào tên cột thuộc tính , cần thay đổi giá trị thuộc tính AutoGenerateColumns thành false Đoạn code sau thay đổi giá trị thuộc tính khởi tạo kiện Load Form Sau đó, thêm danh sách cột vào DataGridView cách thay đ ổi thu ộc tính Columns phần properties DataGridView BộmônHệthốngthông tin | Khoa CNTT | ĐH KHTN TP HCM | 1/2013 Trang 15 Lần lượt thêm cột với Name tên cột Header Text phần th ể hi ện cột tiêu đề DataGridView Với cột thêm vào, cần thay đổi thuộc tính DataPropertyName thành tên thuộc tính tương ứng lớp đối tượng BộmônHệthốngthông tin | Khoa CNTT | ĐH KHTN TP HCM | 1/2013 Trang 16 Lúc này, chạy chương trình, DataGridView grdDanhSachSV khơng t ự đ ộng thêm cột vào mà cột Họ Tên Giới Tính BộmơnHệthốngthơng tin | Khoa CNTT | ĐH KHTN TP HCM | 1/2013 Trang 17