Giao diện đồ họa (GUI) với WPF Mục đích, yêu cầu: Bài này giới thiệu tổng quan về ứng dụng GUI và công nghệ Windows Presentation Foundation (WPF), giới thiệu cách tạo lập và sử dụng các Control cơ bản và nâng cao của cửa sổ xây dựng bằng công nghệ WPF. Sau khi học xong bài này sinh viên có thể tạo được một số ứng dụng cụ thể sử dụng WPF. Hình thức tổ chức dạy học: Lý thuyết, trực tuyến + trực tiếp + tự học Thời gian: Lý thuyết(online: 03, offline: 03) Tự học, tự nghiên cứu: 05 Nội dung: 1. Ứng dụng GUI ......................................................................................................2 1.1. GUI là gì?....................................................................................................2 1.2. Những thành phần của GUI.........................................................................2 1.3. Làm thế nào người dùng tương tác với GUI?...............................................5 1.4. Một số ví dụ về GUI....................................................................................5 2. Công nghề WPF....................................................................................................7 2.1. Giao diện người dùng hiện đại và những thách thức ....................................7 2.2. WPF là gì? ..................................................................................................8 2.3. Các thành phần của WPF...........................................................................14 2.4. Công cụ phát triển WPF ............................................................................20 2.5. Ứng dụng đầu tiên với WPF – Hello World...............................................21 3. Bố trí giao diện trong ứng dụng WPF..................................................................24 3.1. Giới thiệu chung........................................................................................24 3.2. Các dạng Panel thông dụng .........................
HỌC PHẦN: LẬP TRÌNH NET Bài Giao diện đồ họa (GUI) với WPF - Mục đích, yêu cầu: Bài giới thiệu tổng quan ứng dụng GUI công nghệ Windows Presentation Foundation (WPF), giới thiệu cách tạo lập sử dụng Control nâng cao cửa sổ xây dựng công nghệ WPF Sau học xong sinh viên tạo số ứng dụng cụ thể sử dụng WPF - Hình thức tổ chức dạy học: Lý thuyết, trực tuyến + trực tiếp + tự học - Thời gian: Lý thuyết(online: 03, offline: 03) Tự học, tự nghiên cứu: 05 - Nội dung: Ứng dụng GUI 1.1 GUI gì? 1.2 Những thành phần GUI 1.3 Làm người dùng tương tác với GUI? 1.4 Một số ví dụ GUI Công nghề WPF 2.1 Giao diện người dùng đại thách thức 2.2 WPF gì? 2.3 Các thành phần WPF 14 2.4 Công cụ phát triển WPF 20 2.5 Ứng dụng với WPF – Hello World 21 Bố trí giao diện ứng dụng WPF 24 3.1 Giới thiệu chung 24 3.2 Các dạng Panel thông dụng 25 Các điều khiển WPF 31 4.1 Tổng quan tạo lập điều khiển với WPF 31 4.2 Các điều khiển WPF 33 4.3 Ví dụ xây dựng control WPF 41 Các điều khiển nâng cao WPF 45 5.1 Hộp lựa chọn phông chữ (Font Chooser) 45 5.2 Hộp danh mục ảnh (Image ListBox) 46 5.3 Hộp mở rộng (Expander) 48 5.4 Hộp soạn văn đa (RichTextBox) 50 Tài liệu tham khảo 52 Học kết hợp Trang HỌC PHẦN: LẬP TRÌNH NET 1.Ứng dụng GUI 1.1 GUI gì? GUI, viết tắt cụm từ Graphical User Interface, tạm dịch giao diện đồ họa người dùng Đây thuật ngữ ám cách giao tiếp người dùng với thiết bị máy tính thơng qua thao tác với chữ viết hay hình ảnh, thay sử dụng câu lệnh phức tạp Nhờ vậy, tương tác người dùng thiết bị điện tử ngày đơn giản hơn, từ thúc đẩy phát triển ngành công nghiệp thiết bị thông minh điện thoại, máy tính bảng, 1.2 Những thành phần GUI 1.2.1 Thành phần cấu trúc nên GUI - Cửa sổ làm việc (Windows) Đây nơi chứa hết tất thơng tin mà người dùng tương tác với thiết bị Thông qua cửa sổ làm việc, người dùng tương tác cách nhấn chọn biểu tượng, ứng dụng hay kéo thả chúng đến vị trí Học kết hợp Trang HỌC PHẦN: LẬP TRÌNH NET - Menu Menu thành phần thường thấy GUI, người dùng thực lệnh để tương tác với máy tính thông qua danh sách lựa chọn mà phần mềm cung cấp cho bạn - Biểu tượng (Icon) Thông thường, biểu tượng hiển thị dạng hình ảnh, giúp cho người dùng tương tác nhanh với máy tính mở tài liệu, khởi chạy ứng dụng Trong số trường hợp, người dùng tìm kiếm tệp thơng qua biểu tượng ứng dụng, từ tiết kiệm thời gian - Widget Học kết hợp Trang HỌC PHẦN: LẬP TRÌNH NET Widget thành phần thuộc ứng dụng, mà bạn thực lệnh tương tác cụ thể với ứng dụng 1.2.2 Thành phần tương tác GUI - Con trỏ Đây thành phần giúp bạn định hướng vị trí bạn tương tác, chẳng hạn vị trí mà trỏ chuột bạn click hay vị trí mà bạn nhập liệu ký tự - Thao tác chọn Bạn thực thao tác chọn với thành phần có cửa sổ làm việc Tương tác chọn thực chuột, bàn phím, bút cảm ứng, - Thao tác kéo thả Thông thường, thao tác sử dụng để tương tác với tệp hay hình ảnh cửa sổ làm việc Học kết hợp Trang HỌC PHẦN: LẬP TRÌNH NET 1.3 Làm người dùng tương tác với GUI? Thông thường, người dùng sử dụng thiết bị chuột để điều khiển thao tác thiết bị Và năm gần với phát triển smartphone, thao tác cảm ứng sử dụng nhiều việc tương tác với GUI Ngoài ra, số GUI cho phép người dùng tương tác bàn phím, không rườm rà cách gõ lệnh, cách người sử dụng khơng tiện lợi thao tác cảm ứng hay dùng chuột 1.4 Một số ví dụ GUI - GNOME Shell GNOME Shell lần đầu giới thiệu vào năm 2011 với phiên thứ 3, viết dựa ngôn ngữ C JavaScript Giao diện áp dụng máy tính hay điện thoại, người dùng tương tác thơng qua chuột, bàn phím thao tác cảm ứng Học kết hợp Trang HỌC PHẦN: LẬP TRÌNH NET - Các ứng dụng đến từ Microsoft Một số phần mềm đến từ Microsoft Office mà bạn thường thấy Word, Excel hay Powerpoint trang bị GUI giúp cho người dùng dễ dàng thao tác việc nhập liệu liệu, kéo thả hình ảnh, - Trình duyệt Internet GUI áp dụng vào trình duyệt Internet Google Chrome hay Microsoft Edge, nhờ mà thao tác lệnh tìm kiếm Internet trở nên nhanh chóng Học kết hợp Trang HỌC PHẦN: LẬP TRÌNH NET Cơng nghề WPF 2.1 Giao diện người dùng đại thách thức Trong ứng dụng đại, giao diện người dùng trực quan chiếm vị trí quan trọng Việc trình diễn thơng tin, theo cách vào thời điểm đem lại giá trị kinh tế xã hội đáng kể Với ứng dụng thương mại, chẳng hạn ứng dụng bán hàng trực tuyến, việc cung cấp giao diện người dùng mạnh tạo nên khác biệt công ty với đối thủ cạnh tranh, góp phần làm tăng tăng doanh số giá trị thương hiệu hãng so với hãng khác Để có giao diện người dùng vậy, việc tích hợp đồ họa, media, văn thành phần trực quan khác thể thống đóng đóng vai trị mấu chốt Hãy xem xét ứng dụng cụ thể quản lý theo dõi bệnh nhân bệnh viện Với phát triển công nghệ đa phương tiện nay, yêu cầu giao diện người dùng cho hệ thống bao gồm: - Hiển thị hình ảnh text bệnh nhân - Hiển thị cập nhật hình ảnh chiều cho biết trạng thái bệnh nhân nhịp tim, huyết áp - Cung cấp hình ảnh chồng lớp chiều thông tin người bệnh - Trình diễn đoạn video siêu âm chẩn đốn khác, đó, cho phép bác sỹ hay y tá thêm vào ghi - Cho phép nhân viên bệnh viện đọc ghi tài liệu mơ tả bệnh nhân tình trạng người - Có khả hoạt động ứng dụng Windows, đó, nhân viên bệnh viện sử dụng đầy đủ tính năng, đồng thời chạy trình duyệt Web có giới hạn an ninh, cho phép bác sỹ truy nhập có hạn chế từ xa qua mạng Internet Với công nghệ từ trước năm 2006, giao diện Windows xây Học kết hợp Trang HỌC PHẦN: LẬP TRÌNH NET dựng được, nhiên, gặp khơng khó khăn số ngun nhân sau: - Có nhiều công nghệ khác sử dụng để làm việc với hình ảnh âm video.Tì m lập trình viên có khả sử dụng tốt nhiều cơng nghệ khơng dễ chi phí cao cho trình phát triển bảo trì ứng dụng - Thiết kế giao diện biểu diễn có hiệu tất tính thách thức Nó địi hỏi phải có người thiết kế giao diện chuyên nghiệp, lập trình viên phần mềm đơn khơng có đủ kỹ cần thiết Điều lại dẫn tới khó khăn phát sinh người thiết kế người lập trình làm việc chung - Việc cung cấp giao diện đầy đủ tính năng, hoạt động ứng dụng Windows riêng biệt máy desktop, đồng thời truy nhập thơng qua trình duyệt địi hỏi phải xây dựng hai phiên độc lập sử dụng hai công nghệ khác Ứng dụng Windows desktop sử dụng Windows Forms công nghệ Windows khác, ứng dụng trình duyệt lại sử dụng HTML JavaScript Do đó, cần phải có hai nhóm phát triển với hai phần kỹ khác WPF đời để xây dựng tảng chung giải thách thức nêu 2.2 WPF gì? 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: 1) Cung cấp tảng thống để xây dựng giao diện người dùng; 2) 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; 3) Cung cấp công nghệ chung để xây dựng giao diện người dùng Windows trình duyệt Web 2.2.1 Nền tảng thống để xây dựng giao diện người dùng 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 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 Học kết hợp Trang HỌC PHẦN: LẬP TRÌNH NET 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ệ Bảng 9.1 – Thành phần giao diện theo yêu cầu công nghệ chuyên biệt cần thiết để tạo chúng WPF giải pháp hợp nhằm giải tất vấn đề công nghệ nêu trên, hay nói cách khác, WPF cung cấp nhiều tính lập trình giao diện cơng nghệ đơn Điều giúp cho trình tạo giao diện người dùng trở nên dễ dàng đáng kể Hình 9.2 cho thấy giao diện quản lý theo dõi bệnh nhân có kết hợp hình ảnh, text, đồ họa chiều/3 chiều nhiều thông tin trực quan khác Tất tạo WPF – lập trình viên khơng cần viết code để sử dụng công nghệ chuyên biệt GDI+ hay Direct3D Học kết hợp Trang HỌC PHẦN: LẬP TRÌNH NET Hình 9.1 – Một giao diễn người dùng quản lý theo dõi bệnh nhân sử dụng WPF kết hợp hình ảnh, text, đồ họa chiều/3chiều nhiều tính trực quan khác Tuy nhiên, WPF đời khơng có nghĩa tất cơng nghệ nêu bị thay Windows Forms có giá trị, trí WPF, số ứng dụng sử dụng Windows Forms.Windows Media Player đóng vai trị cơng cụ độc lập để chơi nhạc trình chiếu video PDF cho văn tiếp tục sử dụng Direct3D công nghệ quan trọng games dạng ứng dụng khác (Trong thực tế, thân WPF dựa Direct3D để thực biểu diễn đồ họa) Việc tạo giao diện người dùng đại không việc hợp cơng nghệ sẵn có khác Nó cịn thể việc tận dụng lợi điểm card đồ họa đại Để giải phóng hạn chế đồ họa bitmap, WPF dựa hoàn toàn đồ họa vector, cho phép hình ảnh tự động thay đổi kích thước để phù hợp với kích thước độ phân giải hình mà hiển thị Bằng việc hợp tất công nghệ cần thiết để tạo giao diện người dùng vào tảng đơn nhất, WPF đơn giản hóa đáng kể cơng việc lập trình viên giao diện Với việc yêu cầu lập trình viên học mơi trường phát triển nhất, WPF góp phần làm giảm chi phí cho việc xây dựng bảo trì ứng dụng Và việc cho phép tích hợp đa dạng nhiều cách biểu diễn thông tin trêngi ao diện người dùng, WPF góp phần nâng cao chất lượng, theo giá trị cơng việc, cách thức người dùng tương tác với ứng dụng Windows 2.2.2 Khả làm việc chung người thiết kế giao diện lập trình viên Trong thực tế, việc xây dựng giao diện người dùng phức hợp ví dụ ứng dụng quản lý bệnh nhân địi hỏi kỹ thấy lập trình viên Học kết hợp Trang 10