Chèn ảnh vào một SubItem bất kỳ trong ListView

Bạn đã từng sử dụng ListView để hiển thị danh sách bản ghi. Trong ListView, mặc định chỉ cho bạn hiển thị ảnh ở Cột đầu tiên. Vậy làm thếnào để có thể hiển thị ảnh ở 1 SubItem thuộc cột bất kỳ trong ListView? Bài viết này sẽ hướng dẫn bạn làm được điều đó!

Trong ví dụ này, tôi sẽ thay chữ giới tính Nam, Nữ trong danh sách = 2 hình ảnh đại diện tương ứng tại cột giới tính.

Để bắt đầu với bài này, bạn hãy thiết kế 1 Form đơn giản như sau:

Tiếp theo, bạn chuẩn bị 2 cái ảnh thể hiện giới tính Nam là "male.png" và nữ là "female.png" và đặt chúng vào Thư mục "Bin/Debug" của ứng dụng cho dễ lấy đường dẫn (Bạn có thể đặt vị trí khác nếu muốn). Ảnh bạn có thể Search trên http://iconfinder.com sẽ có luôn!!

Bây giờ bạn hãy lập trình để thêm 1 Item vào ListView:

private void btnAdd_Click(object sender, EventArgs e)

        {

            ListViewItem item = new ListViewItem((listView1.Items.Count+1).ToString());

            item.SubItems.Add(txtFullName.Text);

            string gender = "Nam";

            if (rdoFemale.Checked)

                gender = "Nữ";           

            item.SubItems.Add(gender);


            // Dùng thuộc tính Tag để lưu vết giới tính của 1 Item

            item.Tag = gender;

            listView1.Items.Add(item);

        }

Với đoạn code trên bạn đã có thể thêm các Item như thông thường.

Và để có thể vẽ ảnh vào 1 SubItem bạn hãy thiết lập thuộc tính OwnerDraw của ListView = True

Sau đó lập trình sử lý với 2 sự kiện: DrawSubItem và DrawColumnHeader như sau:

private void listView1_DrawSubItem(object sender, DrawListViewSubItemEventArgs e)
        {

            // Xác định điều kiện cột cần vẽ

            if (e.Header == this.clGender)

            {         

                // Tạo ảnh Icon tùy theo giới tính

                Image icon = Image.FromFile("male.png");             

                if(e.Item.Tag.ToString()=="Nữ")

                    icon = Image.FromFile("female.png"); 


                // Tạo kích thước vẽ ảnh, cách viền 10px

                var imageRect = new Rectangle(e.Bounds.X + 10, e.Bounds.Y, e.Bounds.Height, e.Bounds.Height);

                // Vẽ ảnh

                e.Graphics.DrawImage(icon, imageRect);              

            }
            else
            {

                // Mặc định là vẽ Subitem này như thông thường

                e.DrawDefault = true;                

            }           

        }     

        private void listView1_DrawColumnHeader(object sender, DrawListViewColumnHeaderEventArgs e)
        {

            // Mặc định là vẽ cột tiêu đề

            e.DrawDefault = true;

        }

Đến đây bạn có thể chạy thử nghiệm chương trình, hãy thêm các Item với các giới tính khác nhau, bạn sẽ được một kết quả như mong muốn:

Chúc bạn thành công!