Sử dụng control ListView trong C# – Using ListView control in C#

image

     ListView là một control dùng để hiển thị một danh sách các item với các biểu tượng. Chúng ta có thể sử dụng một  ListView để tạo ra một giao diện giống như cửa sổ bên phải của Windows Explorer. Bài viết này sẽ trình bày các cách sử dụng cơ bản đối với control này.

1. Thêm một ListView control vào ứng dụng (adding the Listview control to the application)

Có 2 cách thêm một ListView vào ứng dụng:

–  Kéo thả ListView từ Toolbox vào Form:

image

–  Sử dụng code để add ListView vào Form:

ListView myListView = new ListView();   // Khai báo một ListView control.  
myListView.Size = new System.Drawing.Size(390, 100);   // Kích thước hiển thị
this.Controls.Add(myListView);          // Add ListView control vừa khai báo vào Form

2. Thay đổi chế độ xem (Changing the display modes)image

–  Tùy chỉnh thuộc tính View trong cửa sổ Properties của Listview. Sẽ có 4 thuộc tính hiển thị để chúng ta lựa chọn:  LargeIcon, Details, SmallIcon, List Tile.

–  Sử dụng code để tùy chỉnh thuộc tính view:

image

Ví dụ:

myListView.View = View.SmallIcon;

3. Add các item vào ListView (Khi ListView không theo cách hiển thị Details)

–  Sử dụng thuộc tính Items trong cửa sổ Properties. Khi click vào button … ở thuộc tính Items. Thì cửa sổ như hình dưới sẽ hiện ra để bạn add item vào.

image

–  Mỗi Item add sẽ có các thuộc tính như: Text, ForeColor, Text, ImageIndex…

–  Chúng ta cũng có thể viết code để add các item vào ListView với mục đích tương tự cách làm trên. Ví dụ:

myListView.Items.Add("Công Nghệ Thông Tin");
myListView.Items.Add("Bách Khoa");
myListView.Items.Add ("Khoa Học Tự Nhiên");
myListView.Items.Add("Nhân Văn");
myListView.Items.Add("Kinh Tế - Luật");

   Và kết quả sẽ là:

image

4. Add các cột vào ListView (Adding columns to the ListView)

–  Chúng ta cũng có thể thực hiện một cách đơn giản như cách add các items ở trên:

image

–  Hoặc cũng có thể sử dụng code:

myListView.Columns.Add("Tên Trường", 200);
myListView.Columns.Add("Số lượng sinh viên", 100);

– Lưu ý:  Để có thể hiển thị các columns thì chúng ta phải chọn chế độ xem là Details

myListView.View = View.Details;

image

5. Add sub Item vào Listview (Khi ListView ở chế độ xem Details)

–  Sử dụng giống như cách add các items trong phần 3 đã trình bày. Ở chúng ta click vào thuộc tính SubItem một cửa sổ mới sẽ hiện ra khá giống với cửa sổ add items

image

–  Giờ chúng ta có thể add các item con cho item chính một cách bình thường giống như khi add item chính.

image

–  Chúng ta cũng có thể sử dụng code để add các giá trị con cho item như:

// Add subitem
ListViewItem cntt = new ListViewItem("Công Nghệ Thông Tin");
ListViewItem.ListViewSubItem svcntt = new ListViewItem.ListViewSubItem(cntt, "3.000 sinh viên");
cntt.SubItems.Add(svcntt);
myListView.Items.Add(cntt);

ListViewItem bk = new ListViewItem("Bách Khoa");
ListViewItem.ListViewSubItem svbk = new ListViewItem.ListViewSubItem(bk, "18.00 sinh viên");
bk.SubItems.Add(svbk);
myListView.Items.Add(bk);

ListViewItem khtn = new ListViewItem("Khoa Học Tự Nhiên");
ListViewItem.ListViewSubItem svkhtn = new ListViewItem.ListViewSubItem(khtn, "20.000 sinh viên");
khtn.SubItems.Add(svkhtn);
myListView.Items.Add(khtn);

ListViewItem nv = new ListViewItem("Khoa Học Xã Hội & Nhân Văn");
ListViewItem.ListViewSubItem svnv = new ListViewItem.ListViewSubItem(nv, "15.000 sinh viên");
nv.SubItems.Add(svnv);
myListView.Items.Add(nv);

ListViewItem ktl = new ListViewItem("Kinh Tế - Luật");
ListViewItem.ListViewSubItem svktl = new ListViewItem.ListViewSubItem(ktl, "10.000 sinh viên");
ktl.SubItems.Add(svktl);
myListView.Items.Add(ktl); 

–  Và kết quả sẽ là:

image

 

6. Thêm Style cho SubItems

