Lập trình hướng đối tượng - Tổng quan về windows representation

Bài mở đầu TỔNG QUAN VỀ WINDOWS REPRESENTATION FOUNDATION Bài này giới thiệu tổng quan về công nghệ Windows Presentation Foundation (WPF). Phần đầu nói về những thách thức trong việc xây dựng giao diện người dùng hiện đại, từ đó dẫn đến sự ra đời của công nghệ WPF, công nghệ xây dựng giao diện mới của Microsoft. Sau đó sẽ giới thiệu những khái niệm, mục tiêu căn bản và các thành phần quan trọng của WPF. Phần cuối sẽ giới thiệu các công cụ cần thiết để phát triển ứng dụng WPF và giúp học viên làm quen với WPF bằng việc hướng dẫn phát triển một ứng dụng đơn giản cụ thể. Giao diện người dùng hiện đại và những thách thức Trong các ứng dụng hiện đại, giao diện người dùng trực quan chiếm vị trí hết sức quan trọng. Việc trình diễn đúng thông tin, theo đúng cách và vào đúng thời điểm có thể đem lại những giá trị kinh tế xã hội đáng kể. Với những ứng dụng thương mại, chẳng hạn một ứng dụng bán hàng trực tuyến, việc cung cấp một giao diện người dùng mạnh có thể tạo nên sự khác biệt giữa một công ty với các đối thủ cạnh tranh, góp phần làm tăng tăng doanh số và giá trị thương hiệu của hãng này so với hãng khác. Để có được một giao diện người dùng như vậy, việc tích hợp đồ họa, media, văn bản và các thành phần trực quan khác như một thể thống nhất đóng đóng vai trò mấu chốt. Hãy xem xét một ứng dụng cụ thể trong quản lý và theo dõi bệnh nhân của một bệnh viện nào đó. Với sự phát triển của công nghệ đa phương tiện hiện nay, yêu cầu về giao diện người dùng cho hệ thống mới này sẽ bao gồm: - Hiển thị hình ảnh và text về bệnh nhân. - Hiển thị và cập nhật hình ảnh 2 chiều cho biết trạng thái của bệnh nhân như nhịp tim, huyết áp. - Cung cấp hình ảnh chồng lớp 3 chiều về thông tin của người bệnh. - Trình diễn những đoạn video siêu âm và những chẩn đoán khác, trong đó, cho phép bác sỹ hay y tá thêm vào các ghi chú. - Cho phép nhân viên bệnh viện đọc và ghi chú trên những tài liệu mô tả về bệnh nhân và tình trạng của người đó. Microsoft Vietnam – DPE Team |WPF – Bài mở đầu: Tổng quan về WPF 2 - Có khả năng hoạt động như một ứng dụng Windows, trong đó, các nhân viên bệnh viện đều được sử dụng đầy đủ các tính năng, đồng thời có thể chạy trên trình duyệt Web có giới hạn về an ninh, cho phép các 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, một giao diện như vậy trên Windows đã có thể xây dựng được, tuy nhiên, sẽ gặp không ít khó khăn bởi một số nguyên nhân chính sau: - Có rất nhiều công nghệ khác nhau được sử dụng để làm việc với hình ảnh âm thanh và video. Tìm được những lập trình viên có khả năng sử dụng tốt nhiều công nghệ như vậy không dễ và chi phí cao cho cả quá trình phát triển cũng như bảo trì ứng dụng. - Thiết kế một giao diện biểu diễn có hiệu quả tất cả những tính năng như vậy cũng là một thách thức. Nó đòi hỏi phải có những người thiết kế giao diện chuyên nghiệp, bởi lập trình viên phần mềm đơn thuần sẽ không có đủ các kỹ năng cần thiết. Điều này lại dẫn tới những khó khăn phát sinh khi người thiết kế và người lập trình làm việc chung. - Việc cung cấp một giao diện đầy đủ tính năng, hoạt động được như một ứng dụng Windows riêng biệt trên máy desktop, đồng thời có thể được truy nhập thông qua trình duyệt có thể đòi hỏi phải xây dựng hai phiên bản độc lập sử dụng hai công nghệ khác nhau. Ứng dụng Windows trên desktop sử dụng Windows Forms và các công nghệ thuần Windows khác, trong khi ứng dụng trên trình duyệt lại sử dụng HTML và JavaScript. Do đó, cần phải có hai nhóm phát triển với hai phần kỹ năng khác nhau. WPF ra đời chính là để xây dựng một nền tảng chung giải quyết những thách thức đã nêu trên. WPF là gì? WPF, viết tắt của Windows Presentation Foundation, là hệ thống API mới hỗ trợ việc xây dựng giao diện đồ hoạ trên nền Windows. Được xem như thế hệ kế tiếp của WinForms, WPF tăng cường khả năng lập trình giao diện của lập trình viên bằng cách cung cấp các API cho phép tận dụng những lợi thế về đa phương tiện hiện đại. Là một bộ phận của .NET Framework 3.0, WPF sẵn có trong Windows Vista và Windows Server 2008. Đồng thời, WPF cũng có thể hoạt động trên nền Windows XP Service Pack 2 hoặc mới hơn, và cả Windows Server 2003. WPF được xây dựng nhằm vào ba mục tiêu cơ bản: 1) Cung cấp một nền tảng thống nhất để xây dựng giao diện người dùng; 2) Cho phép người lập trình và người thiết kế giao diện làm việc cùng nhau một cách dễ dàng; 3) Cung cấp một công nghệ chung để xây dựng giao diện người dùng trên cả Windows và trình duyệt Web. Microsoft Vietnam – DPE Team |WPF – Bài mở đầu: Tổng quan về WPF 3 1.1 Nền tảng thống nhất để xây dựng giao diện người dùng Trước khi WPF ra đời, việc tạo giao diện người dùng theo những yêu cầu mô tả ở ví dụ trên đòi hỏi sử dụng rất nhiều công nghệ khác nhau (xem Bảng 2.1). Để tạo form, các control và các tính năng kinh điển khác của một giao diện đồ họa Windows, thông thường lập trình viên sẽ chọn Windows Forms, một phần của .NET Framework. Nếu cần hiển thị văn bản, Windows Forms có một số tính năng hỗ trợ văn bản trực tiếp hoặc có thể sử dụng Adobe’s PDF để hiển thị văn bản có khuôn dạng cố định. Đối với hình ảnh và đồ họa 2 chiều, lập trình viên sẽ dùng GDI+, một mô hình lập trình riêng biệt có thể 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à với đồ họa 3 chiều, anh ta lại phải dùng Direct3D, một thành phần chuẩn khác của Windows. Tóm lại, quá 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 quá nhiều kỹ năng công nghệ. Windows Forms PDF Windows Forms/ GDI+ Windows Media Player Direct3D WPF Giao diện đồ họa (form và các control) x x On-screen văn bản x x Fixed-format văn bản x x Hình ảnh x x Video và âm thanh x x Đồ họa 2 chiều x x Đồ họa 3 chiều x x Bảng 0.1 – Thành phần giao diện theo yêu cầu và những công nghệ chuyên biệt cần thiết để tạo chúng. WPF là giải pháp hợp nhất nhằm giải quyết tất cả những vấn đề công nghệ nêu trên, hay nói cách khác, WPF cung cấp nhiều tính năng lập trình giao diện trong cùng một công nghệ đơn nhất. Điều này giúp cho quá trình tạo giao diện người dùng trở nên dễ dàng hơn đáng kể. Hình 2.2 cho thấy một giao diện quản lý và theo dõi bệnh nhân có sự kết hợp của hình ảnh, text, đồ họa 2 chiều/3 chiều và nhiều Microsoft Vietnam – DPE Team |WPF – Bài mở đầu: Tổng quan về WPF 4 thông tin trực quan khác. Tất cả đều được tạo ra bằng WPF – lập trình viên không cần viết code để sử dụng các công nghệ chuyên biệt như GDI+ hay Direct3D. Hình 0.1 – Một giao diễn người dùng quản lý và theo dõi bệnh nhân sử dụng WPF có thể kết hợp hình ảnh, text, đồ họa 2 chiều/3chiều và nhiều tính năng trực quan khác Tuy nhiên, WPF ra đời không có nghĩa là tất cả những công nghệ nêu trên bị thay thế. Windows Forms vẫn có giá trị, thậm trí trong WPF, một số ứng dụng mới vẫn sẽ sử dụng Windows Forms. Windows Media Player vẫn đóng một vai trò công cụ độc lập để chơi nhạc và trình chiếu video. PDF cho văn bản vẫn tiếp tục được sử dụng. Direct3D vẫn là công nghệ quan trọng trong games và các dạng ứng dụng khác (Trong thực tế, bản thân WPF dựa trên Direct3D để thực hiện mọi biểu diễn đồ họa). Việc tạo ra một giao diện người dùng hiện đại không chỉ là việc hợp nhất các công nghệ sẵn có khác nhau. Nó còn thể hiện ở việc tận dụng lợi điểm của card đồ họa hiện đại. Để giải phóng những hạn chế của đồ họa bitmap, WPF dựa hoàn toàn trê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 và độ phân giải của màn hình mà nó được hiển thị. Bằng việc hợp nhất tất cả các công nghệ cần thiết để tạo ra một giao diện người dùng vào một nền tảng đơn nhất, WPF đơn giản hóa đáng kể công việc của 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ột môi trường phát triển duy nhất, WPF góp phần làm giảm chi phí cho việc xây dựng và bảo trì ứng dụng. Và bằng việc cho phép tích hợp đa dạng nhiều cách biểu diễn thông tin trên Microsoft Vietnam – DPE Team |WPF – Bài mở đầu: Tổng quan về WPF 5 giao diện người dùng, WPF góp phần nâng cao chất lượng, và theo đó là giá trị công việc, của cách thức người dùng tương tác với ứng dụng trên Windows. 1.2 Khả năng làm việc chung giữa người thiết kế giao diện và lập trình viên Trong thực tế, việc xây dựng một giao diện người dùng phức hợp như trong ví dụ về ứng dụng quản lý bệnh nhân trên đòi hỏi những kỹ năng ít thấy ở những lập trình viên đơn thuần, mà chỉ có thể tìm thấy ở những người thiết kế giao diện chuyên nghiệp. Nhưng câu hỏi đặt ra là làm sao để người thiết kế và lập trình viên có thể làm việc cùng nhau? Thông thường, người thiết kế giao diện sử dụng một công cụ đồ họa để tạo ra những ảnh tĩnh về cách bố trí giao diện trên màn hình. Những hình ảnh này sau đó được chuyển tới lập trình viên với nhiệm vụ tạo ra mã trình để hiện thực hóa giao diện đã thiết kế. Đôi lúc vẽ ra một giao diện thì đơn giản với người thiết kế, nhưng để biến nó thành hiện thực có thể là khó khăn hoặc bất khả thi với lập trình viên. Hạn chế về công nghệ, sức ép tiến độ, thiếu kỹ năng, hiểu nhầm hoặc đơn giản là bất đồng quan điểm có thể khiến lập trình viên không đáp ứng được đầy đủ yêu cầu từ người thiết kế. Do vậy, điều cần thiết ở đây là một cách thức để hai nhóm công tác độc lập này có thể làm việc với nhau mà không làm thay đổi chất lượng của giao diện đã thiết kế. Để thực hiện được điều này, WPF đưa ra ngôn ngữ đặc tả eXtensible Application Markup Language (XAML). XAML định ra một tập các phần tử XML như Button, TextBox, Label, nhằm định nghĩa các đối tượng đồ họa tương ứng như nút bấm, hộp thoại, nhãn, và nhờ đó cho phép mô tả chính xác diện mạo của giao diện người dùng. Các phần tử XAML cũng chứa các thuộc tính, cho phép thiết lập nhiều tính chất khác nhau của đối tượng đồ họa tương ứng. Ví dụ, đoạn mã sau sẽ tạo ra một nút bấm màu đỏ có nhan đề “Bỏ qua”. No Mỗi phần tử XAML lại tương ứng với một lớp WPF, và mỗi thuộc tính của phần tử đó lại tương ứng với thuộc tính hay sự kiện của lớp này. Chẳng hạn, nút bấm màu đỏ trong ví dụ trên có thể tạo bằng C# code như sau: Button btn = new Button(); btn.Background = Brushes.Red; btn.Content = "No"; Nếu như mọi thứ có thể biểu diễn bằng XAML thì cũng có thể biểu diễn bằng đoạn mã, thì câu hỏi đặt ra là XAML có ý nghĩa gì? Câu trả lời là việc xây dựng các công cụ sinh và sử dụng các đặc tả Microsoft Vietnam – DPE Team |WPF – Bài mở đầu: Tổng quan về WPF 6 bằng XML dễ dàng hơn nhiều so với xây dựng một công cụ tương tự làm việc với đoạn mã. Bởi vậy, XAML mở ra một cách thức tốt hơn để lập trình viên và người thiết kế làm việc với nhau. Hình 2.3 minh họa quá trình này. Hình 0.2 – XAML hỗ trợ lập trình viên và người thiết kế làm việc chung. Người thiết kế có thể mô tả giao diện người dùng và tương tác với nó thông qua một công cụ, chẳng hạn như Microsoft Expression Interactive Designer. Chỉ tập trung vào việc định ra diện mạo và cảm quan cho giao diện đồ họa WPF, công cụ này sinh các đoạn mô tả giao diện thể hiện qua ngôn ngữ XAML. Lập trình viên sau đó sẽ nhập đoạn mô tả XAML đó vào môi trường lập trình, chẳng hạn như Microsoft Visual Studio. Thay vì lập trình viên phải tái tạo lại giao diện từ đầu dựa trên một ảnh tĩnh mà người thiết kế cung cấp, bản thân các đoạn XAML này sẽ được Microsoft Visual Studio biên dịch để tái tạo thành giao diện đồ họa đúng theo mô tả. Lập trình viên chỉ tập trung vào việc viết mã trình cho giao diện được sinh ra, chẳng hạn như xử lý các sự kiện, theo những chức năng đề ra của ứng dụng. Việc cho phép người thiết kế và lập trình viên làm việc chung như vậy sẽ hạn chế những lỗi phát sinh khi hiện thực hóa giao diện từ thiết kế. Thêm vào đó, nó còn cho phép hai nhóm công tác này làm việc song song, khiến mỗi bước lặp trong quy trình phát triển phần mềm ngắn đi và việc phản hồi được tốt hơn. Vì cả hai môi trường đều có khả năng hiểu và sử dụng XAML, ứng dụng WPF có thể chuyển qua lại giữa hai môi trường phát triển để sửa đổi hay bổ sung giao diện. Với tất cả những lợi điểm này, vai trò của người thiết kế trong việc xây dựng giao diện được đặt lên hàng đầu. 1.3 Công nghệ chung cho giao diện trên Windows và trên trình duyệt Web Trong thời đại bùng nổ của Internet, các ứng dụng Web ngày một phát triển. Việc trang bị giao diện người dùng với đầy đủ tính năng như một ứng dụng desktop sẽ thu hút nhiều người sử dụng;, và do Microsoft Vietnam – DPE Team |WPF – Bài mở đầu: Tổng quan về WPF 7 đó góp phần làm tăng giá trị doanh nghiệp. Tuy nhiên, như đã nêu trong phần đầu, với những công nghệ truyền thống, để phát triển một giao diện đồ họa vừa hoạt động trên desktop vừa trên trình duyệt Web, đòi hỏi phải sử dụng những công nghệ hoàn toàn khác nhau, giống như việc xây dựng hai giao diện hoàn toàn độc lập. Điều này tạo ra chi phí không cần thiết để phát triển giao diện. WPF là một giải pháp cho vấn đề này. Lập trình viên có thể tạo ra một ứng dụng trình duyệt XAML (XBAP) sử dụng WPF chạy trên Internet Explore. Trên thực tế, cùng đoạn code này có thể được dùng để sinh ứng dụng WPF chạy độc lập trên Windows. Hình 0.4 minh họa một ứng dụng dịch vụ tài chính hoạt động như một ứng dụng WPF độc lập. Trong khi đó, hình 0.4 minh họa giao diện của cùng ứng dụng chạy trên Internet Explore dưới dạng XBAP. Hình 0.3. Úng dụng WPF độc lập cung cấp dịch vụ tài chính chạy trong cửa sổ riêng. Microsoft Vietnam – DPE Team |WPF – Bài mở đầu: Tổng quan về WPF 8 Hình 0.4. Giao diện của cùng ứng dụng nêu trên dưới dạng một XBAP chạy trên Internet Explore. Như đã thấy trong Hình 0.4, phần giao diện của ứng dụng dạng XBAP được trình duyệt chia thành các frame thay vì chạy trên các cửa sổ riêng, ngoài ra, các chức năng đều được bảo toàn. Cùng một đoạn mã được sử dụng chung cho cả hai trường hợp sẽ làm giảm khối lượng công việc cần thiết để phát triển hai dạng giao diện. Thêm vào đó, sử dụng cùng một đoạn mã cũng có nghĩa là sử dụng cùng kỹ năng của lập trình viên. Do đó, lập trình viên chỉ cần có học một kiến thức chung là có thể sử dụng trong cả hai trường hợp. Một lợi điểm nữa của việc dùng chung công nghệ cho cả giao diện Windows và giao diện Web là người xây dựng ứng dụng không nhất thiết phải quyết định trước loại giao diện nào được sử dụng. Miễn là máy client đáp ứng được những yêu cầu hệ thống để chạy XBAP, một ứng dụng có thể cung cấp cả giao diện Windows và giao diện Web, mà chỉ sử dụng phần lớn những đoạn mã giống nhau. Mỗi ứng dụng XBAP được download khi cần từ một Web server, nên nó phải tuân theo những yêu cầu về an ninh khắt khe hơn đối với một ứng dụng Windows độc lập. Theo đó, XBAP chạy trong phạm vi sandbox an ninh do hệ thống an ninh truy nhập mã của .NET Framework cung cấp. XBAP chỉ chạy với các hệ thống Windows có cài đặt WPF và chỉ với Internet Explore phiên bản 6 và 7 trở lên. Microsoft Vietnam – DPE Team |WPF – Bài mở đầu: Tổng quan về WPF 9 3. Các thành phần của WPF Giống như các thành phần khác của .NET Framework, WPF tổ chức các chức năng theo một nhóm namespace cùng trực thuộc namespace System.Windows. Bất kể chức năng nào được sử dụng, cấu trúc cơ bản của mọi ứng dụng WPF đều gần như nhau. Là ứng dụng Windows độc lập hay là một XBAP, một ứng dụng WPF điển hình bao giờ cũng gồm một tập các trang XAML và phần code tương ứng được viết bằng C# hoặc Visual Basic, còn gọi là các file code-behind. Tất cả các ứng dụng đều kế thừa từ lớp chuẩn Application của WPF. Lớp này cung cấp những dịch vụ chung cho mọi ứng dụng, chẳng hạn như các biến lưu trữ trạng thái của ứng dụng, các phương thức chuẩn để kích hoạt hay kết thúc ứng dụng. Mặc dù WPF cung cấp một nền tảng thống nhất để tạo giao diện người dùng, những công nghệ mà WPF chứa đựng có thể phân chia thành những thành phần độc lập. Nhân của WPF là cơ chế tạo sinh đồ họa dựa trên vector và độc lập với độ phân giải nhằm tận dụng những lợi thế của phần cứng đồ họa hiện đại. WPF được mở rộng với các tập tính năng phát triển ứng dụng bao gồm XAML, các control, cơ chế móc nối dữ liệu, layout, đồ họa 2 chiều, ba chiều, hoạt họa, style, khuôn dạng mẫu, văn bản, media, text và in ấn. WPF nằm trong .NET Framework, nên ngoài ra, ứng dụng WPF có thể kết hợp các thành phần khác có trong thư viện lớp của .NET Framework. Hình 0.5. Các thành phần cơ bản của WPF Application Services Deployment Services Databinding USER INTERFACE SERVICES XAML Accessibility Property System Input & Eventing BASE SERVICES DOCUMENT SERVICES Packaging Services XPS Documents Animation 2D 3D Audio Imaging Text Video Effects Composition Engine MEDIA INTEGRATION LAYER Controls Layout W in d o w s P re se n ta ti o n F o u n d a ti o n X P S V ie w e r Microsoft Vietnam – DPE Team |WPF – Bài mở đầu: Tổng quan về WPF 10 Phần tiếp theo sẽ giới thiệu sơ lược những thành phần và khái niệm quan trọng của WPF. 3.1 Layout và Control Để sắp đặt các thành phần khác nhau trên giao diện, ứng dụng WPF sử dụng panel. Mỗi panel có thể chứa các thành phần con, bao gồm các control như nút bấm hay hộp thoại, hay bản than những panel khác. Những loại panel khác nhau cho phép sắp xếp thành phần con theo những cách khác nhau. Ví dụ, DockPanel cho phép các thành phần con có thể được đặt dọc theo cạnh của panel đó, trong khi Grid cho phép sắp đặt các thành phần con của nó trên một lưới tọa độ. Giống như bất kỳ một công nghệ giao diện người dùng nào, WPF cung cấp một số lượng lớn các control. Ngoài ra, người dùng có thể tùy ý định nghĩa các control theo ý mình. Các control chuẩn gồm Button, Label, TextBox, ListBox, Menu, Slider, hay phức tạp hơn có SpellCheck, PasswordBox Các sự kiện do người dùng tạo ra, như di chuyển chuột hay ấn phím, có thể được các control nắm bắt và xử lý. Trong khi các control và các thành phần giao diện khác có thể được đặc tả đầy đủ bằng XAML, các sự kiện bắt buộc phải được xử lý bằng mã trình. 3.2 Style và Template Giống như sử dụng Cascading Style Sheets (CSS) đối với HTML, việc định ra thuộc tính đồ họa cho các đối tượng giao diện một lần, rồi sau đó áp dụng lại cho các đối tượng khác cùng loại thường rất tiện lợi. WPF cũng cung cấp tính năng tương tự bằng việc sử dụng thành phần Style của XAML. Ví dụ, kiểu ButtonStyle có thể được định nghĩa như sau: Bất kỳ nút bấm nào sử dụng kiểu này sẽ có nền màu đỏ và sử dụng font chữ kích thước 16. Ví dụ: Click Here Một Style có thể được dẫn xuất từ một Style khác, thừa kế hoặc chồng lên những thuộc tính đã thiết lập. Mỗi style có thể định nghĩa các trigger cho phép tạo ra những hiệu ứng tương tác đặc biệt, chẳng hạn như khi lướt chuột qua nút bấm, nút bấm chuyển thành màu vàng. Microsoft Vietnam – DPE Team |WPF – Bài mở đầu: Tổng quan về WPF 11 WPF cũng hỗ trợ sử dụng template. Mỗi template tương tự như một style, và ở hai dạng: - Template cho dữ liệu: sử dụng thành phần DataTemplate của XAML để thiết lập một nhóm thuộc tính hiển thị của dữ liệu như màu sắc, phương thức căn lề... - Template cho control: sử dụng thành phần ControlTemplate của XAML để định ra diện mạo của một control. 3.3 Text Giao diện người dùng ít nhiều đều hiển thị chữ hay text. Đối với phần lớn mọi người, đọc text trên màn hình thường khó hơn đọc trên giấy in. Đó là do chất lượng hiển thị text trên màn hình kém hơn so với khi in ra giấy. WPF tập trung giải quyết vấn đề này, làm chất lượng text hiển thị trên màn hình tương đương trên giấy in. Cụ thể, WPF hỗ trợ các font chữ OpenType chuẩn, cho phép sử dụng các thư viện font đã có. WPF cũng hỗ trợ công nghệ font chữ mới ClearType, cho phép hiển thị các ký tự mịn hơn đối với mắt người, đặc biệt là trên màn hình tinh thể lỏng (LCD). Để nâng cao hơn nữa chất lượng hiển thị text, WPF cho phép một số công nghệ khác như chữ ghép, theo đó một nhóm ký tự được thay thế bằng một ảnh đơn nhất, tạo tâm lý thoải mái hơn khi đọc đối với người dùng. 3.4 Văn bản WPF hỗ trợ ba dạng văn bản: văn bản cố định (fixed), văn bản thích nghi (flow/adaptive) và văn bản XPS (XML Paper Specification). Kèm theo đó, WPF cũng cung cấp các dịch vụ để tạo, xem, quản lý, ghi chú, đóng gói và in ấn văn bản. Văn bản cố định trông không đổi bất kể chúng được hiển thị trên màn hình hay in ra máy in. Trong WPF, những văn bản dạng này được định nghĩa bằng phần tử FixedDocument trong XAML và được hiển thị bằng control DocumentViewer. Trong khi đó, văn bản thích nghi thường chỉ dùng để đọc trên màn hình, và có khả năng tự động thay đổi các thuộc tính hiển thị ảnh và text cho phù hợp với kích thước cửa số hay các yếu tố môi trường khác nhằm nâng cao chất lượng đọc cho người dùng. Văn bản thích nghi được định nghĩa bằng phần tử FlowDocument. Để hiển thị văn bản thích nghi, WPF sử dụng một số control khác nhau, chẳng hạn như FlowDocumentPageViewer, FlowDocumentScrollViewer, FlowDocumentReader Microsoft Vietnam – DPE Team |WPF – Bài mở đầu: Tổng quan về WPF 12 Hình 0.6. – Một minh họa về văn bản thích nghi trong WPF. Văn bản XPS xây dựng trên cơ sở văn bản bất động của WPF. XPS là một định dạng mở theo đặc tả XML, có khả năng sử dụng trên nhiều nền tảng khác nhau, được thiết kế nhằm tạo thuận lợi cho việc xây dựng, chia sẻ, in ấn và lưu trữ văn bản. Cũng như văn bản cố định, văn bản XPS được hiển thị bằng DocumentViewer. Hình 0.7. Một minh họa về văn bản XPS trong WPF. 3.5 Hình ảnh Trong WPF, hình ảnh được hiển thị nhờ control Image, ví dụ: <Image Width="200" Source="C:\Documents and Settings\All Users\Documents\My Pictures\Ava.jpg" /> Microsoft Vietnam – DPE Team |WPF – Bài mở đầu: Tổng quan về WPF 13 Control Image có thể hiển thị hình ảnh lưu trữ dưới nhiều khuôn dạng khác nhau, bao gồm JPEG, BMP, TIFF, GIF và PNG. Nó cũng có thể hiển thị hình ảnh dạng Windows Media Photo mới được sử dụng trong Windows Vista. Bất kể ở khuôn dạng nào, WPF sử dụng Windows Imaging Component (WIC) để tạo ra hình ảnh. Cùng với các codec dùng cho các khuôn dạng ảnh kể trên, WIC cũng cung cấp một nền tảng chung để bổ sung codec khác. 3.6 Video và Âm thanh Khi tốc độ của các bộ xử lý và truyền thông mạng ngày một nâng cao, video trở thành một phần tương tác lớn của người dùng với phần mềm. Người dùng cũng sử dụng nhiều thời gian để nghe nhạc và các dạng âm thanh khác trên máy tính. Do đó, WPF cung cấp tính năng hỗ trợ cả hai dạng media này thông qua phần tử MediaElement. Control này có thể chơi các định dạng video WMV, MPEG và AVI, và nhiều định dạng âm thanh khác nhau. Việc lập trình để chạy một đoạn video trở nên khá đơn giản, như trong ví dụ sau: <MediaElement Source="C:\Documents and Settings\All Users\Documents\ My Videos\Ruby.wmv" /> 3.7 Đồ họa hai chiều Trong 20 năm gần đây, việc tạo ra đồ họa hai chiều trên Windows dựa trên Graphics Device Interface (GDI) và phiên bản sau của nó GDI+. Các ứng dụng Windows Forms phải sử dụng chức năng này thông qua một namespace khác hoàn toàn, bởi bản thân Windows Forms không tích hợp đồ họa 2 chiều. Đối với đồ họa 3 chiều thì càng tồi hơn, Windows Forms phải dựa trên công nghệ hoàn toàn biệt lập là Direct3D. Với WPF, vấn đề trở nên đơn giản hơn nhiều. Cả đồ họa 2 chiều và 3 chiều đều có thể được tạo ra trực tiếp trong XAML hoặc trong code sử dụng thư viện WPF tương ứng. Đối với đồ họa 2 chiều, WPF định ra nhóm control của các khuôn hình (shapes) mà ứng dụng có thể sử dụng để tạo nên hình ảnh, gồm:  Line: vẽ đường thẳng qua 2 điểm.  Elllipse: vẽ ellipse.  Rectangle: vẽ chữ nhật.  Polygon: vẽ đa giác.  Polyline: vẽ đa giác mở.  Path: vẽ hình theo một đường bất kỳ. Microsoft Vietnam – DPE Team |WPF – Bài mở đầu: Tổng quan về WPF 14 Mỗi khuôn hình đều có các thuộc tính phong phú cho phép hiển thị với nhiều tính chất khác nhau: màu nền, màu biên Một đặc điểm quan trọng trong WPF là: vì mọi thứ đều được xây dựng trên một nền chung, việc kết hợp các đặc tính và đối tượng khác nhau, chẳng hạn, lồng một ảnh vào một hình chữ nhật, trở nên đơn giản. Điểm thú vị nữa là các đối tượng hình học này còn có thể thu nhận các sự kiện từ phía người dùng như một control, chẳng hạn sự kiện nhắp chuột. Ngoài ra, WPF cũng cung cấp một nhóm chức năng hình học khác, gọi là geometries, để làm việc với đồ họa hai chiều, như LineGeometry, RectangleGeometry, EllipseGeometry, và PathGeometry. Dạng hình học này có nhiều thuộc tính và chức năng tương tự như các khuôn hình đã nêu trên. Điểm khác biệt quan trọng nhất là các geometries không được dùng để hiển thị, chúng được dùng chủ yếu để tính toán hình học, ví dụ như để định ra các vùng miền, theo dõi vị trí bấm chuột... Thêm vào đó, WPF cung cấp lớp Transform cho phép thực hiện các biến đổi hình học như xoay, dịch chuyển, co giãn đối tượng đồ họa; hoặc cho phép thực hiện các hiệu ứng hoạt họa theo thời gian thông qua các lớp Animation và Timing. 3.8 Đồ họa ba chiều WPF hỗ trợ đồ họa 3 chiều bằng việc gói các lời gọi API của Direct3D, và do vậy, việc sử dụng chúng trở nên thống nhất và đơn giản hơn đáng kể. Để hiển thị đồ họa ba chiều, ứng dụng WPF sử dụng control Viewport3D. Để tạo ra các cảnh ba chiều, lập trình viên mô tả một hay nhiều mô hình, sau đó, phân định cách thức các mô hình này được chiếu sáng hay hiển thị. Như thường lệ, điều này được thực hiện bằng XAML, bằng code hay trộn cả hai. Để mô tả mô hình, WPF cung cấp lớp GeometryModel3D để tạo ra hình dạng của mô hình. Khi mô hình đã được định hình, diện mạo bên ngoài của nó có thể được điều khiển bằng việc phủ lên các vật liệu (material). Chẳng hạn, lớp SpecularMaterial cho phép tạo bóng trên bề mặt mô hình. Bất kể được làm từ vật liệu gì, một mô hình có thể được chiếu sáng theo nhiều cách. Lớp DirectionalLight cho phép ánh sáng tới từ một hướng xác định, trong khi lớp AmbientLight tạo ra ánh sáng đồng đều trên mọi vật trong cảnh. Cuối cùng, để định ra cách nhìn cảnh, lập trình viên phải định ra một camera. Ví dụ, PerspectiveCamera cho phép phân định khoảng cách từ vị trí nhìn tới vật thể và kiểu nhìn phối cảnh (tuân theo luật gần xa). Microsoft Vietnam – DPE Team |WPF – Bài mở đầu: Tổng quan về WPF 15 Hình 0.8. Tạo lập đối tượng đồ họa ba chiều với WPF. Xây dựng cảnh ba chiều trực tiếp bằng XAML hay mã trình đều không đơn giản. Do đó, chỉ nên dùng ứng dụng WPF để hiển thị cảnh ba chiều, việc xây dựng cảnh nên được thực hiện bằng những công cụ đồ họa chuyên biệt. 3.9 Móc nối dữ liệu Phần lớn các ứng dụng được tạo ra đều cung cấp cho người dùng phương tiện để xem và sửa đổi dữ liệu. Trong các ứng dụng WPF, việc lưu trữ và truy xuất dữ liệu đã được thực hiện bởi các công nghệ như Microsoft SQL Server và ADO.NET. Sau khi dữ liệu được truy xuất và tải vào các đối tượng quản lý dữ liệu trên ứng dụng, phần việc khó khăn của ứng dụng WPF mới bắt đầu. Về cơ bản, có hai công việc phải thực hiện: 1) Sao chép dữ liệu từ các đối tượng quản lý dữ liệu vào các control trên giao diện, qua đó, dữ liệu có thể được hiển thị hay sửa đổi. 2) Đảm bảo rằng những thay đổi trên dữ liệu từ các control được cập nhật trở lại các đối tượng quản lý dữ liệu. Để đơn giản hóa quá trình phát triển ứng dụng, WPF cung cấp một cơ chế móc nối dữ liệu để thực hiện tự động những bước này. Phần nhân của cơ chế móc nối dữ liệu là lớp Binding mà nhiệm vụ của nó là liên kết control trên giao diện (đích) với đối tượng quản lý dữ liệu (nguồn). Mối quan hệ này được minh họa trong hình dưới đây: Microsoft Vietnam – DPE Team |WPF – Bài mở đầu: Tổng quan về WPF 16 Hình 0.9. Quan hệ giữa đối tượng dữ liệu và đối tượng phụ thuộc. Việc hỗ trợ móc nối dữ liệu được xây dựng ngay từ nhân của WPF. Tất cả các đối tượng đồ họa trong WPF đều kế thừa từ DependencyObject, chúng là các đối tượng phụ thuộc. Chức năng mà lớp cơ sở này hỗ trợ cho phép thực hiện hiệu ứng hoạt họa, tạo kiểu mẫu (styling) và móc nối dữ liệu. Các đối tượng này đều mang một thuộc tính đặc biệt gọi là DependencyProperty, thuộc tính phụ thuộc. Phần lớn các thuộc tính hay dùng như Text, Content, Width, Height, vân vân đều là các thuộc tính phụ thuộc. Tất cả các thuộc tính phụ thuộc đều có thể tạo hiệu ứng hoạt họa, tạo kiểu và kết nối dữ liệu. Cơ chế móc nối dữ liệu trong WPF còn cung cấp thêm những tính năng như xác thực tính hợp lệ, sắp xếp, lọc và phân nhóm dữ liệu. Thêm vào đó, tính năng móc nối dữ liệu cũng hỗ trợ sử dụng khuôn mẫu dữ liệu (data template) để tạo ra các đối tượng giao diện tùy biến có kết nối dữ liệu, khi các control chuẩn không phù hợp. Móc nối dữ liệu và khuôn dạng dữ liệu có thể được coi là tính năng mạnh nhất của WPF. 4. Công cụ phát triển WPF Như đã trình bày ở trên, WPF cung cấp rất nhiều tính năng cho những lập trình viên. Tuy nhiên, một công nghệ dù có hữu dụng đến đâu cũng cần một công cụ và môi trường tốt để phát huy những lợi điểm của nó. Đối với WPF, Microsoft cung cấp một công cụ chuyên dùng cho lập trình viên, và một công cụ khác phục vụ người thiết kế giao diện. Phần dưới đây đề cập ngắn gọn về những công cụ này. 4.1 Microsoft Visual Studio - Công cụ cho lập trình viên Visual Studio là công cụ chủ đạo của Microsoft dành cho lập trình viên phần mềm. Microsoft cung cấp thành phần mở rộng cho Visual Studio 2005 cho phép lập trình viên có thể tạo ra các ứng dụng WPF. Phiên bản tiếp theo của Visual Studio (2008) có bổ sung thêm các tính năng phát triển ứng dụng WPF, trong đó bao gồm Visual Designer, môi trường thiết kế giao diện cho WPF. Sử dụng công cụ này, lập trình viên có thể tạo ra giao diện WPF một cách trực quan, trong khi sản sinh các đặc tả XAML tương ứng một cách tự động. Microsoft Vietnam – DPE Team |WPF – Bài mở đầu: Tổng quan về WPF 17 4.2 Microsoft Expression Design – Công cụ cho người thiết kế Như đã giới thiệu trong phần trước, mục tiêu cơ bản của WPF là nâng cao vị thế của người thiết kế trong việc tạo giao diện người dùng. Để đạt mục tiêu này, ngoài XAML là công nghệ cốt lõi, Microsoft cũng đưa ra một công cụ mới cho phép người thiết kế làm việc thuận tiện hơn, đó là Microsoft Expression Design (Hình 0.10). Hình 0.10. Giao diện của công cụ Microsoft Expression Design. Microsoft Expression Design cung cấp những tính năng truyền thống của một công cụ thiết kế, cho phép người dùng làm việc theo cách quen thuộc. Ngoài ra, công cụ này đặc biệt tập trung vào việc hỗ trợ tạo giao diện cho các ứng dụng WPF. Tất cả các tính năng WPF mô tả ở trên đều sẵn có trong môi trường thiết kế này, và cho phép người dùng thiết kế một cách trực quan. Kết quả thiết kế được biểu diễn dưới dạng file XAML do công cụ này sinh ra, và sau đó có thể được nhập vào môi trường Visual Studio. Microsoft Vietnam – DPE Team |WPF – Bài mở đầu: Tổng quan về WPF 18 5. Ứng dụng đầu tiên với WPF – Hello World Phần này giúp các bạn làm quen với lập trình WPF thông qua một ví dụ kinh điển: Hello World. Ứng dụng chỉ bao gồm một nút bấm có nhãn ban đầu là Hello World. Khi nhắp chuột vào nút, nút sẽ đổi tên thành “From Hanoi, Vietnam”. Môi trường lập trình ở đây là bộ Visual Studio 2008 với .NET Framework 3.5. Quy trình thực hiện như sau: 5.1 Tạo ứng dụng WPF Ở đây, ta chú ý chọn .Net Framework 3.5. Giao diện thiết kế ứng dụng: Microsoft Vietnam – DPE Team |WPF – Bài mở đầu: Tổng quan về WPF 19 Chúng ta sẽ làm 2 phương pháp, một là viết code C# trực tiếp trong ứng dụng, hai là viết bằng mã XAML. 5.2 Tạo ứng dụng Hello World bằng code C# Khai báo Button trong lớp Window1. Lớp Button được tạo ra từ namespace: System.Windows.Controls; namespace Helloworld { public partial class Window1:Window { // khai báo 1 button Button button; public Window1() { InitializeComponent(); } } } Ở phương thức khởi tạo, ta sẽ lần lượt đặt thuộc tính cho nút bấm: Microsoft Vietnam – DPE Team |WPF – Bài mở đầu: Tổng quan về WPF 20 //tạo mới button button = new Button(); //xác định thuộc tính cho button button.Content = "Hello World"; button.LayoutTransform = new ScaleTransform(3, 3); button.Margin = new System.Windows.Thickness(10); //thêm phương thức xử lý sự kiện Click cho button button.Click += new RoutedEventHandler(button_Click); //đưa button vao Window this.Content = button; Để tạo phương thức xử lý sự kiện Click cho button, chúng ta chỉ thêm lệnh button.Click += và nhấn Tab 2 lần. Code tự sinh ra như sau: void button_Click(object sender, RoutedEventArgs e) { // xử lý button khi người dùng click } Trong phương thức này, ta thêm vào dòng lệnh: button.Content = "From Hanoi, Vietnam";//đổi nội dung (caption) của button Nhấn F5 để biên dịch project và chạy kết quả. 5.3 Tạo ứng dụng Hello World bằng XAML WPF hỗ trợ trên nền tảng XAML nên ta có thể tạo đối tượng hoàn toàn bằng ngôn ngữ XAML. Lưu ý, với cùng project trên, muốn viết đặc tả bằng XAML tương đương ta cần xóa bỏ phần mã trình C# cũ đi, vì C# và XAML không thể cùng sinh một đối tượng. Cách thực hiện: Mở file Window1.xaml tương ứng với file code Window1.xaml.cs ở trên. Thêm đoạn mã đặc tả XAML tương đương sau: <Window x:Class="Helloworld.Window1" xmlns="http:://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="" Title="Window1" Height="300" Width="300"> Microsoft Vietnam – DPE Team |WPF – Bài mở đầu: Tổng quan về WPF 21 Hello World Giờ ta gán tên phương thức xử lý sự kiện Click cho nút bấm này: F5 để chạy ứng dụng. Ta sẽ thu được kết quả tương tự như phần 5.2. Câu hỏi ôn tập 1. WPF là gì? WPF, viết tắt của Windows Presentation Foundation, là hệ thống API mới hỗ trợ việc xây dựng giao diện đồ hoạ trên nền Windows. WPF tăng cường khả năng lập trình giao diện của lập trình viên bằng cách cung cấp các API cho phép tích hợp nhiều dịch vụ trực quan trên cùng một ứng dụng: các form, control, hình ảnh 2 chiều, 3 chiều, văn bản cố định và thích nghi, in ấn, đồ họa vector, hoạt họa, móc nối dữ liệu, âm thanh và video. Thêm vào đó, các ứng dụng WPF còn có khả năng triển khai như một chương trình độc lập hoặc trên trình duyệt Web mà không phải thay đổi code giao diện. Sử dụng ngôn ngữ markup XAML có bản chất XML, WPF tạo cơ sở làm việc chung giữa người thiết kế giao diện và người lập trình. Là một bộ phận của .NET Framework 3.0, WPF sẵn có trong Windows Vista và Windows Server 2008. Đồng thời, WPF cũng có thể hoạt động trên nền Windows XP Service Pack 2 hoặc mới hơn, và cả Windows Server 2003. Microsoft Vietnam – DPE Team |WPF – Bài mở đầu: Tổng quan về WPF 22 2. Mục tiêu cơ bản của WPF là gì? A. Cung cấp một nền tảng thống nhất để xây dựng giao diện người dùng. B. Cho phép người lập trình và người thiết kế giao diện làm việc cùng nhau một cách dễ dàng. C. Cung cấp một công nghệ chung để xây dựng giao diện người dùng trên cả Windows và trình duyệt Web. D. Cả ba mục tiêu trên. Câu trả lời: D 3. XAML là gì? XAML, viết tắt của Extensible Application Markup Language, là ngôn ngữ đặc tả dựa trên XML được dùng để định nghĩa các đối tượng và thuộc tính của chúng, mối quan hệ cũng như sự tương tác. XAML đặc biệt được dùng trong các công nghệ của .NET Framework 3.0 (trong đó có WPF) như ngôn ngữ đặc tả giao diện người dùng (user interface - UI) nhằm mô tả cấu trúc và đặc tính của các phần tử UI, sự liên kết dữ liệu, các sự kiện và các đặc tính khác. XAML là mô hình có tính đột phá trong lĩnh vực tính toán trên Internet được chấp nhận rộng rãi trong nhiều hệ thống và bởi nhiều nhà cung cấp phần mềm. 4. Vai trò của XAML trong việc tạo môi trường làm việc chung giữa người thiết kế giao diện và người lập trình. XAML đóng vai trò một ngôn ngữ chung giữa môi trường thiết kế giao diện và môi trường lập trình. Đối với người thiết kế, XAML không những cho phép người thiết kế dễ dàng mô tả, chỉnh sửa các đối tượng UI và các đặc tính của chúng, mà còn cho phép họ tương tác với các đối tượng này ở mức độ nhất định. Do vậy, tăng khả năng cảm quan của người thiết kế đối với giao diện. Ngoài ra, nó cũng giúp người thiết kế hạn chế những ý tưởng đồ họa không khả thi khi lập trình. Đối với người lập trình, nhờ một môi trường lập trình có khả năng tự động tái tạo giao diện đã thiết kế dựa trên file đặc tả bằng XAML do người thiết kế chuyển sang, người lập trình không cần tự mình tái tạo lại giao diện. Điều này giảm đi nhiều công sức và thời gian để phát triển giao diện, cũng như tránh những sai lệch giữa giao diện do người thiết kế và giao diện do người lập trình tái tạo. Vì cả môi trường thiết kế và lập trình đều có khả năng hiểu và sử dụng XAML, ứng dụng WPF có thể chuyển qua lại giữa hai môi trường phát triển để sửa đổi hay bổ sung giao diện một Microsoft Vietnam – DPE Team |WPF – Bài mở đầu: Tổng quan về WPF 23 cách dễ dàng. Với tất cả những lợi điểm này, vị thế của người thiết kế trong việc xây dựng giao diện được nâng cao. 5. Trong ứng dụng WPF, phần giao diện người dùng có thể được viết bằng: A. XAML B. Mã trình (C# hoặc Visual Basic) C. Cả A và B Câu trả lời: C 6. Trong ứng dụng WPF, việc xử lý các sự kiện có thể được viết bằng: A. XAML B. Mã trình (C# hoặc Visual Basic) C. Cả A và B Câu trả lời: B Tài liệu tham khảo 1. Windows Presentation Foundation, URL: us/library/ms754130.aspx. 2. Introducing Windows Presentation Foundation, URL: us/library/aa663364.aspx. 3. WPF Architecture, URL: 4. WPF Tutorial, URL: 5. WPF Tutorials, URL: Microsoft Vietnam – DPE Team | WPF – Bài 2: Các điều khiển (Control) cơ bản của WPF 1 Bài 2 CÁC ĐIỀU KHIỂN (CONTROL) CƠ BẢN CỦA WPF Trong lập trình giao diện người dùng, điều kiển (Control) là các nhân tố quan trọng cấu thành nên giao diện người dùng, cho phép họ giao tiếp với ứng dụng. Control có thể được hiểu một cách đơn giản là các phần tử trên một cửa sổ như các nhãn (Label), hộp soạn thảo (TextBox), nút bẩm (Button), hộp danh sách (ListBox, ComboBox),.. để hiển thị các thông tin tới người dùng và cho phép người dùng nhập thông tin cần thiết cho chương trình. Phần này giới thiệu cách tạo lập và sử dụng các Control cơ bản nhất của cửa sổ xây dựng bằng công nghệ WPF. 1. Tổng quan về tạo lập các điều khiển với WPF Điểm khác biệt cơ bản giữa mã lệnh tạo giao diện dựa trên WPF so với phương pháp cũ là ứng dụng WPF sử dụng các đặc tả XAML (ngoài việc sử dụng mã lệnh C# hay VB.Net) để định nghĩa giao diện, trong khi phương pháp cũ phải sử dụng trực tiếp mã lệnh của C# hay VB.Net để định nghĩa giao diện. Ví dụ, để xây dựng giao diện cửa sổ đơn giản như Hình 2.1 dưới đây. Đoạn mã trình bằng XAML: <Label Height="30" HorizontalAlignment="Left" Margin="10,15,0,0" Name="label1" VerticalAlignment="Top" Width="60">Họ đệm: <Label Height="30" HorizontalAlignment="Left" Margin="10,50,0,0" Name="label2" VerticalAlignment="Top" Width="60">Tên: Label TextBox Button Hình 2.1 Một ví dụ về cửa số với các control đơn giản Microsoft Vietnam – DPE Team | WPF – Bài 2: Các điều khiển (Control) cơ bản của WPF 2 <Button Height="35" HorizontalAlignment="Left" Margin="16,0,0,27" Name="button1" VerticalAlignment="Bottom" Width="110">Xem thông tin <Button Height="35" HorizontalAlignment="Right" Margin="0,0,24,27" Name="button2" VerticalAlignment="Bottom" Width="110">Nhập lại Đoạn mã trình bằng C#: // Tạo nhãn Họ đệm this.label1 = new System.Windows.Forms.Label(); this.label1.AutoSize = true; this.label1.Location = new System.Drawing.Point(17, 16); this.label1.Name = "label1"; this.label1.Size = new System.Drawing.Size(48, 13); this.label1.TabIndex = 0; this.label1.Text = "Họ đệm:"; //Tạo nhãn Tên this.label2 = new System.Windows.Forms.Label(); this.label2.AutoSize = true; this.label2.Location = new System.Drawing.Point(17, 50); this.label2.Name = "label2"; this.label2.Size = new System.Drawing.Size(29, 13); this.label2.TabIndex = 0; this.label2.Text = "Tên:"; //Tạo TextBox nhập Họ đệm this.textBox1 = new System.Windows.Forms.TextBox(); this.textBox1.Location = new System.Drawing.Point(100, 16); this.textBox1.Name = "textBox1"; this.textBox1.Size = new System.Drawing.Size(160, 20); this.textBox1.TabIndex = 1; //Tạo TextBox nhập Tên Microsoft Vietnam – DPE Team | WPF – Bài 2: Các điều khiển (Control) cơ bản của WPF 3 this.textBox2 = new System.Windows.Forms.TextBox(); this.textBox2.Location = new System.Drawing.Point(100, 50); this.textBox2.Name = "textBox2"; this.textBox2.Size = new System.Drawing.Size(160, 20); this.textBox2.TabIndex = 1; // Tạo nút bấm Xem thông tin this.button1 = new System.Windows.Forms.Button(); this.button1.Location = new System.Drawing.Point(20, 114); this.button1.Name = "button1"; this.button1.Size = new System.Drawing.Size(99, 38); this.button1.TabIndex = 2; this.button1.Text = "Xem thông tin"; this.button1.UseVisualStyleBackColor = true; //Tạo nút bấm nhập lại this.button2 = new System.Windows.Forms.Button(); this.button2.Location = new System.Drawing.Point(161, 114); this.button2.Name = "button2"; this.button2.Size = new System.Drawing.Size(99, 38); this.button2.TabIndex = 2; this.button2.Text = "Nhập lại"; this.button2.UseVisualStyleBackColor = true; Như vậy, điều chúng ta cần là tìm hiểu các thẻ XAML để mô tả các Control cần thiết. Tuy nhiên bạn không cần phải lo lắng nếu như chưa quen với các mã lệnh XAML (dựa trên XML) này vì bộ công cụ Visual Studio.Net 2008 đã hỗ trợ thiết kế giao diện trực quan và tự động sinh mã XAML tương ứng. 2. Các điều khiển cơ bản trong WPF Chúng ta sẽ tìm hiểu chi tiết một số điều khiển cơ bản của cửa sổ: - Label: Nhãn. - TextBox: Hộp soạn thảo. - Button: Nút bấm. - CheckBox: Hộp chọn. - RadioButton: Hộp chọn radio (chỉ được phép chọn 1 mục trong mỗi nhóm). - ListBox: Hộp danh sách Microsoft Vietnam – DPE Team | WPF – Bài 2: Các điều khiển (Control) cơ bản của WPF 4 - ComboBox: Hộp danh sách thả xuống.. 1.1 LABEL - Nhãn Nhãn (Label) là các điều kiển để hiển thị các văn bãn tĩnh, thường được sử dụng để làm nhãn cho các control khác như Textbox, ListBox, ComboBox,. Các Label đuợc mô tả bằng đoạn mã XAML sau: <Label Height="30" HorizontalAlignment="Left" Margin="10,15,0,0" Name="label1" VerticalAlignment="Top" Width="60">Họ đệm: Nhãn đuợc bắt đầu và kết thúc là , nội dung cũa nhãn là đoạn văn bản đặt giữa cặp thẻ này. Trong ví dụ này “Họ đệm:” là nội dung của nhãn. Bên trong thẻ có rất nhiều đặc tính để mô tả về thẻ, trong đó: - Height="30” : Độ cao của khung nhãn là 30px - HorizontalAlignment="Left" : Nhãn được căn trái trong cửa sổ - Margin="10,15,0,0" : có 4 giá trị là Left,Top,Right,Bottom - Name="label1" : Tên của nhãn là lablel1 - VerticalAlignment="Top" :Nhãn được căn theo đỉnh của cửa sổ. - Width="60": Chiều rộng của nhãn là 60px Trên đây là một số đặc tính cơ bản của nhãn, ngoài ra còn có nhiều đặc tính khác áp dụng cho nhãn như màu nền, màu chữ,. Label Label Hình 2.2 Minh họa về label Microsoft Vietnam – DPE Team | WPF – Bài 2: Các điều khiển (Control) cơ bản của WPF 5 1.2 TextBox – Hộp soạn thảo Hộp soạn thảo (TextBox) là control cho phép người dùng nhập dữ liệu dạng văn bản. Dưới đây là đoạn mã XAML của hộp soạn thảo Hộp soạn thảo Hộp soạn thảo được tạo nên bởi thẻ . Nếu muốn thiết lập sẵn nội dung mặc định cho hộp soạn thảo, ta đặt nội dung này vào giữa cặp thẻ Nội dung . Nếu không muốn đặt giá trị mặc định thì không cần thẻ đóng . Thẻ cũng có nhiều đặc tính, trong đó: - Margin="80,17,30,0": Cách lề trái 80, đỉnh cửa sổ 17, cạnh phải 30 - Name="textBox1": Tên của hộp soạn thảo là textBox1 - VerticalAlignment="Top": Căn theo đỉnh cửa sổ Đặc điểm của hộp soạn thảo với các đặc tính trên là khi người dùng co dãn, thay đổi kích thước cửa sổ, chiều rộng của hộp soạn thảo tự động co dãn theo. Hình 2.3 Minh họa về TextBox TextBox TextBox Microsoft Vietnam – DPE Team | WPF – Bài 2: Các điều khiển (Control) cơ bản của WPF 6 1.3 Button – Nút bấm Nút bấm (Button) là loại điều khiển cho phép người dùng nhấn chuột để chọn lệnh, khi nhấn vào nút bấm, nó sẽ sinh ra sự kiện Click và sẽ chạy các lệnh gắn với sự kiện này. Dưới đây là đoạn mã sinh ra các nút bấm trên <Button Height="35" HorizontalAlignment="Left" Margin="16,0,0,27" Name="button1" VerticalAlignment="Bottom" Width="110" Click="button1_Click">Xem thông tin <Button Height="35" HorizontalAlignment="Right" Margin="0,0,24,27" Name="button2" VerticalAlignment="Bottom" Width="110">Nhập lại Nút bấm được bắt đầu bằng thẻ và kết thúc bằng thẻ . Nhãn của nút bấm được đặt trong cặp thẻ Nhãn nút bấm . Nút bấm có nhiều đặc tính, trong đó: - Height="35": Chiều cao nút bấm là 35 - Width="110": Chiều rộng là 110 - HorizontalAlignment="Left": Căn theo lề trái - VerticalAlignment="Bottom": Căn theo đáy cửa sổ - Margin="16,0,0,27": Cách lề trái 16, cách đáy 27 - Name="button1": Tên nút bấm là button1 Hình 2.4 Minh họa về nút bấm Button Button Microsoft Vietnam – DPE Team | WPF – Bài 2: Các điều khiển (Control) cơ bản của WPF 7 - Click="button1_Click": Khi nhấn chuột vào nút sẽ kích hoạt phương thức button1_Click() Vi dụ về đoạn mã lệnh gắn với cửa sổ chứa các điều khiển trên: namespace WpfControlSample1 { public partial class Window1 : Window { public Window1() { InitializeComponent(); } private void button1_Click(object sender, RoutedEventArgs e) { String strHoTen; strHoTen = textBox1.Text + " " + textBox2.Text; MessageBox.Show("Xin chào: " + strHoTen); } } } 1.4 Radio Button và CheckBox Radio Button và CheckBox đều là điều khiển dạng hộp chọn. Tuy nhiên, điểm khác biệt cơ bản giữa hai loại điều khiển này là: Radio Button: là hộp chọn theo nhóm, nghĩa là các hộp trong cùng một nhóm sẽ loại trừ nhau, tại một thời điểm người dùng chỉ được chọn một trong các mục. Vi dụ như hộp chọn giới tính, ta phải sử dụng radio vì tại một thời điểm chỉ cho phép chọn Nam hoặc Nữ CheckBox: là hộp chọn mà người dùng có thể chọn một hoặc nhiều mục cùng một lúc. Vi dụ như mục chọn Ngoại ngữ, cho phép người dùng chọn đồng thời nhiều mục. Microsoft Vietnam – DPE Team | WPF – Bài 2: Các điều khiển (Control) cơ bản của WPF 8 Dưới đây là đoạn mã tạo Radio Button và CheckBox. <Label Height="30" HorizontalAlignment="Left" Margin="10,94,0,0" Name="label3" VerticalAlignment="Top" Width="60">Giới tính: <RadioButton Height="22" Margin="80,99,0,0" Name="radioButton1" VerticalAlignment="Top" HorizontalAlignment="Left" Width="79" GroupName="GioiTinh" IsChecked="True">Nam <RadioButton Height="22" HorizontalAlignment="Right" Margin="0,99,30,0" Name="radioButton2" VerticalAlignment="Top" Width="79" GroupName="GioiTinh">Nữ Ngoại ngữ: <CheckBox Margin="84,0,119,110" Name="checkBox1" Height="20" VerticalAlignment="Bottom" IsChecked="True">Tiếng Anh <CheckBox HorizontalAlignment="Right" Margin="0,0,24,110" Name="checkBox2" Width="85" Height="20" VerticalAlignment="Bottom">Tiếng Trung Radio Button được tạo bởi thẻ và kết thúc bởi, giữa cặp thẻ này là nhãn của Radio Button Nhãn . Hình 2.5 Minh họa về hộp chọn Radio và CheckBox Radio Button CheckBox Microsoft Vietnam – DPE Team | WPF – Bài 2: Các điều khiển (Control) cơ bản của WPF 9 CheckBox được tạo bởi thẻ và kết thúc bởi, giữa cặp thẻ này là nhãn của CheckBox Nhãn . Cả hai thẻ này đều có đặc tính IsChecked="True" hoặc IsChecked="False". Mục nào có thuộc tính này sẽ được tự động chọn khi cửa sổ bắt đầu hiển thị. Đối với Radio Button, vì là hộp chọn loại trừ, nếu trong một cửa sổ có nhiều nhóm Radio Button khác nhau thì các Radio Button của mỗi nhóm đuợc phân biệt bởi đặc tính GroupName="TenNhom". Ví dụ, trên cùng một cửa sổ có hai Radio Button chọn Giới tính (Nam; Nữ) và ba Radio Button khác chọn nghề nghiệp (Kinh doanh; Kỹ Thuật; Marketing) thì các Radio Button Nam, Nu phải có cùng GroupName với nhau, ba Radio Button Kinh doanh, Ky Thuat, Marketting phải có cùng GroupName và khác với GroupName của nhóm giới tính. Đoạn mã lệnh minh họa kiểm tra mục chọn Radio private void button1_Click(object sender, RoutedEventArgs e) { String strMessage, strHoTen, strTitle, strNgoaiNgu=""; strHoTen = textBox1.Text + " " + textBox2.Text; if (radioButton1.IsChecked==true) strTitle = "Mr."; else strTitle = "Miss/Mrs."; strMessage = "Xin chào: " + strTitle + " " + strHoTen; MessageBox.Show(strMessage); } Đoạn mã lệnh minh họa kiểm tra mục chọn CheckBox private void button1_Click(object sender, RoutedEventArgs e) { String strMessage, strNgoaiNgu=""; if (checkBox1.IsChecked == true) { strNgoaiNgu = "Tiếng Anh"; } if (checkBox2.IsChecked == true) { strNgoaiNgu = (strNgoaiNgu.Length==0) ? "Tiếng Trung": (strNgoaiNgu+ " và Tiếng Trung"); Microsoft Vietnam – DPE Team | WPF – Bài 2: Các điều khiển (Control) cơ bản của WPF 10 } strMessage = "Ngoại ngữ: " + strNgoaiNgu; MessageBox.Show(strMessage); } 1.5 ListBox - Hộp danh sách Hộp danh sách (ListBox) và là điều khiển hiển thị một danh sách các mục theo từng dòng và cho phép người dùng chọn một hay nhiều phẩn tử của danh sách. Ví dụ về hộp danh sách chọn Quê quán: Dưới đây là đoạn mã tạo ListBox <Label Height="30" HorizontalAlignment="Left" Margin="10,0,0,126" Name="label5" VerticalAlignment="Bottom" Width="69">Quê quán: <ListBox Height="68" Margin="80,0,33,77" Name="listBox1" VerticalAlignment="Bottom" SelectedIndex="0"> Hà nội TP. Hồ Chí Minh Hải Phòng Hình 2.6 Minh họa về hộp chọn ListBox ListBox Microsoft Vietnam – DPE Team | WPF – Bài 2: Các điều khiển (Control) cơ bản của WPF 11 Đà Nẵng ListBox được tạo bởi thẻ và kết thúc bằng thẻ đóng . Mỗi phần tử của danh sách nằm trong cặp thẻ Nhãn lồng bên trong cặp thẻ trên. Đặc tính SelectedIndex="k" để yêu cầu tự động chọn phần thử thứ n trong danh sách khi mở cửa sổ. Phần tử đầu tiên của danh sách có giá trị là 0, phần tử cuối cùng là n-1. Nếu muốn khi mở cửa sổ không chọn phần tử nào thì đặt giá trị k bằng -1. Đoạn mã lệnh lấy mục chọn từ ListBox private void button1_Click(object sender, RoutedEventArgs e) { String strMessage; if (listBox1.SelectedIndex >= 0)//Nếu đã có một mục trong danh sách được chọn { strMessage = “Quê Quán: " + listBox1.Text; } MessageBox.Show(strMessage); } 1.6 ComboBox - hộp danh sách thả xuống Hộp danh sách thả xuống (ComboBox) là các điều khiển hiển thị một danh sách theo từng dòng cho người dùng chọn. Tuy nhiên, khác với ListBox, ComboBox gọn gàng hơn bởi vì nó chỉ hiển thị 1 dòng và khi nhấn vào biểu tượng tam giác bên cạnh thì danh sách mới được mở ra. Combox chỉ cho phép chọn 1 dòng tại 1 thời điểm. Ví dụ về hộp danh sách thả xuống chọn Quê quán: Microsoft Vietnam – DPE Team | WPF – Bài 2: Các điều khiển (Control) cơ bản của WPF 12 Dưới đây là đoạn mã tạo ComboBox <Label Height="30" HorizontalAlignment="Left" Margin="10,0,0,126" Name="label5" VerticalAlignment="Bottom" Width="69">Quê quán: <ComboBox Height="26" Margin="84,0,27,126" Name="comboBox1" VerticalAlignment="Bottom" SelectedIndex="0"> Hà nội TP. Hồ Chí Minh Hải Phòng Đà Nẵng ComboBox được tạo bởi thẻ và kết thúc bằng thẻ đóng . Mỗi phần tử của danh sách nằm trong cặp thẻ Nhãn Lồng bên trong cặp thẻ trên. Hình 2.7 Minh họa về hộp chọn ComboBox ComboBox Microsoft Vietnam – DPE Team | WPF – Bài 2: Các điều khiển (Control) cơ bản của WPF 13 Đặc tính SelectedIndex="k" để yêu cầu tự động chọn phần thử thứ n trong danh sách khi mở cửa sổ. Phần tử đầu tiên của danh sách có giá trị là 0, phần tử cuối cùng là n-1. Nếu muốn khi mở cửa sổ không chọn phần tử nào thì đặt giá trị k bằng -1. Đoạn mã lệnh lấy mục chọn từ ComboBox private void button1_Click(object sender, RoutedEventArgs e) { String strMessage; if (comboBox1.SelectedIndex >= 0)//Nếu đã có một mục trong danh sách được chọn { strMessage = “Quê Quán: " + comboBox1.Text; } MessageBox.Show(strMessage); } 3. Ví dụ xây dựng các control trong WPF Yêu cầu: Viết chương trình hiển thị cửa sổ như sau Khi nhấn Xem thông tin, nếu chọn Nam thì hiện lời chào “Xin chào Mr. Barack Obama”, nếu chọn Nữ thì hiện lời chào “Xin chào Miss/Mrs. Barack Obama”, như sau: Microsoft Vietnam – DPE Team | WPF – Bài 2: Các điều khiển (Control) cơ bản của WPF 14 Nếu chọn Nhập lại, đưa trạng thái các control trên cửa sổ về trạng thái ban đầu. Các bước thực hiện như sau: 3.1 Tạo ứng dụng WPF Ở đây, ta chú ý chọn .Net Framework 3.5. Giao diện thiết kế ứng dụng: Microsoft Vietnam – DPE Team | WPF – Bài 2: Các điều khiển (Control) cơ bản của WPF 15 3.2 Mã XAML của giao diện Mở file Window1.xaml tương ứng với file code Window1.xaml.cs. <Window x:Class="WpfControlSample1.Window1" xmlns="" xmlns:x="" Title="Ví dụ Control - WPF" Height="352" Width="300"> <Label Height="30" HorizontalAlignment="Left" Margin="10,15,0,0" Name="label1" VerticalAlignment="Top" Width="60" Focusable="False">Họ đệm: <Label Height="30" HorizontalAlignment="Left" Margin="10,50,0,0" Name="label2" VerticalAlignment="Top" Width="60">Tên: Hộp soạn thảo Microsoft Vietnam – DPE Team | WPF – Bài 2: Các điều khiển (Control) cơ bản của WPF 16 <Button Height="35" HorizontalAlignment="Left" Margin="16,0,0,27" Name="button1" VerticalAlignment="Bottom" Width="110" Click="button1_Click">Xem thông tin <Button Height="35" HorizontalAlignment="Right" Margin="0,0,24,27" Name="button2" VerticalAlignment="Bottom" Width="110" Click="button2_Click">Nhập lại <Label Height="30" HorizontalAlignment="Left" Margin="10,94,0,0" Name="label3" VerticalAlignment="Top" Width="60">Giới tính: <RadioButton Height="22" Margin="80,99,0,0" Name="radioButton1" VerticalAlignment="Top" HorizontalAlignment="Left" Width="79" GroupName="GioiTinh" IsChecked="True">Nam <RadioButton Height="22" HorizontalAlignment="Right" Margin="0,99,30,0" Name="radioButton2" VerticalAlignment="Top" Width="79" GroupName="GioiTinh">Nữ Ngoại ngữ: <CheckBox Margin="84,132,119,0" Name="checkBox1" Height="20" VerticalAlignment="Top" IsChecked="True">Tiếng Anh <CheckBox HorizontalAlignment="Right" Margin="0,132,24,0" Name="checkBox2" Width="85" Height="20" VerticalAlignment="Top">Tiếng Trung <Label Height="30" HorizontalAlignment="Left" Margin="10,0,0,126" Name="label5" VerticalAlignment="Bottom" Width="69">Quê quán: <ComboBox Height="26" Margin="84,0,27,126" Name="comboBox1" VerticalAlignment="Bottom" SelectedIndex="0"> Hà nội TP. Hồ Chí Minh Hải Phòng Đà Nẵng Gán tên phương thức button1_Click xử lý sự kiện Click cho nút bấm button1 này, khi nhấn chuột vào nút “Xem thông tin” thì phương thức button1_Click sẽ được thực thi. <Button Height="35" HorizontalAlignment="Left" Margin="16,0,0,27" Name="button1" VerticalAlignment="Bottom" Width="110" Click="button1_Click">Xem thông tin Gán tên phương thức button2_Click xử lý sự kiện Click cho nút bấm button2 này, khi nhấn chuột vào nút “Nhập lại” thì phương thức button2_Click sẽ được thực thi. <Button Height="35" HorizontalAlignment="Right" Margin="0,0,24,27" Name="button2" VerticalAlignment="Bottom" Width="110" Click="button2_Click">Nhập lại Microsoft Vietnam – DPE Team | WPF – Bài 2: Các điều khiển (Control) cơ bản của WPF 17 3.3 Mã lệnh C# xử lý các sự kiện nhấn nút using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; namespace WpfControlSample1 { /// /// Interaction logic for Window1.xaml /// public partial class Window1 : Window { public Window1() { InitializeComponent(); } private void button1_Click(object sender, RoutedEventArgs e) { String strMessage, strHoTen, strTitle, strNgoaiNgu=""; strHoTen = textBox1.Text + " " + textBox2.Text; if (radioButton1.IsChecked==true) strTitle = "Mr."; else strTitle = "Miss/Mrs."; strMessage = "Xin chào: " + strTitle + " " + strHoTen; if (checkBox1.IsChecked == true) { Microsoft Vietnam – DPE Team | WPF – Bài 2: Các điều khiển (Control) cơ bản của WPF 18 strNgoaiNgu = "Tiếng Anh"; } if (checkBox2.IsChecked == true) { strNgoaiNgu = (strNgoaiNgu.Length==0) ? "Tiếng Trung": (strNgoaiNgu+" và Tiếng Trung"); } strMessage += "\n Ngoại ngữ: " + strNgoaiNgu; if (comboBox1.SelectedIndex >= 0)//Nếu đã có một mục trong danh sách được chọn { strMessage += "\n Quê Quán: " + comboBox1.Text; } MessageBox.Show(strMessage); } private void button2_Click(object sender, RoutedEventArgs e) { textBox1.Text = ""; textBox2.Text = ""; radioButton1.IsChecked = true; radioButton2.IsChecked = false; checkBox1.IsChecked = false; checkBox2.IsChecked = false; comboBox1.SelectedIndex = 0; } } } F5 để chạy ứng dụng. Ta sẽ thu được kết quả tương tự như yêu cầu. Câu hỏi ôn tập 1. Control là gì? Control phần tử trên một cửa sổ như các nhãn (Label), hộp soạn thảo (TextBox), nút bẩm (Button), hộp danh sách (ListBox, ComboBox),.. để hiển thị các thông tin tới người dùng và cho phép người dùng nhập thông tin cần thiết cho chương trình. 2. Các control trong WPF được định bằng? A. Đặc tả XAML B. Mã trình (C# hoặc Visual Basic) Microsoft Vietnam – DPE Team | WPF – Bài 2: Các điều khiển (Control) cơ bản của WPF 19 C. Cả A và B Câu trả lời: C 3. Các control cơ bản trong WPF bao gồm? (chọn nhiều) A. Label, TextBox, Button B. Radio Button, CheckBox, ListBox và ComboBox C. Grid, WrapPanel D. Cả A, B và C Câu trả lời: A và B 4. Được phép chọn đồng thời nhiều Radio Button trong cùng nhóm: A. Đúng B. Sai Câu trả lời: B 5. Được phép chọn đồng thời nhiều CheckBox: A. Đúng B. Sai Câu trả lời: A 6. Khi dùng thẻ để tạo hộp soạn thảo, bắt buộc phải kết thúc bằng thẻ đóng : A. Đúng B. Sai Câu trả lời: B Tài liệu tham khảo 1. Windows Presentation Foundation, URL: us/library/ms754130.aspx. 2. Introducing Windows Presentation Foundation, URL: us/library/aa663364.aspx. 3. WPF Architecture, URL: 4. WPF Tutorial, URL: Microsoft Vietnam – DPE Team | WPF – Bài 2: Các điều khiển (Control) cơ bản của WPF 20 5. WPF Tutorials, URL: 6. Windows Presentation Foundation Control, us/library/ms752069.aspx Microsoft Vietnam – DPE Team |WPF –Bài 3: Các điều khiển nâng cao trong WPF 1 Bài 3 CÁC ĐIỀU KHIỂN NÂNG CAO TRONG ỨNG DỤNG WPF Không dừng lại ở việc cung cấp những điều khiển UI như ComboBox, ListBox, TextBox,, với những chức năng cơ bản và đặc tính text đơn điệu như trong Windows Form, WPF còn cho phép người lập trình tùy biến thuộc tính của những điều khiển trên để biến chúng thành những điều khiển UI phức hợp, với nhiều đặc tính giao diện phong phú, tinh tế, kết hợp text, hình ảnh, Để đạt được hiệu quả tương tự, với những công nghệ trước đây như MFC, cần tiêu tốn nhiều công sức lập trình. Qua các ví dụ cụ thể trong bài giảng này, chúng ta sẽ thấy WPF tạo ra chúng đơn giản như thế nào. 1 Hộp lựa chọn phông chữ (Font Chooser) Mục tiêu của phần này là tạo lập một điều khiển dạng ComboBox, trong đó, liệt kê danh sách các phông chữ hệ thống. Tên của mỗi phông chữ lại được hiển thị dưới dạng chính phông chữ đó. Điều này cho phép người dùng xem trước định dạng phông chữ trước khi chọn chúng. Bạn có thể đã quen thuộc với dạng Combox này khi sử dụng các ứng dụng gần đây của Microsoft Office như Word, Excel, PowerPoint, Và sau đây là mã XAML để tạo ra điều khiển này: Danh mục phông hệ thống: <ComboBox ItemsSource="{x:Static Fonts.SystemFontFamilies}" SelectedIndex="0"> Microsoft Vietnam – DPE Team |WPF –Bài 3: Các điều khiển nâng cao trong WPF 2 Trong phần khai báo tạo điều khiển ComboBox, ta khai báo nguồn dữ liệu được dùng cho các mục trong hộp danh sách thông qua thuộc tính ItemsSource. Bằng việc gán ItemsSource="{x:Static Fonts.SystemFontFamilies}" ta định nghĩa nguồn dữ liệu này là danh sách các phông chữ hiện có của hệ thống máy tính hiện thời. Thuộc tính SelectedIndex cho phép định ra chỉ số của chỉ mục ngầm định được chọn ban đầu trong danh sách phông, cụ thể trong trường hợp này là phông chữ đầu tiên (SelectedIndex="0"). Trong phần khai báo định nghĩa thuộc tính dữ liệu của mỗi chỉ mục trong ComboBox (phần tử ), ta lồng vào một điều khiển TextBlock, trong đó, nội dung hiển thị là phông chữ tương ứng (Text="{Binding}") và dạng phông hiển thị nội dung cũng chính là phông chữ tương ứng với chỉ mục này (FontFamily="{Binding}"). Những vấn đề liên quan đến kết nối nguồn dữ liệu sẽ được đề cập chi tiết hơn trong các bài giảng tiếp sau. Biên dịch và chạy chương trình, ta có kết quả như minh họa ở Hình 3.1. Như vậy, chỉ với không hơn 20 dòng mã XAML, chúng ta đã có thể tạo ra một điều khiển rất hữu dụng. Microsoft Vietnam – DPE Team |WPF –Bài 3: Các điều khiển nâng cao trong WPF 3 Hình 3.1 – Hộp lựa chọn phông chữ được xây dựng bằng WPF 2 Hộp danh mục ảnh (Image ListBox) Trong phần này, ta xây dựng một hộp danh mục (ListBox) các đồ uống có kèm theo ảnh. Rõ ràng tính trực quan của giao diện người dùng sẽ tăng hơn nhiều so với một danh sách dạng text đơn điệu. 2.1 Thêm dữ liệu ảnh vào tài nguyên của project Trước hết, ta thêm các ảnh đồ uống cần thiết vào tài nguyên của project theo các bước sau: - Ở cửa sổ Solution Explorer, ta nhắp chuột phải vào tên project  Xuất hiện bảng chọn chức năng. - Chọn mục Add>Existing Item  Xuất hiện cửa sổ cho phép lựa chọn file. - Trong hộp danh sách Files of type, ta chọn Image Files  Các file ảnh trong thư mục hiện thời sẽ xuất hiện. - Tìm đến các file ảnh cần hiển thị trong danh sách và chọn OK. - Kết quả, trong cửa sổ Solution Explorer, ta thấy xuất hiện các file ảnh tương ứng. Microsoft Vietnam – DPE Team |WPF –Bài 3: Các điều khiển nâng cao trong WPF 4 2.2 Xây dựng mã XAML Giả thiết rằng các file ảnh đã được nạp vào project, sau đây là mã XAML tạo lập hộp danh mục đồ uống theo yêu cầu: <!--Khai báo tạo lập một hộp danh mục với các thuộc tính về căn lề, chiều rộng,--> <ListBox Margin="10,10,0,13" Width="280" Name="listBox1" HorizontalAlignment="Left" VerticalAlignment="Top"> <!--Khai báo tạo lập một chỉ mục con trong hộp danh mục với thuộc tính màu nền--> <!--Lồng vào chỉ mục này một StackPanel để có thể chứa nhiều hơn 1 phần tử UI con theo chiều ngang--> <TextBlock Margin="5" VerticalAlignment="Center" FontFamily="Times New Roman" FontStyle="Italic" FontSize="18">Nước cam tươi <TextBlock Margin="5" VerticalAlignment="Center" FontFamily="Times New Roman" FontStyle="Italic" FontSize="18">Nước kiwi ép Microsoft Vietnam – DPE Team |WPF –Bài 3: Các điều khiển nâng cao trong WPF 5 <TextBlock Margin="5" VerticalAlignment="Center" FontFamily="Times New Roman" FontStyle="Italic" FontSize="18">Nước soài ép <TextBlock Margin="5" VerticalAlignment="Center" FontFamily="Times New Roman" FontStyle="Italic" FontSize="18">Sữa tươi tiệt trùng <TextBlock Margin="5" VerticalAlignment="Center" FontFamily="Times New Roman" FontStyle="Italic" FontSize="18">Cà phê Espresso Như vậy, điểm mấu chốt để bổ sung thêm các thuộc tính giao diện như ảnh, text, checkbox,, vào mỗi chỉ mục của hộp danh sách chính là việc kết hợp các phần tử UI riêng lẻ tương ứng vào cùng một phần tử Panel nằm trong khai báo chỉ mục. Trong trường hợp này, với mỗi khai báo chỉ mục ta thêm vào một theo chiều ngang, trong đó, chứa một phần tử và 1 phần tử . Nguồn dữ liệu ảnh được xác định qua thuộc tính Source="". Kết quả của đoạn code được minh hoạ trong hình 3.2. Microsoft Vietnam – DPE Team |WPF –Bài 3: Các điều khiển nâng cao trong WPF 6 Hình 3.2 – Danh mục đồ uống có kèm ảnh minh hoạ xây dựng bằng WPF 3 Hộp mở rộng (Expander) Hộp mở rộng Expander là một trong những điều khiển UI mới được giới thiệu trong WPF như một điều khiển cơ bản. Expander cho phép thu gọn hoặc mở rộng một nội dung nào đó chứa trong nó, giống như một node trong TreeView, bằng việc click vào biểu tượng mũi tên (hướng lên, nếu điều khiển đang ở trạng thái mở rộng; hướng xuống, nếu đang ở trạng thái thu gọn). Điều khiển này rất tiện lợi: Khi diện tích form chính quá chật hẹp vì nhiều chức năng được trình bày trên cùng giao diện, ta có thể sử dụng Expander để chứa một số chức năng ít dùng có thể tạm thời được ẩn dưới một tên nhóm chung. Trong ví dụ sau đây, ta sẽ làm một menu chứa 2 mục là đồ uống và đồ ăn, mỗi mục sẽ chứa danh sách các sản phẩm tương ứng mà nhà hàng cung cấp. Ta sử dụng Expander để có thể mở rộng/thu gọn từng mục nêu trên. Sau đây là mã XAML của ứng dụng: <Window x:Class="Lesson3.Window2" xmlns="" xmlns:x="" Title="Lesson 3 - Expander WPF Sample" Height="250" Width="200"> Microsoft Vietnam – DPE Team |WPF –Bài 3: Các điều khiển nâng cao trong WPF 7 <Expander FontFamily="Times New Roman" FontSize="14" FontStyle="Oblique" Header="Đồ uống" Background="#acbf43" > Nước chanh leo Nước cam vắt Nước mơ muối Sữa chua đánh đá Microsoft Vietnam – DPE Team |WPF –Bài 3: Các điều khiển nâng cao trong WPF 8 <Expander FontFamily="Times New Roman" FontSize="14" FontStyle="Oblique" Header="Đồ ăn" Background="DarkOrange"> Phở tái gàu Bún bò giò heo Bánh cuốn tôm nõn Bánh đa cua Microsoft Vietnam – DPE Team |WPF –Bài 3: Các điều khiển nâng cao trong WPF 9 Như ta thấy việc sử dụng Expander trong WPF rất đơn giản, với cùng nguyên tắc như các điều khiển UI cơ bản khác. Ở đây ta sử dụng 2 hộp mở rộng Expander: một chứa danh mục đồ uống được đặt trong một ListBox; một chứa danh mục đồ ăn trong một ListBox. Kết quả của đoạn code được minh hoạ trong Hình 3.3. a) b) c) Hình 3.3 – Tạo lập và sử dụng hộp mở rộng bằng WPF: a) Hai danh mục cùng thu gọn; b) Danh mục Đồ ăn được mở rộng; c) Cả hai danh mục được mở rộng (Danh mục trên đẩy danh mục dưới xuống) Microsoft Vietnam – DPE Team |WPF –Bài 3: Các điều khiển nâng cao trong WPF 10 4 Hộp soạn văn bản đa năng (RichTextBox) Hộp soạn văn bản đa năng RichTextBox là một trong những điều khiển có chức năng phong phú. Không chỉ cho phép soạn sửa và hiển thị các nội dung text đơn thuần, RichTextBox còn cho phép thay đổi phông chữ (Verdana, Times New Roman,), kiểu chữ (nghiêng, đậm, gạch chân), Đặc biệt, điều khiển RichTextBox trong WPF/.NET 3.0 còn cho phép kiểm tra/gợi ý sửa đổi lỗi chính tả tiếng Anh của nội dung văn bản chứa trong đó. RichTextBox trong WPF/.NET 3.0 là phần tử được cải tiến về cơ bản so với phiên bản trước của điều khiển RichTextBox trong .NET 2.0. Tuy nhiên, cùng với sự mở rộng về chức năng là việc bổ sung các API mới cũng như những cách thức sử dụng khác. 4.1 Chức năng cơ bản Để thêm mới một hộp soạn thảo đa năng vào form, ta dùng mã XAML như sau: <RichTextBox x:Name="XAMLRichBox" SpellCheck.IsEnabled="True" MinHeight="100"> Thuộc tính x:Name là từ khoá xác định danh tính của RichTextBox được tạo. Thuộc tính này đóng vai trò là tham chiếu cho phép ta sau này buộc mã lệnh C# vào điều khiển. Thuộc tính MinHeight xác định số dòng có thể thấy được của hộp soạn thảo, giá trị này ngầm định bằng 1. Thuộc tính SpellCheck.IsEnabled="True" kích hoạt tính năng kiểm tra lỗi chính tả tiếng Anh trong nội dung văn bản và gợi ý những từ đúng có thể để thay thế, giống như Microsoft Word. Tuy nhiên, nếu chỉ với một RichTextBox, ta không có cách nào để sửa đổi định dạng của văn bản trong RichTextBox như đánh chữ nghiêng, chữ đậm, đổi phông chữ, vân vân. Muốn đạt được điều này, ta phải buộc mã lệnh vào giao diện Command của RichTextBox. 4.2 Giao diện Command Microsoft chủ trương để người phát triển làm việc với RichTextBox thông qua giao diện Command. Mặc dù khái niệm này không mới đối với phần lớn người phát triển giao diện đồ hoạ người dùng, việc cài đặt và cú pháp trong XAML có chút khác biệt. Microsoft Vietnam – DPE Team |WPF –Bài 3: Các điều khiển nâng cao trong WPF 11 Ta cần thêm một ToolBar và một số nút bấm hai trạng thái (ToggleButton) để gắn lệnh điều khiển RichTextBox đã tạo. Thuộc tính Command trên mỗi điểu khiển kể trên sẽ xác định chức năng mà ta muốn kích hoạt trên RichTextBox,. Trong khi đó, thuộc tính CommandTarget xác định RichTextBox nào ta muốn chức năng kích hoạt của các nút bấm nhằm vào. Sau đây là đoạn mã XAML bổ sung thêm một ToolBar và 3 nút bấm hai trạng thái: <!--Khai báo nút bấm kích hoạt lệnh tô đậm đoạn chữ được chọn trong RichTextBox--> <ToggleButton MinWidth="40" Command="EditingCommands.ToggleBold" CommandTarget="{Binding ElementName=XAMLRichBox}" TextBlock.FontWeight="Bold">B <!--Khai báo nút bấm kích hoạt lệnh in nghiêng đoạn chữ được chọn trong RichTextBox--> <ToggleButton MinWidth="40" Command="EditingCommands.ToggleItalic" CommandTarget="{Binding ElementName=XAMLRichBox}" TextBlock.FontStyle="Italic">I <!--Khai báo nút bấm kích hoạt lệnh gạch chân đoạn chữ được chọn trong RichTextBox--> <ToggleButton MinWidth="40" Command="EditingCommands.ToggleUnderline" CommandTarget="{Binding ElementName=XAMLRichBox}"> U Mặc dù đoạn mã ví dụ chỉ bao gồm một số ít các nút lệnh (Command="EditingCommands.ToggleBold", Command="EditingCommands.ToggleBold", Command="EditingCommands.ToggleItalic"), có tổng cộng 47 lệnh khác nhau mà ta có thể lựa chọn (có thể xem chúng bằng cách khảo sát lớp EditingCommands). Microsoft Vietnam – DPE Team |WPF –Bài 3: Các điều khiển nâng cao trong WPF 12 Dưới đây là đoạn mã XAML đầy đủ cho phép ta xây dựng một hộp soạn thảo văn bản có thể thay đổi được kiểu chữ (đậm, nghiêng, gạch chân): <Window x:Class="Lesson3.Window3" xmlns="" xmlns:x="" Title="Lesson3 - Rich Text Box" Height="300" Width="300" > <ToggleButton MinWidth="40" Command="EditingCommands.ToggleBold" CommandTarget="{Binding ElementName=XAMLRichBox}" TextBlock.FontWeight="Bold">B <ToggleButton MinWidth="40" Command="EditingCommands.ToggleItalic" CommandTarget="{Binding ElementName=XAMLRichBox}" TextBlock.FontStyle="Italic">I <ToggleButton MinWidth="40" Command="EditingCommands.ToggleUnderline" CommandTarget="{Binding ElementName=XAMLRichBox}"> <TextBlock TextDecorations="Underline">U Microsoft Vietnam – DPE Team |WPF –Bài 3: Các điều khiển nâng cao trong WPF 13 <RichTextBox x:Name="XAMLRichBox" SpellCheck.IsEnabled="True" MinHeight="100"> Kết quả được minh hoạ trong Hình 3.4. Hình 3.4 – Xây dựng hộp soạn thảo đa năng đơn giản với các chức năng thay đổi kiểu chữ bằng WPF Câu hỏi ôn tập 1. Thuộc tính nào của một ComboBox cho phép khai báo nguồn dữ liệu? A. SelectedIndex B. ItemSource C. Text D. FontFamily Trả lời: B Microsoft Vietnam – DPE Team |WPF –Bài 3: Các điều khiển nâng cao trong WPF 14 2. Trong hộp chọn phông chữ, danh sách phông chữ hệ thống được lấy từ lớp nào? A. Fonts.SystemFontFamilies B. Fonts.SystemTypefaces C. FontFamilyMapCollection Trả lời: A 3. Trong ví dụ về danh mục ảnh ở mục 3, phát triển thêm tính năng mới bằng việc bổ sung các check box vào đầu mỗi mục đồ uống. Một nút bấm có trách nhiệm hiển thị những đồ uống mà người dùng đã chọn bằng việc đánh dấu checkbox (chú ý có thể nhiều hơn 1 lựa chọn). Kết quả như trong hình minh hoạ dưới đây: Gợi ý: - Thêm điều khiển CheckBox vào mỗi chỉ mục con của ListBox đang dùng. Với mỗi điều khiển CheckBox, thêm hàm xử lý sự kiện Uncheck và Check. Viết mã C# các hàm tương ứng trong file code-behind của form chứa. - Thêm điều khiển Button vào sau ListBox (ví dụ, dùng StackPanel). Thêm hàm xử lý sự kiện Click của Button. Microsoft Vietnam – DPE Team |WPF –Bài 3: Các điều khiển nâng cao trong WPF 15 Sau đây là mã ví dụ: Phần mã XAML: <Window x:Class="Lesson3.Window4" xmlns="" xmlns:x="" Title="Lesson3 - Cau hoi on tap 3" Height="400" Width="300" > <!--Khai báo tạo lập một hộp danh mục với các thuộc tính về căn lề, chiều rộng, tên gọi,...--> <ListBox Margin="10,10,0,13" Width="280" Name="listBox1" HorizontalAlignment="Left" VerticalAlignment="Top"> <!--Khai báo tạo lập một chỉ mục con trong hộp danh mục với thuộc tính màu nền--> <!--Lồng vào chỉ mục này một StackPanel để có thể chứa nhiều hơn 1 phần tử UI con theo chiều ngang--> <CheckBox x:Name="chkOrangeJuice" Checked="HandleChecked" Unchecked="HandleUnchecked"> <TextBlock Margin="5" VerticalAlignment="Center" FontFamily="Times New Roman" FontStyle="Italic" FontSize="18">Nước cam tươi <CheckBox x:Name="chkKiwiJuice" Checked="HandleChecked" Unchecked="HandleUnchecked"> Microsoft Vietnam – DPE Team |WPF –Bài 3: Các điều khiển nâng cao trong WPF 16 <TextBlock Margin="5" VerticalAlignment="Center" FontFamily="Times New Roman" FontStyle="Italic" FontSize="18">Nước kiwi ép <CheckBox x:Name="chkMangoJuice" Checked="HandleChecked" Unchecked="HandleUnchecked"> <TextBlock Margin="5" VerticalAlignment="Center" FontFamily="Times New Roman" FontStyle="Italic" FontSize="18">Nước soài ép <CheckBox x:Name="chkMilk" Checked="HandleChecked" Unchecked="HandleUnchecked"> <TextBlock Margin="5" VerticalAlignment="Center" FontFamily="Times New Roman" FontStyle="Italic" FontSize="18">Sữa tươi tiệt trùng <CheckBox x:Name="chkCafe" Checked="HandleChecked" Unchecked="HandleUnchecked"> <TextBlock Margin="5" VerticalAlignment="Center" FontFamily="Times New Roman" FontStyle="Italic" FontSize="18">Cà phê Espresso Microsoft Vietnam – DPE Team |WPF –Bài 3: Các điều khiển nâng cao trong WPF 17 Gọi đồ uống Phần mã C#: public partial class Window4 : System.Windows.Window { //Đặt các cờ xác định lựa chọn tương ứng với các loại đồ uống bool selectedOrange; bool selectedKiwi; bool selectedMango; bool selectedMilk; bool selectedEspesso; public Window4() { InitializeComponent(); // //Khởi tạo biến đánh dấu chọn selectedOrange = false; selectedKiwi = false; selectedMango = false; selectedMilk = false; selectedEspesso = false; } //Hàm xử lý sự kiện bỏ chọn (Unchecked) của mỗi checkbox //Lưu ý: Ở đây ta chỉ sử dụng một hàm duy nhất xử lý sự kiện này cho mọi checkbox //Để phân biệt checkbox nào phát động sự kiện, ta dựa vào tham số sender và so sánh nó với các checkbox private void HandleUnchecked(object sender, RoutedEventArgs e) { if (sender.Equals(chkCafe))selectedEspesso = false; if (sender.Equals(chkKiwiJuice)) selectedKiwi = false; Microsoft Vietnam – DPE Team |WPF –Bài 3: Các điều khiển nâng cao trong WPF 18 if (sender.Equals(chkMangoJuice)) selectedMango = false; if (sender.Equals(chkMilk)) selectedMilk = false; if (sender.Equals(chkOrangeJuice)) selectedOrange = false; } //Hàm xử lý sự kiện bỏ chọn (checked) của mỗi checkbox (tương tự như trên) private void HandleChecked(object sender, RoutedEventArgs e) { if (sender.Equals(chkCafe)) selectedEspesso = true; if (sender.Equals(chkKiwiJuice)) selectedKiwi = true; if (sender.Equals(chkMangoJuice)) selectedMango = true; if (sender.Equals(chkMilk)) selectedMilk = true; if (sender.Equals(chkOrangeJuice)) selectedOrange = true; } //Hàm xử lý sự kiện hiển thị các đồ uống được chọn private void DislayCustomerChoices(object sender, RoutedEventArgs e) { String choices = "Ban da chon "; bool selected = false; // if (selectedOrange) { choices += "Nuoc cam; "; selected = true; } // if (selectedMilk) { choices += "Sua tuoi; "; selected = true; } // if (selectedMango) { Microsoft Vietnam – DPE Team |WPF –Bài 3: Các điều khiển nâng cao trong WPF 19 choices += "Nuoc soai ep; "; selected = true; } // if (selectedEspesso) { choices += "Cafe Espresso;"; selected = true; } // if (!selected) choices = "Ban chua chon do uong nao"; // MessageBox.Show(choices); } } 4. Trong điều khiển Expander, ta thường tạo dòng text mô tả nội dung bên trong của Expander, luôn xuất hiện trên Expander bên cạnh mũi tên chỉ trạng thái của Expander. Muốn thiết lập nội dung của dòng text này, ta dùng thuộc tính gì của điều khiển Expander? A. Content B. Text C. Header D. Source Trả lời: C 5. Trong ToolBar kết hợp với RichTextBox, thuộc tính nào của nút bấm hai trạng thái ToggleButton xác định chức năng sửa đổi văn bản cần kích hoạt? A. Command B. CommandTarget C. Cả hai thuộc tính trên Trả lời: A 6. Trong ToolBar kết hợp với RichTextBox, thuộc tính nào của nút bấm hai trạng thái ToggleButton xác định đối tượng RichTextBox có chức năng sửa đổi văn bản cần kích hoạt? Microsoft Vietnam – DPE Team |WPF –Bài 3: Các điều khiển nâng cao trong WPF 20 A. Command B. CommandTarget C. Cả hai thuộc tính trên Trả lời: B Tài liệu tham khảo 1.Creating ImageListBox in WPF, URL: 2.WPF ListBox Tutorial, URL: 3. WPF Sample Series - Expander Control With Popup Content. URL: 4. WPF RichTextBox, URL: sharpcorner.com/UploadFile/mahesh/WPFRichTextBox09072008194855PM/WPFRichTextBox.aspx 5. Mastering the WPF RichTextBox, URL: Microsoft Vietnam – DPE Team |WPF – Bài 4: Thực đơn (Menu) và thanh công cụ (Toolbar) - WPF 1 Bài 4 THỰC ĐƠN (MENU) VÀ THANH CÔNG CỤ (TOOLBAR) - WPF Thực đơn (Menu) và thanh công cụ (Toolbar) là một trong những thành phần quan trọng của cửa sổ, chúng chứa đựng các chức năng chính của chương trình mà người dùng có thể thực hiện. Thanh thực đơn chứa hầu hết tất cả chức năng chính của chương trình, tổ chức theo dạng phân cấp, trong khi thanh công cụ thường chứa một số chức năng thiết yếu mà người dùng hay quan tâm dưới dạng các biểu tượng hình ảnh để người dùng có thể thao tác một cách nhanh chóng. Hình 4.1 minh họa cửa sổ chương trình với thanh thực đơn và thanh công cụ. Bài này giới thiệu phương pháp xây dựng và sử dụng Thực đơn và Thanh công cụ bằng ngôn ngữ XAML trong ứng dụng WPF từ những ví dụ đơn giản là các mục menu (Menu Item) thông thường (không có biểu tượng và trạng thái) đến những ví Menu Item với biểu tượng hình ảnh (Icon) và các trạng thái (Checked và UnChecked). 1. Xây dựng thực đơn và sử dụng thực đơn Thực đơn (Menu) là điều khiển gồm nhiều phần tử được tổ chức dưới dạng phân cấp. Thanh thực đơn thường nằm trên đỉnh cửa số (dưới thanh tiêu đề). Các phẩn tử thực đơn (Menu Item) xuất hiện Thanh công cụ với các biểu tượng bằng hình ảnh Thực đơn Hình 4.1. Một ví dụ về cửa số với thực đơn và thanh công cụ Microsoft Vietnam – DPE Team |WPF – Bài 4: Thực đơn (Menu) và thanh công cụ (Toolbar) - WPF 2 trên thanh thực đơn còn được gọi là Menu Item mức đỉnh. Mỗi Menu Item mức đỉnh có thể chứa nhiều Menu Item cấp dưới (Sub Menu) hoặc được gắn trực tiếp với các bộ quản lý sự kiện (Event handler) như sự kiện Click hay các lệnh của hệ thống được xây dựng sẵn (như Copy, Cut, Paste,..). Tương tự như vậy, mỗi Menu Item cấp dưới lại có thể chứa nhiều Menu Item cấp dưới của chính nó. Khi một Menu Item chứa các Menu Item cấp dưới thì thường được gọi là Popup Menu, các Menu Item cấp dưới sẽ xuất hiện khi người dùng nhấn chuột lên Popup Menu. Nếu Menu Item được gắn trực tiếp với với bộ quản lý sự kiện hay một lệnh của hệ thống thì được gọi là Command Menu, nó sẽ thực thi một câu lệnh mong muốn khi người dùng nhấn chuột hoặc nhấn phím tắt (ký tự trên bàn phím gắn với Menu Item) để chọn nó. Ta sẽ tìm hiểu từng bước xây dựng và sử dụng menu bắt đầu từ Menu với các Menu Item đơn giản, tiếp đến là các Menu Item có trạng thái (Checked, UnChecked) và Menu Item có biểu tượng hình ảnh. 1.1 Xây dựng thực đơn với các Menu Item đơn giản Trong phần này ta tìm hiểu từng bước xây dựng một thanh menu đơn giản gồm 3 Menu Item mức đỉnh là Thực đơn 1, Thực đơn 2 và Thực đơn 3. Trong đó, Thực đơn 1 và Thực đơn 2 là các Menu Popup (có chứa các menu con), Thực đơn 3 là loại Command Menu Item, nó không chứa Menu con mà sẽ thực thi một câu lệnh khi ta nhấn chuột vào nó như minh họa ở Hình 4.2. Hình 4.3 minh họa Thực đơn 2 có hai Menu Item cấp dưới là Thực đơn 21 và Thực đơn 22. Trong đó, Thực đơn 21 là Popup Menu chứa hai thực đơn cấp dưới của nó là Thực đơn 211 và Thực đơn 212, Thực đơn 22 là Command Menu Item. Thực đơn 1 là một Popup Menu Các menu Item mức đỉnh Hình 4.2. Một ví dụ về cửa số với thanh thực đơn Thực đơn 3 là một Command Menu Microsoft Vietnam – DPE Team |WPF – Bài 4: Thực đơn (Menu) và thanh công cụ (Toolbar) - WPF 3 Ta có thể tạo menu bằng công cụ trực quan hoặc gõ trực tiếp mã lệnh XAML. Tạo Menu bằng công cụ trực quan. Xem hình 4.4 minh họa công cụ tạo Menu cho ứng dụng WPF bằng Visual Studio 2008. Chọn menu từ ToolBox, sau đó Nhấn chuột lên cửa sổ để tạo Menu mới. Tiếp đến nhấn nút trên thanh Properties của Menu để mở hộp thoại quản lý các Menu Item như hình 4.5. Thực đơn 22 là một Command Menu Hình 4.3. Ví dụ về thực đơn cấp dưới là một Popup Menu Thực đơn 21 là một Popup Menu Thực đơn 2 là một Popup Menu Microsoft Vietnam – DPE Team |WPF – Bài 4: Thực đơn (Menu) và thanh công cụ (Toolbar) - WPF 4 Hình 4.5 là hộp thoại quản lý các Menu Item, nhấn nút để thêm Menu Item và nhập tiêu đề cho Menu Item ở mục Header. Nếu muốn thêm các Menu Item cấp dưới của Menu Item hiện tại, nhấn nút . Hình 4.4 Công cụ soạn thảo Menu cho ứng dụng WPF trong Visual Studio 2008 Tiêu đề của Menu Chọn mục Menu từ Toolbox Thêm các Menu Item cấp dưới Microsoft Vietnam – DPE Team |WPF – Bài 4: Thực đơn (Menu) và thanh công cụ (Toolbar) - WPF 5 Sử dụng mã XAML để tạo thực đơn Đoạn mã trình Menu trên bằng XAML: <MenuItem Header="_Copy" Command="ApplicationCommands.Copy" ToolTip="Copy văn bản"/> <MenuItem Header="_Cut" Command="ApplicationCommands.Cut" ToolTip="Cắt văn bản"/> <MenuItem Header="_Paste" Command="ApplicationCommands.Paste" ToolTip="Dán văn bản"/> <MenuItem Header="Thực đơn 211" Click="MenuItem211_Click" /> <MenuItem Header="Thực đơn 212" Click="MenuItem212_Click" /> Tiêu đề của Menu Item Hình 4.5. Hộp thoại Quản lý các Menu Item Thêm Menu Item cấp dưới Thêm một Menu Item mới Microsoft Vietnam – DPE Team |WPF – Bài 4: Thực đơn (Menu) và thanh công cụ (Toolbar) - WPF 6 <MenuItem Header="Thực đơn _3" Click="MenuItem3_Click" Name="Menu3" /> Thanh Menu được bắt đầu bằng thẻ và kết thúc bằng thẻ đóng . Có nhiều thuộc tính của thẻ này, trong ví dụ trên thì Height="22" : Chiều cao menu là 22 pixel. Name="menu1" : Tên của menu là menu1. Tên menu được mã trình C# sử dụng để quản lý nó. VerticalAlignment="Top" : Menu được căn để nằm bên trên của Grid chứa nó. Các Popup Menu được tạo bởi thẻ và kết thúc bằng thẻ đóng . Giữa cặp thẻ này là các thẻ khác để tạo nên các Menu Item cấp dưới của nó. Các Command Menu thì được tạo bởi thẻ , không có thẻ đóng. Một số thuộc tính cơ bản của Menu Item bao gồm Header="Thực đơn _1": Tiêu đề hay nhãn của Menu Item. Dấu gạch dưới đặt trước ký tự sẽ được sử dụng làm phím tắt khi kết hợp với phím Alt để gọi Menu Item bằng bàn phím. Trong ví dụ này thì ký tự 1 được dùng làm phím tắt cho Menu Item “Thực đơn 1”, ký tự được dùng làm phím tắt sẽ được hiển thị với dấu gạch chân khi người dùng nhấn phím Alt để mở Menu. Name="Menu1": Tên của Menu Item, cần thiết cho mã trình C# có thể can thiệp vào Menu Item. ToolTip="Cắt văn bản": Lời chú thích cho Menu Item khi di chuột qua. Đối với các Command Menu, có hai cơ chế thực thi lệnh khi chọn Menu. Nếu muốn gắn Command Menu với các lệnh có sẵn của hệ thống như: Copy, Cut, Paste,.. thì ta sử dụng thuộc tính Command của Menu Item. Ví dụ, lệnh <MenuItem Header="_Copy" Command="ApplicationCommands.Copy"/> làm cho Menu Item Copy này sẽ thực hiện công việc copy dòng văn bản đang được chọn trong cửa sổ vào bộ nhớ đệm. Chú ý, các lệnh của hệ thống bắt đầu bằng ApplicationCommands. Nếu muốn gắn Command Menu với các hàm xử lý sự kiện tự định nghĩa thì sử dụng thuộc tính Click của Menu Item. Ví dụ, <MenuItem Header="Thực đơn 211" Click="MenuItem211_Click" /> để yêu cầu khi chọn "Thực đơn 211" thì sẽ gọi hàm MenuItem211_Click. Dưới đây là đoạn mã trình C# khai báo các hàm xử lý sự kiện khi nhấn vào các Menu khai báo bằng XAML trên. Khi các menu được chọn thì các hàm tương ứng được khai báo trong thuộc tính Click sẽ được gọi và làm nhiệm vụ đơn giản làm hiển thị hộp thông báo. Microsoft Vietnam – DPE Team |WPF – Bài 4: Thực đơn (Menu) và thanh công cụ (Toolbar) - WPF 7 namespace WpfApplication1 { /// /// Interaction logic for Window1.xaml /// public partial class Window1 : Window { public Window1() { InitializeComponent(); } //Hàm xử lý sự kiện nhấn Menu "Thực đơn 211" private void MenuItem211_Click(object sender, RoutedEventArgs e) { MessageBox.Show("Bạn chọn Menu 211"); } //Hàm xử lý sự kiện nhấn Menu "Thực đơn 212" private void MenuItem212_Click(object sender, RoutedEventArgs e) { MessageBox.Show("Bạn chọn Menu 212"); } //Hàm xử lý sự kiện nhấn Menu "Thực đơn 22" private void MenuItem22_Click(object sender, RoutedEventArgs e) { MessageBox.Show("Bạn chọn Menu 22"); } //Hàm xử lý sự kiện nhấn Menu "Thực đơn 3" private void MenuItem3_Click(object sender, RoutedEventArgs e) { MessageBox.Show(" Bạn chọn Menu 3"); } } } Microsoft Vietnam – DPE Team |WPF – Bài 4: Thực đơn (Menu) và thanh công cụ (Toolbar) - WPF 8 1.2 Menu Item với trạng thái Checked và Unchecked Khi làm việc với Menu, đôi khi ta có những chức năng với đặc thù có hai trạng thái On/Off. Ví dụ như chương cần có một Menu Item để làm cho một Textbox hiển thị ở dạng chữ đậm và chữ thường, người dùng mong muốn Menu Item thể hiện được trạng thái On/Off tương ứng với kiểu chữ (chữ đậm/chữ thường) trên Textbox. Điều khiển Menu của WPF cung cấp cho chúng ta loại Menu Item với hai trạng thái Checked và UnChecked. Để tạo ra Menu Item có trạng thái, ta sử dụng thuộc tính IsCheckable="True" của Menu Item. Mã lệnh tạo "Thực đơn 23" như sau: <MenuItem Header="Thực đơn 23" IsCheckable="True" Checked="Menu23_Checked" Unchecked="Menu23_Unchecked"/> Đối với Menu Item có trạng thái, mỗi khi Menu được chọn sẽ phát sinh một trong hai sự kiện Checked và Uncheked tương ứng. Ta sử dụng các thuộc tính Checked và Unchecked để gắn các hàm xử lý sự kiện cần được thực thi. Ở ví dụ trên, hàm Menu23_Checked sẽ được gọi khi Menu "Thực đơn Hình 4.6. Minh họa Menu Item với trạng thái Checked và UnChecked Khi thực đơn không được chọn thì có biểu tượng Khi thực đơn không được chọn thì không có biểu tượng Microsoft Vietnam – DPE Team |WPF – Bài 4: Thực đơn (Menu) và thanh công cụ (Toolbar) - WPF 9 23" được đánh dấu, và hàm Menu23_Unchecked được gọi khi Menu "Thực đơn 23" được bỏ dấu chọn. Mã nguồn minh họa của hai hàm trên như sau: public partial class Window1 : Window { public Window1() { InitializeComponent(); } //........................................................... //Hàm xử lý sự kiện khi Menu "Thực đơn 23" được đánh dấu chọn private void Menu23_Checked(object sender, RoutedEventArgs e) { //Thiết lập thuộc tính chữ đậm cho textBox1 textBox1.FontWeight = FontWeights.Bold; } //Hàm xử lý sự kiện khi Menu "Thực đơn 23" được bỏ dấu chọn private void Menu23_Unchecked(object sender, RoutedEventArgs e) { //Thiết lập thuộc tính chữ thường cho textBox1 textBox1.FontWeight = FontWeights.Normal; } } 1.3 Menu Item với biểu tượng hình ảnh Với các ứng dụng xây dựng trên nền .Net 2.0, công việc xây dựng Thực đơn và Thanh công cụ với biểu tượng hình là khá đơn giản, có thể sử dụng công cụ thiết kế giao diện trực quan. Ví dụ, muốn tạo menu có biểu tượng hình ảnh (icon), chúng ta thêm Menu Trip vào form, sau đó thêm các mục cho thực đơn (Menu Item). Nhấn chuột phải lên từng mục và chọn “Set Image” là thành công. Tuy nhiên, khi xây dựng ứng dụng WPF, không có mục chọn “Set Image” khi nhấn chuột phải vào một mục trong thực đơn. Chúng ta phải nạp các tệp hình ảnh, biểu tượng và tài nguyên (Resource) của ứng dụng và viết một số lệnh XAML để gắn biểu tượng cho Menu Item. Nạp các tệp hình ảnh, biểu tượng vào tài nguyên của ứng dụng. i. Trên thanh thực đơn Visual Studio, chọn Project → Properties sẽ hiện ra bảng cài đặt các thông số cài đặt cho ứng dụng. Microsoft Vietnam – DPE Team |WPF – Bài 4: Thực đơn (Menu) và thanh công cụ (Toolbar) - WPF 10 ii. Chọn mục resources. iii. Trong mục Add Resource chọn Add Existing File nếu đã có sẵn File biểu tượng hình ảnh trên máy hoặc chọn New Images hay Add New Icon tùy ý. iv. Chú ý, sau khi thêm được các File hình ảnh biểu tượng vào tài nguyên, để các điều khiển trên cửa sổ như Menu, Toolbar sử dụng được chúng, ta phải thiết lập thuộc tính 'Build Action : Resource' và 'Copy to Output Directory : Do not copy'. Viết mã lệnh XAML gắn biểu tượng cho các Menu Item. <Image x:Key="copy" Source="Resources/Copy.png" Width="16" Height="16"> <Image x:Key="cut" Source="Resources/Cut.png" Width="16" Height="16"> <Image x:Key="paste" Source="Resources/Paste.png" Width="16" Height="16"> <MenuItem Header="_Copy" Command="ApplicationCommands.Copy" ToolTip="Copy văn bản" Icon="{StaticResource copy}" /> Thiết lập thuộc tính cho tài nguyên hình ảnh Hình 4.7. Thêm tài nguyên và thiết lập thuộc tính cho tài nguyên ảnh Microsoft Vietnam – DPE Team |WPF – Bài 4: Thực đơn (Menu) và thanh công cụ (Toolbar) - WPF 11 <MenuItem Header="_Cut" Command="ApplicationCommands.Cut" ToolTip="Cắt văn bản" Icon="{StaticResource cut}" /> <MenuItem Header="_Paste" Command="ApplicationCommands.Paste" ToolTip="Dán văn bản" Icon="{StaticResource paste}" /> <MenuItem Header="Thực đơn 23" IsCheckable="True" Checked="Menu23_Checked" Unchecked="Menu23_Unchecked"/> Chú cào cào nhỏ, ngồi trong đám cỏ. Như vậy, chúng ta đã xây dựng thành công thanh menu với các biểu tượng đẹp mắt hay menu với trạng thái Checked/UnChecked cũng như biết cách gắn các hàm xử lý sự kiện cho các menu. Phần tiếp theo ta sẽ tìm hiểu về thanh công cụ. 2. Xây dựng và sử dụng thanh công cụ (Toolbar) Thanh công cụ (Toolbar) là thanh chứa các chức năng dưới dạng các dãy hình ảnh biểu tượng, mỗi biểu tượng gắn với một mục chức năng cụ thể. Thông thường các Toolbar chứa những chức năng thiết yếu mà người dùng hay quan tâm nhất, bởi vì thanh Toolbar có ưu điểm là dễ dàng thao tác. Một cửa số có thể có một hoặc nhiều thanh Toolbar. Trong phần này ta tìm hiểu phương pháp xây dựng thanh Toolbar với các nút chức năng thông thường và các nút chức năng có trạng thái (Checked/UnChecked). Microsoft Vietnam – DPE Team |WPF – Bài 4: Thực đơn (Menu) và thanh công cụ (Toolbar) - WPF 12 2.1. Nút công cụ thông thường Chúng ta bắt đầu tìm hiểu các bước xây dựng thanh Toolbar với các nút bấm đơn giản như ví dụ minh họa ở hình 4.9. Thanh công cụ bao gồm năm nút: Copy , Cut, Paste thực hiện các chức năng có sẵn của hệ thống, Nút A và a gắn với hàm xử lý sự kiện tự xây dựng, làm nhiệm vụ tăng/giảm cỡ chữ của Textbox bên dưới. Thanh công cụ được xây dựng bằng đoạn mã XAML sau: <ToolBar Height="26" Name="toolBar1" Width="280" HorizontalAlignment="Left" > <Button Height="23" Name="button1" Width="23" Command="ApplicationCommands.Copy" ToolTip="Copy văn bản"> <Image Source="Resources/Copy.png" Width="16" Height="16" HorizontalAlignment="Left" /> Copy Hình 4.9. Ví dụ minh họa Toolbar Cut Paste Tăng cỡ chữ Giảm cỡ chữ Toolbar nằm ngang Toolbar nằm dọc Hình 4.8.Thanh công cụ - Toolbar Microsoft Vietnam – DPE Team |WPF – Bài 4: Thực đơn (Menu) và thanh công cụ (Toolbar) - WPF 13 <Button Height="23" Name="button2" Width="23" Command="ApplicationCommands.Cut" ToolTip="Cắt văn bản"> <Image Source="Resources/Cut.png" Width="16" Height="16" HorizontalAlignment="Left" /> <Button Height="23" Name="button3" Width="23" Command="ApplicationCommands.Paste" ToolTip="Dán văn bản"> <Image Source="Resources/Paste.png" Width="16" Height="16" HorizontalAlignment="Left" /> <Button Height="23" Name="button4" ToolTip="Tăng cỡ chữ" Width="23" Click="IncreaseFont_Click"> <Image Source="Resources/inc.ico" Width="16" Height="16" HorizontalAlignment="Left" /> <Button Height="23" Name="button5" ToolTip="Giảm cỡ chữ" Width="23" Click="DecreaseFont_Click"> <Image Source="Resources/Dec.ico" Width="16" Height="16" HorizontalAlignment="Left" /> Mã XAML tạo thanh công cụ được được bắt đầu bằng thẻ và kết thúc bằng thẻ đóng . Các nút lệnh (Button) của thanh công cụ được tạo bởi thẻ và kết thúc bằng thẻ đóng . Name=" button1": Tên của Button, cần thiết cho mã trình C# có thể can thiệp vào Button. ToolTip="Copy văn bản ": Lời chú thích cho Button khi di chuột qua. Có hai cơ chế thực thi lệnh khi chọn nút lệnh trong Toolbar. Nếu muốn gắn nút lệnh với các lệnh có sẵn của hệ thống như: Copy, Cut, Paste,.. thì ta sử dụng thuộc tính Command của Button. Ví dụ, lệnh <Button Height="23" Name="button1" Width="23" Command="ApplicationCommands.Copy" ToolTip="Copy văn bản"> làm cho Microsoft Vietnam – DPE Team |WPF – Bài 4: Thực đơn (Menu) và thanh công cụ (Toolbar) - WPF 14 nút lệnh Copy này sẽ thực hiện công việc copy dòng văn bản đang được chọn trong cửa sổ vào bộ nhớ đệm. Chú ý, các lệnh của hệ thống bắt đầu bằng ApplicationCommands. Nếu muốn gắn nút lệnh với các hàm xử lý sự kiện tự định nghĩa thì sử dụng thuộc tính Click của Button. Ví dụ, <Button Height="23" Name="button4" ToolTip="Tăng cỡ chữ" Width="23" Click="IncreaseFont_Click"> để yêu cầu khi chọn "button4" thì sẽ gọi hàm IncreaseFont_Click. Giữa cặp thẻ và là thẻ <Image Source="Resources/Copy.png" Width="16" Height="16" HorizontalAlignment="Left" /> để định nghĩa hình ảnh biểu tượng của nút bấm. Thẻ dùng để tạo ra vạch phân cách giữa cách nút bấm. Mã nguồn minh họa của hai hàm xử lý sự kiện nhấn nút button4và button5như sau: public partial class Window1 : Window { public Window1() { InitializeComponent(); } //........................................................... //Hàm xử lý sự kiện khi button4 được nhấn private void IncreaseFont_Click(object sender, RoutedEventArgs e) { if (textBox1.FontSize < 18) { textBox1.FontSize += 2;//Tăng cỡ font chữ của textBox1 lên 2 đơn vị } } //Hàm xử lý sự kiện khi button5 được nhấn private void DecreaseFont_Click(object sender, RoutedEventArgs e) { if (textBox1.FontSize > 10) { textBox1.FontSize -= 2;//Giảm cỡ font chữ của textBox1 lên 2 đơn vị Microsoft Vietnam – DPE Team |WPF – Bài 4: Thực đơn (Menu) và thanh công cụ (Toolbar) - WPF 15 } } } 2.2. Nút công cụ có trạng thái Ngoài các nút bấm thông thường, thanh công cụ còn cho phép tạo ra các nút bấm có trạng thái, khi ở trang thái được chọn (Checked) thì sẽ có màu nền khác và có đường viền để người dùng có thể nhận biết được trạng thái của nút đó (xem minh họa hình 4.10). Thanh công cụ với các nút có trạng thái được xây dựng bằng đoạn mã XAML sau: <ToolBar Height="26" Name="toolBar1" Width="280" HorizontalAlignment="Left" > <Button Height="23" Name="button1" Width="23" Command="ApplicationCommands.Copy" ToolTip="Copy văn bản"> <Image Source="Resources/Copy.png" Width="16" Height="16" HorizontalAlignment="Left" /> <Button Height="23" Name="button2" Width="23" Command="ApplicationCommands.Cut" ToolTip="Cắt văn bản"> <Image Source="Resources/Cut.png" Width="16" Height="16" HorizontalAlignment="Left" /> Hình 4.10. Ví dụ minh họa Toolbar với trạng thái Checked và UnCheked Nút B đang ở trạng thái Checked Nút I đang ở trạng thái UnChecked Microsoft Vietnam – DPE Team |WPF – Bài 4: Thực đơn (Menu) và thanh công cụ (Toolbar) - WPF 16 <Button Height="23" Name="button3" Width="23" Command="ApplicationCommands.Paste" ToolTip="Dán văn bản"> <Image Source="Resources/Paste.png" Width="16" Height="16" HorizontalAlignment="Left" /> <Button Height="23" Name="button4" ToolTip="Tăng cỡ chữ" Width="23" Click="IncreaseFont_Click"> <Image Source="Resources/inc.ico" Width="16" Height="16" HorizontalAlignment="Left" /> <Button Height="23" Name="button5" ToolTip="Giảm cỡ chữ" Width="23" Click="DecreaseFont_Click"> <Image Source="Resources/Dec.ico" Width="16" Height="16" HorizontalAlignment="Left" /> <CheckBox Name="check1" ToolTip="Chữ đậm" Checked="Bold_Checked" Unchecked="Bold_Unchecked"> <Image Source="Resources/bold.png" Width="16" Height="16" HorizontalAlignment="Left" /> <CheckBox Name="check2" ToolTip="Chữ nghiêng" Checked="Italic_Checked" Unchecked="Italic_Unchecked"> <Image Source="Resources/Italic.png" Width="16" Height="16" HorizontalAlignment="Left" /> Khác với các nút lệnh thông thường được tạo bởi thẻ và kết thúc bằng thẻ đóng , các nút lệnh có trạng thái được tạo nên bởi thẻ <CheckBox Name="check1" ToolTip="Chữ đậm" Checked="Bold_Checked" Unchecked="Bold_Unchecked"> và kết thúc bằng thẻ đóng . Nút lệnh có trạng thái phát sinh hai sự kiện Checked và Unchecked,tương ứng với trạng thái của nút là được chọn hay bỏ chọn khi người dùng nhấn nút. Trong ví dụ trên, khi nút check1 được chọn Microsoft Vietnam – DPE Team |WPF – Bài 4: Thực đơn (Menu) và thanh công cụ (Toolbar) - WPF 17 thì hàm Bold_Checked được gọi và nút check1bỏ chọn thì hàm Bold_Unchecked được gọi. Hai hàm này do ta tự xây dựng với mã lệnh như sau. Mã nguồn minh họa của hai hàm xử lý sự kiện nhấn nút check1: public partial class Window1 : Window { public Window1() { InitializeComponent(); } //........................................................... private void Bold_Checked(object sender, RoutedEventArgs e) { //Thiết lập thuộc tính chữ đậm cho textBox1 textBox1.FontWeight = FontWeights.Bold; } private void Bold_Unchecked(object sender, RoutedEventArgs e) { //Thiết lập thuộc tính chữ thường cho textBox1 textBox1.FontWeight = FontWeights.Normal; } private void Italic_Checked(object sender, RoutedEventArgs e) { //Thiết lập thuộc tính chữ nghiêng cho textBox1 textBox1.FontStyle = FontStyles.Italic; } private void Italic_Unchecked(object sender, RoutedEventArgs e) { //Thiết lập thuộc tính chữ thẳng đứng cho textBox1 textBox1.FontStyle = FontStyles.Normal; } } Ngoài các nút bấm có trạng thái kiểu này, thanh công cụ còn cho phép tạo ra các nút bấm có trạng thái loại trừ nhau bằng cách sử dụng thẻ để tạo ra nút bẩm. Microsoft Vietnam – DPE Team |WPF – Bài 4: Thực đơn (Menu) và thanh công cụ (Toolbar) - WPF