Đoạn code chương trình bằng XAML để đưa hình ảnh dữ liệu vào
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
<ListBoxItem> ta thêm vào một <StackPanel
Orientation="Horizontal">
theo chiều ngang, trong đó, chứa một phần tử <Image> và 1 phần tử <TextBlock> . Nguồn dữ liệu ảnh được xác định qua thuộc tính Source="<tên ảnh đã đượcbổsung vào project>".
Kết quả chương trình:
Câu hỏi ôn tập và bài tập
Áp dụng lệnh while, do … while để thực hiện công việc sau:
- Tính tổng các số từ 1 n với n là số nguyên được nhập vào từ bàn phím.
- Tính tổng các số chẵn và số lẽ từ 1 n với n là số nguyên được nhập vào từ bàn phím.
BÀI 6: SỬ DỤNG EXPANDER
Mã bài: 24.06 Giới thiệu:
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.
Mục tiêu:
- Biết công dụng của Expander
- Thiết kế giao diện sử dụng Expander - Đảm bảo an toàn cho người và thiết bị
Nội dung chính: 6.1. Tạo Expander
Hình 6.1. Hiển thị Expander Hình 6.2. Hiển thị danh sách Expander
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.
Đoạn code XAML để thêm Expander
Hình 6.3. Kết quả sau khi thêm Expander
6.2. Đặt ListBox bên trong Expander
Đoạn code XAML để thêm ListBox
Hình 6.4. So sánh trước và sau khi có ListBox
6.3. Khai báo các chỉ mục con
Kết quả chương trình
Hình 6.5. Kết quả Expander đồ uống
Kết quả chương trình
Hình 6.6. Kết quả Expander đồ ăn
6.4. Trang trí các chỉ mục con
Việc trang trí các chỉ mục con cần có cấu trúc thư mục để lưu trữ các hình ảnh phù hợp với yêu cầu. Cấu trúc lưu trữ như sau:
Hình 6.7. Thư mục lưu trữ hình ảnh
Câu hỏi ôn tập và bài tập
1. Sử dụng câu lệnh break cho bài tập 5.1
2. Viết chương trình đặt một nhãn bất kỳ và thực hiện in ra câu lệnh “Chúc các bạn học tốt môn học”.
3. Từ bài tập 2 cho phép người dùng nhập vào tên học sinh và nhảy tới vị trí câu lệnh Chúc các bạn học tốt môn học”.
Thư mục lưu trữ hình ảnh
Lấy đường dẫn hình để trang trí
BÀI 7: TẠO HỘP SOẠN THẢO VĂN BẢN RICHTEXTBOX
Mã bài: 24.07 Giới thiệu:
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.
Mục tiêu:
- Biết công dụng của RichTextBox - Thiết kế giao diện soạn thảo văn bản - Tạo ứng dụng soạn thảo văn bản đơn giản - Đảm bảo an toàn cho người và thiết bị.
Nội dung chính: 7.1. Tạo Control
Hình 7.1. Kết quả thêm RichTextBox vào Form
7.2. Tạo chức năng cơ bản
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ủahộpsoạn thảo, giá trịnày ngầm địnhbằng1.
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.v…. 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.
7.3. 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.
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:
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).
Hình 7.2. Thêm ToolBar có 3 chế độ hiển thị chữ
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):
Hình 7.3. Kết quả hiển thị màn hình soạn thảo đơn giản giống NotePad
Hình 7.4. Kiểm tra điền đúng các từ lỗi tiếng Anh
BÀI 8: TẠO MENU
Mã bài: 24.08 Giới thiệu:
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.
Mục tiêu:
- Trình bày công dụng các mục trong menu - Thiết kế các mục cho menu
- Xử lý sự kiện cho các mục menu - Đảm bảo an toàn cho người và thiết bị
Nội dung chính:
8.1. Xây dựng menu và các mục đơn giả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 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ó.
Hình 8.1. Ví dụ về Menu
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.
Hình 8.3. Đặt tên và tạo các Menu con
Thêm các đối tượng con vào Menu
Hình 8.4. Màn hình thêm các Menu con và cách thức làm việc
Đoạn code XAML để tạo một Menu đơn giản:
Tạo thêm mục con của các mục Menu
Tiêu đề hiển thị mục con của Menu Danh sách các mục
con
Chọn lưa vào thêm mục con
Thanh Menu được bắt đầu bằng thẻ <Menu> và kết thúc bằng thẻ đóng
</Menu> . Có nhiều thuộc tính của thẻ này, trong ví dụ trên thì
Height="26" : Chiều cao menu là 26 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ẻ <MenuItem> và kết thúc bằng thẻ đóng </MenuItem>.
Giữa cặp thẻ này là các thẻ <MenuItem> 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ẻ <MenuItem/>, không có thẻ đóng. Một số thuộc tính cơ bản của Menu Item bao gồm
Header="…": 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="…": 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="…": 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.
8.2. Tạo các Menu có trạng thái Checked/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.
Hình 8.1. Màn hình để chọn thêm một lớp mới vào Project Hình 8.2. Màn hình đặt tên cho lớp đối tượng
Hình 8.3. Màn hình làm việc của cửa sổ lớp đối tượng được tạo
8.3. Tạo mục Menu có 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.
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'.
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ụ.
Bảng 8.1. Bảng mô tả các từ khóa định nghĩa lớp
Từ khóa Giải thích
Public Truy xuất mọi nơi
Protected Truy xuất trong nội bộ lớp hoặc trong các lớp con
Internal Truy xuất trong nội bộ chương trình (Assembly)
protected internal Truy xuất nội trong chương trình (assembly) và
trong các lớp con
private (mặc định) Chỉ được truy xuất trong nội bộ lớp
Ví dụ: Khai báo một lớp có tên là Box gồm các thuộc tính: chiều dài, chiều rộng, chiều cao.
Khai báo và khởi tạo thành viên thuộc tính (biến) tương tự cách khai báo biến thông thường nhưng có sử dụng thêm Access Modifiers để quy định cấp độ truy cập.
Câu hỏi ôn tập và bài tập
1. Tạo lớp đối tượng sinh viên bao gồm các thông tin: masv (mã sinh viên), tennv (tên sinh viên), ngaysinh (ngày sinh), diachi (địa chỉ)
2. Tạo lớp đối tượng đồng hồ bao gồm các thông tin: thoigian, gio, phut, giay. 3. Tạo lớp đối tượng sản phẩm bao gồm các thông tin: masp (mã sản phẩm), tensp (tên sản phẩm), gia (giá), ngaynhap (ngày nhập), ngayxuat (ngày xuất).
BÀI 9 : TẠO TOOLBAR
Mã bài: 24.09 Giới thiệu:
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).
Mục tiêu:
- Biết công dụng các mục trong toolbar - Thiết kế các mục cho toolbar
- Xử lý sự kiện cho các mục toolbar - Đảm bảo an toàn cho người và thiết bị
Nội dung chính:
9.1. Tạo nút công cụ đơn giản
Ví dụ:
Hình 9.1. Màn hình hiển thị các ToobBar trong phần mềm
Hiển thị của ToolBar trên điều khiển ToolBox
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 9.3. 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.
Hình 9.3. Kết quả ví dụ về ToolBar
Cần chuẩn bị các hình ảnh để tạo các điều khiển ToolBar
Thanh công cụ được xây dựng bằng đoạn mã XAML sau:
Mã XAML tạo thanh công cụ được được bắt đầu bằng thẻ <ToolBar> và kết thúc bằng thẻ đóng </ToolBar>.
Các nút lệnh (Button) của thanh công cụ được tạo bởi thẻ <Button> và