Trong chế độ xem Details, chúng ta muốn thêm các hiển thị khác nhau của cách SubItems từ Item cha chúng ta sử dụng thuộc tính UseItemStyleForSubItem = true; Như vậy chúng ta sẽ xác định được các kiểu khác nhau cho các subitems.

Ví dụ:

ListViewItem ktl = new ListViewItem("Kinh Tế - Luật");
ListViewItem.ListViewSubItem svktl = new ListViewItem.ListViewSubItem(ktl, "10.000 sinh viên");
ktl.SubItems.Add(svktl);
myListView.Items.Add(ktl);
ktl.UseItemStyleForSubItems = true;

7. Xóa item (Removing item)

Việc xóa các item của ListView được thực hiện rất đơn giản.

–  Để xóa toàn bộ các item trong ListView có tên là myListView ta thực hiện lệnh

myListView.Clear();

–  Để xóa item nào ta gọi phương thức Remove():

ListViewItem cntt = new ListViewItem("Công Nghệ Thông Tin");
cntt.Remove();

–  Xóa item ở vị trí thứ a trong ListView ta sử dụng phương thức RemoveAt():

myListView.Items.RemoveAt(2);

8.  Liên kết hình ảnh với danh sách các items

–  Đây là một tính năng làm đẹp cho ListView. Để liên kết các items trong danh sách chúng ta cần phải có một imageList với một tập hợp các ảnh. Điều này được thực hiện trong trong phương thức ListView.Items.Add(…), sử dụng đối số imageIndex – là chỉ mục liên kết với hình ảnh trong imageList.

–  Đầu tiên kéo một imageList từ Toolbox vào Form (tên mặc định sẽ là imageList1)

image 

–  Trong thuộc tính Images của imageList1 sẽ được sử dụng để add hình ảnh vào imageList1 như:

image

–  Bây giờ ta sử dụng đối số imageIndex trong phương thức add item vào listview để liên kết hình ảnh với imageList1:

myListView.SmallImageList = imageList1; // Liên kết danh sách hình ảnh nhỏ với imageList1

ListViewItem cntt = new ListViewItem("Công Nghệ Thông Tin", 0);            
ListViewItem.ListViewSubItem svcntt = new ListViewItem.ListViewSubItem(cntt, "3.000 sinh viên");            
cntt.SubItems.Add(svcntt);
myListView.Items.Add(cntt);

ListViewItem bk = new ListViewItem("Bách Khoa", 1);
ListViewItem.ListViewSubItem svbk = new ListViewItem.ListViewSubItem(bk, "18.00 sinh viên");
bk.SubItems.Add(svbk);
myListView.Items.Add(bk);

ListViewItem khtn = new ListViewItem("Khoa Học Tự Nhiên",2);
ListViewItem.ListViewSubItem svkhtn = new ListViewItem.ListViewSubItem(khtn, "20.000 sinh viên");
khtn.SubItems.Add(svkhtn);
myListView.Items.Add(khtn);

ListViewItem nv = new ListViewItem("Khoa Học Xã Hội & Nhân Văn", 3);
ListViewItem.ListViewSubItem svnv = new ListViewItem.ListViewSubItem(nv, "15.000 sinh viên");
nv.SubItems.Add(svnv);
myListView.Items.Add(nv);

ListViewItem ktl = new ListViewItem("Kinh Tế - Luật", 4);
ListViewItem.ListViewSubItem svktl = new ListViewItem.ListViewSubItem(ktl, "10.000 sinh viên");
ktl.SubItems.Add(svktl);
myListView.Items.Add(ktl);

–  Lưu ý đối số thứ 2 trong phương thức add item chính là chỉ mục tham chiếu tới hình ảnh trong imageList1.

–  Và kết quả mà chúng ta có được:

image

9. Thêm CheckBox vào trước mỗi item trong ListView (Adding checkbox to the listview)

–  Đôi khi chúng ta cần một checkbox đứng trước mỗi item trong danh sách của Listview ví dụ như: khi chọn các món hàng trong danh sách các hàng hóa… Ta thực hiện phương thức sau đây:

myListView.CheckBoxes = true;

–  Bây giờ chúng ta có thể xử lý sự kiện item nào được chọn bằng cách thêm xử lý trong sự kiện

myListView.ItemChecked += new ItemCheckedEventHandler(myListView_ItemChecked);

–  Hình ảnh minh họa ListView khi thêm checkbox:

image

10. Source code demo và tài liệu tham khảo thêm

–  Click vào đây để download source code demo các ví dụ sử dụng ListView.

–  Tham khảo thêm về ListView tại MSND: http://msdn.microsoft.com/en-us/library/6dwb14tw.aspx

