Giáo trình mô đun Lập trình ứng dụng WPF (Nghề Công nghệ thông tin Trình độ cao đẳng)

BM/QT10/P.ĐTSV/04/04 UBND TỈNH BÀ RỊA – VŨNG TÀU TRƯỜNG CAO ĐẲNG KỸ THUẬT CƠNG NGHỆ GIÁO TRÌNH MƠ ĐUN: LẬP TRÌNH ỨNG DỤNG WPF NGHỀ: CƠNG NGHỆ THƠNG TIN TRÌNH ĐỘ: CAO ĐẲNG (Ban hành kèm theo Quyết định số: /QĐ-CĐKTCN ngày…….tháng….năm Hiệu trưởng Trường Cao đẳng Kỹ thuật Công nghệ BR – VT) BÀ RỊA-VŨNG TÀU TUYÊN BỐ BẢN QUYỀN Nhằm đáp ứng nhu cầu học tập nghiên cứu cho giảng viên sinh viên nghề Công nghệ Thông tin trường Cao đẳng Kỹ thuật Công nghệ Bà Rịa – Vũng Tàu, chúng tơi thực biên soạn tài liệu Lập trình ứng dụng WPF Tài liệu biên soạn thuộc loại giáo trình phục vụ giảng dạy học tập, lưu hành nội Nhà trường nên nguồn thơng tin phép dùng ngun trích dùng cho mục đích đào tạo tham khảo Mọi mục đích khác mang tính lệch lạc sử dụng với mục đích kinh doanh thiếu lành mạnh bị nghiêm cấm LỜI GIỚI THIỆU Giáo trình Lập trình ứng dụng WPF biên soạn dựa khung chương trình đào tạo Cao đẳng nghề Cơng nghệ Thông tin Trường Cao đẳng Kỹ thuật Công nghê Bà Rịa – Vũng Tàu phê duyệt Bên cạnh nhằm giúp cho người học kiến thức kỹ cần thiết để thiết kế lập trình ứng dụng nhỏ sống ngày Tác giả nghiên cứu số tài liệu, trang web liên quan kết hợp với kinh nghiệm làm việc, giảng dạy thực tế để biên soạn giáo trình Trong giáo trình bao gồm sau: Bài 1: Tổng quan WPF Bài 2: Bố trí giao diện Bài 3: Sử dụng điều khiển Bài 4: Tạo hộp chọn font chữ Bài 5: Tạo hộp chọn hình ảnh Bài 6: Sử dụng Expander Bài 7: Tạo hộp soạn thảo văn Bài 8: Tạo menu Bài 9: Tạo ToolBar Bài 10: Tạo ContextMenu Bài 11: Tạo StatusBar Bài 12: Sử dụng Style Bài 13: Sử dụng Template Bài 14: Truy xuất sở liệu Với tiêu chí trình bày động, dễ hiểu áp dụng thực tế, kèm theo chi tiết bước hướng dẫn thực hành cụ thể giúp cho người học dễ tiếp thu kiến thức cần thiết hình thành kỹ thực hành rèn luyện thao tác Trong trình biên soạn, chắn giáo trình cịn nhiều thiếu sót Tác giả mong nhận ý kiến đóng góp q thầy/cơ em sinh viên để tiếp tục hoàn thiện Xin chân thành cảm ơn quý đồng nghiệp, bạn bè có ý kiến đóng góp trình xây dựng giáo trình Bà Rịa – Vũng Tàu, ngày …… tháng …… năm 2020 Tham gia biên soạn Trần Thị Thanh Hương – Chủ biên MỤC LỤC GIÁO TRÌNH MƠ ĐUN Tên mơ đun: Lập trình ứng dụng WPF Mã mơ đun: MĐ 24 Vị trí, tính chất, ý nghĩa vai trị mơ đun: - Vị trí mơ đun: bố trí sau học xong mơn sở Lập trình Windows - Tính chất mơ đun: mơ đun nghề tự chọn trình độ Cao đẳng nghề Công nghệ Thông tin, cung cấp kiến thức kỹ tạo ứng dụng WPF với giao diện chuyên nghiệp - Ý nghĩa vai trị mơn học/mơ đun: Môn học giúp làm quen với ứng dụng WPF, thực hành giao diện lập trình ứng dụng nhỏ như: quản lý quán café, quản lý khách sạn, quản lý nhân viên, quản lý sinh viên… Mục tiêu mô đun: - Về kiến thức: + Biết ưu điểm XAML, WPF phát triển ứng dụng Windows + Biết quy trình tạo project WPF + Biết cơng dụng loại panel, control WPF + Trình bày cơng dụng Menu, Toolbar, ContextMenu, StatusBar + Trình bày cơng dụng quy trình sử dụng Style, Template + Biết quy truy xuất CSDL WPF - Về kỹ năng: + Tạo project WPF + Sử dụng hợp lý loại panel, control thiết kế giao diện cho ứng dụng WPF + Tạo Menu, Toolbar, ContextMenu, StatusBar cho ứng dụng + Sử dụng Style Control Template cho giao diện + Sử dụng Data Template hiển thị liệu + Truy xuất CSDL WPF - Về lực tự chủ trách nhiệm: + Lưu solution, project đường dẫn + Tự phát triển ứng dụng với giao diện chuyên nghiệp + Tham gia phát triển ứng dụng quản lý cho tổ chức, doanh nghiệp, công ty phần mềm + Rèn luyện nâng cao kỹ lập trình theo cơng nghệ đại 11 + Vận dụng ngôn ngữ XAML việc tự học thiết kế giao diện cho ứng dụng di động + Thực thực hành đảm bảo trình tự, an tồn Nội dung mơ đun: 13 BÀI 1: GIỚI THIỆU TỔNG QUAN Mã bài: 24.01 Giới thiệu: Windows Presentation Foundation hay gọi tắt WPF – tảng cho phép developer tạo ứng dụng NET framework cho Windows nói chung Cũng gọi WPF GUI framework Nó đời sau Winform tốt người tiền nhiệm mặt Mục tiêu: - Trình bày khái mục tiêu WPF - Trình bày khái niệm vai trị XAML việc tạo môi trường làm việc chung người thiết kế giao diện người lập trình - Tạo ứng dụng WPF đơn giản - Đảm bảo quy tắc thẻ mở, đóng - Lưu project, Solution đường dẫn Nội dung chính: 1.1 Khái niệm WPF WPF, viết tắt Windows Presentation Foundation, hệ thống API hỗ trợ việc xây dựng giao diện đồ hoạ Windows Được xem hệ WinForms, WPF tăng cường khả lập trình giao diện lập trình viên cách cung cấp API cho phép tận dụng lợi đa phương tiện đại Là phận NET Framework 3.0, WPF sẵn có Windows Vista Windows Server 2008 Đồng thời, WPF hoạt động Windows XP Service Pack hơn, Windows Server 2003 WPF xây dựng nhằm vào ba mục tiêu bản:  Cung cấp tảng thống để xây dựng giao diện người dùng;  Cho phép người lập trình người thiết kế giao diện làm việc cách dễ dàng; Cung cấp công nghệ chung để xây dựng giao diện người dùng  Windows trình duyệt Web  Trước WPF đời, việc tạo giao diện người dùng theo yêu cầu mô tả ví dụ địi hỏi sử dụng nhiều cơng nghệ khác (xem 15 Bảng 2.1) Để tạo form, control tính kinh điển khác giao diện đồ họa Windows, thơng thường lập trình viên chọn Windows Forms, phần NET Framework Nếu cần hiển thị văn bản, Windows Forms có số tính hỗ trợ văn trực tiếp sử dụng Adobe’s PDF để hiển thị văn có khn dạng cố định Đối với hình ảnh đồ họa chiều, lập trình viên dùng GDI+, mơ hình lập trình riêng biệt truy nhập qua Windows Forms Để hiển thị video hay phát âm thanh, lập trình viên lại phải sử dụng Windows Media Player, với đồ họa chiều, lại phải dùng Direct3D, thành phần chuẩn khác Windows Tóm lại, q trình phát triển giao diện người dùng theo yêu cầu trở nên phức tạp, đòi hỏi lập trình viên q nhiều kỹ cơng nghệ Windows Forms Windows Forms/ GDI+ Giao diện đồ họa (form X control) On-screen văn X Fixed-format văn Hình ảnh X Video âm Đồ họa chiều X Đồ họa chiều Bảng 1.1 Thành phần giao diện theo yêu cầu công WPF X X X X X X X nghệ chuyên biệt cần thiết để tạo chúng 1.2 Các thành phần WPF Giống thành phần khác NET Framework, WPF tổ chức chức theo nhóm namespace trực thuộc namespace System.Windows Bất kể chức sử dụng, cấu trúc ứng dụng WPF gần Là ứng dụng Windows độc lập 17 275 BÀI 15: TRUY XUẤT CƠ SỞ DỮ LIỆU Mã bài: 24.15 Giới thiệu: Điều khiển giúp hiển thị liệu dạng thư mục thu hẹp mở rộng đối tượng Visual Studio phát triển ListView TreeView Mục tiêu: - Trình bày quy trình tạo ADO.NET Entity Data Model - Trình bày lớp đối tượng bên Entity Data Model - Biết quy trình đọc, thêm, xóa, sửa liệu theo Entity Data Model - Hiển thị danh sách liệu Window - Thêm, xóa, sửa liệu - Đảm bảo an tồn cho người thiết bị Nội dung chính: 15.1 Tạo ADO.NET Entyty Data Model Tạo sở liệu SQL Server với CSDL tên QLTHUVIEN sau: go if exists(select name from sysdatabases where name='QLTHUVIEN') drop Database QLTHUVIEN /* Tạo sở liệu*/ go Create Database QLTHUVIEN go 277 use QLTHUVIEN go /*=============DANH MUC HỆ ĐÀO TẠO ==============*/ Create table HEDAOTAO ( MAHE char(5)primary key, TENHE nvarchar(100) not null, ) /*==============DANH MUC SINHVIEN ============*/ Create table SINHVIEN ( MASV char(10) primary key, TENSV nvarchar(200)not null, NGAYSINH date, GIOITINH nvarchar(5), MAHE CHAR (5) references HEDAOTAO (MAHE) ) /*==============NHAP DU LIEU LOAIPHONG=============*/ INSERT INTO HEDAOTAO(MAHE,TENHE) values('CD',N'Cao đẳng') INSERT INTO HEDAOTAO(MAHE,TENHE) 279 values('TC',N'Trung cấp') INSERT INTO HEDAOTAO(MAHE,TENHE) values('SC',N'Sơ cấp') /*==============NHAP DU LIEU PHONG=============*/ INSERT INTO SINHVIEN(MASV,TENSV,NGAYSINH,GIOITINH,MAHE) values('SV01',N'Nguyễn Văn An', '01/02/2004', 'Nam', 'CD') INSERT INTO SINHVIEN(MASV,TENSV,NGAYSINH,GIOITINH,MAHE) values('SV02',N'Trần Đình Bốn', '04/05/2003', 'Nam', 'CD') INSERT INTO SINHVIEN(MASV,TENSV,NGAYSINH,GIOITINH,MAHE) values('SV03',N'Lương Xuân Trường', '11/02/2002', 'Nam', 'TC') INSERT INTO SINHVIEN(MASV,TENSV,NGAYSINH,GIOITINH,MAHE) values('SV04',N'Nguyễn Thị Ngọc Anh', '09/08/2002', N'Nữ', 'CD') INSERT INTO SINHVIEN(MASV,TENSV,NGAYSINH,GIOITINH,MAHE) values('SV05',N'Trịnh Thị Mến', '09/13/2004', N'Nữ', 'TC') INSERT INTO SINHVIEN(MASV,TENSV,NGAYSINH,GIOITINH,MAHE) values('SV06',N'Trương Tiến Đạt', '02/04/2004', 'Nam', 'TC') Để cài đặt Entity NetFrameWork cần tiến hành sau: Bước 1: Tạo Project Bước 2: Chọn menu Project > Manage NuGet Packages xuất cửa sổ sau: Hình 15.1 Màn hình để lựa chọn cài đặt Entity NetFrameWork Bước 3: Trong NuGet Package Manager, nhấp chọn liên kết Browse 281 Hình 15.2 Màn hình để cài đặt Entity NetFrameWork Bước 4: Nhập vào chữ entity để tìm kiếm lựa chọn sau nhấn vào Install Sau cài đặt xong tiến hành tạo Model sau: Solution Explorer and choose Add > New Item In the left pane, under the C# node, choose Data and in the middle pane, choose ADO.NET Entity Data Model Hình 15.3 Thêm Model 283 285 Hình 15.4 Màn hình chọn kết nối CSDL Hình 15.5 Màn hình lựa chọn kết nối sẵn có 287 Hình 15.6 Lựa chọn tên Server CSDL Hình 15.7 Lựa chọn đối tượng làm việc 289 Hình 15.8 Hoàn thành việc tạo Model Entity NetFrameWork 15.2 Giới thiệu lớp đối tượng Tạo lớp đối tượng Data Access Object để kết nối đến CSDL QLTHUVIEN 291 Tạo lớp đối tượng BUS (Business) để thao tác với bảng liệu 15.3 Hiển thị liệu ListBox/ComboBox Viết hàm để đưa liệu lên bảng từ câu lệnh truy vấn SQL với tham số truyền vào “string sql” Gọi hàm load liệu đưa liệu lên Combo: 293 15.4 Hiển thị liệu DataGrid Đoạn code để hiển thị liệu lên DataGrid Đoạn code nhấp chọn vào DataGrid liệu hiển thị lên điều khiển Form 15.5 Thêm, xóa, cập nhật liệu Nút thêm thơng tin sinh viên 295 Nút sửa thơng tin sinh viên Nút xóa thông tin sinh viên Câu hỏi ôn tập tập Thiết kế Form có giao diện mẫu sau: 297 Hình 15.8 Form sử dụng ListView Yêu cầu: Dùng ListView hình ảnh phù hợp để thiết kế Form Thiết kế Form có giao diện mẫu sau: Hình 15.9 Form sử dụng ListView có CheckBox u cầu: Dùng ListView có Checkbox hình ảnh phù hợp để thiết kế Form 299 Thiết kế Form có giao diện mẫu sau: Hình 15.10 Form sử dụng ListView kết hợp TreeView Yêu cầu: - Dùng ListView, TreeView hình ảnh phù hợp để thiết kế Form - Phương thức tốn gồm: Trả góp, Khoán gọn Bảo hiểm - Người dùng nhấn chọn xe cần mua ListView, hai điều khiển NumericUpdown Số lượng: Thơng tin mua hàng: kích hoạt cho người dùng nhập số lượng thông tin mua hàng - Khi đặt hàng xong, người dùng nhấn vào button Lưu để lưu lại thông tin mua hàng Thơng tin mua hàng hiển thị MessageBox Hình 15.11 Hộp thoại thông báo thông tin mua hàng 301 TÀI LIỆU THAM KHẢO [1] Trang: https://wpf-tutorial.com/vi [2] Trang: https://stackoverrun.com/vi [3] Trang: https://www.w3schools.com/cs/ [4] Trang: https://techtalk.vn/ [5] Windows Presentation Foundation, URL: http://msdn.microsoft.com/enus/library/ms754130.aspx [6] Nguyễn Hoàng Hà – Nguyễn Văn Trung, Giáo trình C# ứng dụng, Khoa Cơng nghệ thơng tin, Đại học Huế [7] Dương Quang Thiện, C# NET Framework – Lập trình Visual C# nào?, Nhà xuất tổng hợp TPHCM [8] Nguyễn Ngọc Bình Phương – Thái Thanh Phong, Các giải pháp lập trình C#, NXB Giao thông vận tải [9] Phạm Phương Hoa – Vũ Trọng Luật – Phạm Quang Hiển, Lập trình với C# xây dựng ứng dụng, NXB Thanh niên 303 ... mơ đun: - Vị trí mơ đun: bố trí sau học xong mơn sở Lập trình Windows - Tính chất mơ đun: mơ đun nghề tự chọn trình độ Cao đẳng nghề Công nghệ Thông tin, cung cấp kiến thức kỹ tạo ứng dụng WPF. .. bị nghiêm cấm LỜI GIỚI THIỆU Giáo trình Lập trình ứng dụng WPF biên soạn dựa khung chương trình đào tạo Cao đẳng nghề Công nghệ Thông tin Trường Cao đẳng Kỹ thuật Công nghê Bà Rịa – Vũng Tàu phê... chức sử dụng, cấu trúc ứng dụng WPF gần Là ứng dụng Windows độc lập 17 XBAP, ứng dụng WPF điển hình gồm tập trang XAML phần code tương ứng viết C# Visual Basic, gọi file code-behind Tất ứng dụng