Lập trình UD Desktop_05_PictureBox ListView

Bài trước: Lập trình UD Desktop_04_ComboBox DataBinding
-----

2.13       PictureBox


Bài 10. PictureBox


PictureBox là công cụ được sử dụng để hiển thị hình ảnh. Đừng nhầm lẫn về mặt chức năng giữa công cụ PictureBox và thuộc tính BackgroundImage.

Đề phòng trường hợp không hiển thị được hình ảnh trong PictureBox, có thể thiết lập một hình ảnh thay thế trong thuộc tính ErrorImage.

Quan sát cú pháp đề tải ảnh cho PictureBox:

pictureBox1.Image = new Bitmap(Application.StartupPath + "\\Resources\\a.jpg");

Ảnh được tải là ảnh kiểu Bitmap (có kiểu ảnh khác là ảnh Vector). Ảnh Bitmap còn có tên gọi khác là ảnh mành hóa (Rater Image) – dùng lưới các điểm ảnh, tức pixel để hiển thị hình ảnh. Mỗi pixel được gán một vị trí và một giá trị màu cụ thể. Ảnh Bitmap được tạo bởi ma trận các điểm ảnh.

Đọc thêm về ảnh Bitmap và Vector tại đây: http://thegioiinan.com/faq-37-anh-Vector-va-bitmap-la-gi-.html

Application.StartupPath sẽ trả về đường dẫn của tập tin thực thi, ví dụ: D:\Liv\Teaching\Lap trinh csdl\lgc\Demo\timHieuForm\timHieuForm\bin\Debug

Với cách chỉ ra đường dẫn của ảnh như ở đoạn mã ví dụ trên, thì thư mục Resources phải nằm cùng với thư mục chứa tập tin thực thi.

Lab 9. Tạo giao chương trình hiển thị hình ảnh.

[Giao diện khi chạy]



[Mô tả chức năng]

– Khi người dùng chọn một địa danh ở danh sách, hình ảnh tương ứng của địa danh sẽ được hiển thị ở hình bên cạnh

– Luôn đảm bảo hình ảnh được hiển thị vừa khít trong khung (thiết lập thuộc tính SizeMode là StretchImage)

[Gợi ý]

– Tạo một danh sách để chứa tên các địa danh, tối thiểu 05 địa danh, ví dụ:

List<string> ListDiaDanh = new List<string>() { "Đà Lạt", "Nha Trang", "Sài Gòn", "Quy Nhơn", "Bến Tre" };

– Cho hiển thị danh sách các địa danh trong ComboBox

cbDiaDanh.DataSource = ListDiaDanh;

­– Khi người dùng chọn một địa danh, thì hiển thị hình ảnh tương ứng

ComboBox cb = sender as ComboBox;
            if (cb.SelectedValue != null)
            {
                Bitmap bm = new Bitmap(Application.StartupPath + "\\Resources\\" + cb.SelectedValue.ToString() + extension);
                pbHienThiAnh.Image = bm;
            }

[Màn hình kết quả]



Câu hỏi 18. Đoạn mã Application.StartupPath dùng để làm gì?

2.14       ListView


Thiết lập các thuộc tính cho ListView

ListView là một control được sử dụng để hiển thị một danh sách các mục (gọi là các item), cho phép hiển thị biểu tượng đi kèm với các item. Ví dụ dễ hiểu nhất về ListView chính là cửa sổ bên phải File Explorer (hay Windows Explorer) của Windows, mỗi item sẽ tương ứng với một tập tin hoặc một thư mục.

Thuộc tính View của ListView được sử dụng để thiết lập chế độ hiển thị của dữ liệu bên trong. Ví dụ: LargeIcon, Details, SmallIcon, Tile.

Để gắn hình ảnh đi kèm với mỗi item, sử dụng thuộc tính LargeImageList. Hình ảnh được chứa trong control ImageList (là một control ẩn), ví dụ đặt tên là largeIcon. Trỏ thuộc tính LargeImageList tới largeIcon. Vào lại largeIcon để thêm vào các hình ảnh. Vào lại ListView, chọn Items, chọn hình ảnh cho từng item (lưu ý: thuộc tính View của ListView phải được thiết lập là LargeIcon thì mới nhìn thấy các hình ảnh để thiết lập). Có thể vào largeIcon để tăng kích thước ảnh thành 100x100.

Thêm một ImageList cho SmallImageList. Có thể copy từ largeIcon, đổi tên thành smallIcon và chỉnh kích thước của ảnh thành 20x20. Vào ListView, thiết lập thuộc tính View là SmallIcon, vào thuộc tính SmallImageList chọn smallIcon.

Muốn xem ListView ở chế độ Details cần thêm các cột (column) cho nó, vào thuộc tính Columns để thêm và đặt tiêu đề cho các cột. Để thêm dữ liệu cho các column, vào thuộc tính Items của ListView, vào tiếp SubItems.

Trong chế độ Details, để thiết lập chế độ chọn nguyên hàng, chuyển thuộc tính FullRowSelect thành True. Thuộc tính CheckBox bằng True sẽ cho phép người dùng check vào mỗi item.

Lab 10. Tạo và thiết lập ListView để hiển thị thông tin 5 quốc gia.

Thông tin 5 quốc gia:



[Giao diện chương trình]



[Mô tả chức năng]

– Chỉ bằng cách thiết lập các thuộc tính của ListView, tạo ra các giao diện cho các chế độ xem (View) là: LargeIcon, SmallIcon, Details, Tile, List.

– Khi người dùng bấm vào các nút phía trên, ListView sẽ hiển thị ở chế độ tương ứng.

­– Khi hiển thị ở chế độ Details thì có nút checkbox để người dùng có thể chọn từng quốc gia

<///// hết buổi 7
-----
Tiếp theo: Lập trình UD Desktop_06_ListView (tt) TreeView
Xem thêm: Danh sách các bài học