–  Tham khảo thêm về khả năng tùy biến và làm đẹp cho ListView tại Codeproject.com

Kết luận: Bài viết trên là những kiến thức cơ bản về việc sử dụng các tính năng của ListView. Trên thực tế ListView Control có rất nhiều ứng dụng. Bạn có thể tham khảo thêm tại 2 trang mà mình đã đưa ra ở trên để hiểu rõ hơn.

For Better Life!

Advertisements

About thanhcuong1990

Handsome and talent!! ^^
This entry was posted in C#. Bookmark the permalink.

15 Responses to Sử dụng control ListView trong C# – Using ListView control in C#

  1. rua says:

    hi ban, minh muon lam doi mau tung o trong listview phu thuoc vao gia tri.
    vi du: neu la B thi mau xanh, neu la F thi la mau vang…
    Ban co the cho minh goi y hay tai lieu tham khao k?
    sr vi viet TV k dau, may minh k co unikey

  2. Nguyễn Hữu Toàn says:

    Tình hình là như thế này em đang làm lanchat cho đồ án cuối kì môn lập trình trên Windows. sau khi nhận được command xác nhận đã đăng nhập vào hệ thống em muốn bên client add vào 1 tabpage có tên là “ChatRoom”. Trong khi nhận xử lí command này thì vẫn add bình thường nhưng mà sau khi hiện form lên thì không có kết quả gì hết. khi debug để xem thì phát hiện ra là tabcontrol bị reset lại tabcontrol.tabpage.count vẫn bằng 0 mặc dù trong lúc debug hàm xử lý sự kiện để add tabpage thì nó vẫn add bình thường và tabcontrol.tabpage.count vẫn tăng lên đúng với số tabpage mình đã add.
    Anh có gặp tình huống này bao giờ chưa?

  3. Nguyễn Hữu Toàn says:

    cái này bên tabcontrol nhưng mà nó cũng giống như trường hợp listview luôn. sau khi add listviewitem vào rồi thì nó cũng không hiện lên form mà listview cũng bị reset lại luôn và biến count của nó cũng bằng 0. nói chung là 2 trường hợp này giống nhau hoàn toàn

    • Em kiểm tra lại nơi khởi tạo các biến xem sao. Nó có nằm trong các hàm xử lý sự kiện hông? Chứ em nói vậy anh chịu thua. Khi em debug chương trình có chạy vào hàm xử lý của em không?…

  4. Nguyễn Hữu Toàn says:

    nó vẫn chạy bình thường anh à. và nó add bình thường nhưng sau khi form hiện lên thì nó không có gì và tất cả các biến trở lại như trước khi thực hiện các event. Các biến Tabcontrol và listview là em kéo thả từ toolbox mà.
    Nếu có thời gian anh xem giúp code của em với. code ở đây:
    http://www.mediafire.com/?c5av0ma8pha52ag

    • Xin lỗi bạn. Hiện tại thời gian này mình đang bận chuẩn bị thi cuối kỳ nên không thể giúp bạn nhiều. Mình đọc code của bạn mà hông hiểu gì lun :D.

  5. Nguyễn Hữu Toàn says:

    không sao, cảm ơn anh nhiều

  6. Namnguyen says:

    Cho mình hỏi.Mình muốn tạo 1 cái button để khi click vào đó xóa hết dữ liệu trong listbox.Thì phải làm sao vậy các bạn?

  7. Namnguyen says:

    Mình có cái Forms gồm các 4 Textbox:MaHS,Ten,Lop,DiaChi .Và 1 cái ListView.1Button Add
    Mình muốn khi nhập dữ liệu vào 4 ô textbox xong,mình nhấn nút Add các thông tin sẽ hiển thị vào ListView có các culumm tương ứng.
    VD:Khi mình nhập SV01 Nguyễn Thành Nam 10CT TP.HCM
    Thì ở ListView cũng sẽ hiển thị thông tin như vậy?
    Bạn có thể giúp mình đc koh? Mình đang cần lắm.Cám ơn nhiều

  8. Đức Trần says:

    Thế mình muôn thêm hình vảo chổ số lượng sinh viên thỳ làm thế nào ?

  9. Điền says:

    Cho em hỏi làm sao để các cột hiển thị từ hàng ngang sang hàng dọc

  10. Ngọc Hiếu says:

    mình muốn edit khoảng cách dòng của list view (cũng như cột nếu được), sao cho khi mình nhập dữ liệu vào, hay load dữ liệu đều có thể vừa với dữ liệu (dữ liệu ko bị che mất, hay listview tự xg dòng cho vừa dữ liệu cũng được) thì làm sao bạn?
    có thể mình sẽ ko onl nhiều nên có gì bạn cứ thông báo vào mail dùm mình nhé.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s