Trang chủ

tự học winform c# qua ví dụ – Treeview và ListView

ListView là điều khiển dùng để hiển thị một danh sách các phần tử với các biểu tượng Windows Explorer là một ví dụ của ListView

ListView là điều khiển dùng để hiển thị một danh sách các phần tử với các biểu tượng Windows Explorer là một ví dụ của ListView

ListView là điều khiển dùng để hiển thị một danh sách các phần tử với các biểu tượng

Windows Explorer là một ví dụ của ListView

 

 

 

1

 

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:

 

 

 

2

 

–  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

 

3

 

 

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

–  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:

 

 

22

 

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.

 

 

 

 

 

5

 

–  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à:

 

 

 

6

 

 

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:

 

 

 

7

 

 

–  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;

 

 

8

 

 

 

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

 

 

 

9

 

 

–  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.

 

 

10

 

 

–  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à:

 

 

11

 

 

 

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)

 

 

 

12

 

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

 

 

13

 

 

–  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:

 

 

 

 

 

 

14

 

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:

 

 

15

 

 

string strCom=”select * from SV”;
SqlCommand com=new SqlCommand(strCom, sourdedatabse);
SqlDataReader read = com.ExecuteReader();
lsv.Items.Clear();
while(read.Read())
{
int i=lsv.Items.Count;
lsv.Items.Add(read[“mahs”].ToString());
lsv.Items[i].SubItems.Add(read[“tenhs”].ToString());
lsv.Items[i].SubItems.Add(read[“diachi”].ToString());
lsv.Items[i].SubItems.Add(read[“dt”].ToString());
}

 

 

 

Ví dụ làm thêm

 

 

 

 

 

 

Bài 1

Viết ứng dụng Truy cập website cho phép người dùng nhấn vào các LinkLabel để truy cập đến các Website tương ứng.

 

treeview listview winform c# 1

 

 

 

Hình 1. Ứng dụng Truy cập Website.

 

(Ứng dụng được lưu vào thư mục Bai 1)

 

 

 

Hướng dẫn

 

 

Bước 1: Thiết kế GUI như hình dưới đây

 

 

treeview listview winform c# 1


SplitContainer

 

 

 

 

 

 

 

LinkLabel

 

 

 

WebBrowser

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Sử dụng đối tượng SplitContainer để làm điều khiển chứa cho các điều khiển

 

SplitContainer là điều khiển chứa có hai panel, người dùng có thể thay đổi kích thước các panel bằng cách di chuột lênh thanh phân cách giữa hai panel

 

treeview listview winform c# 2

 

 

Hình 2. Điều khiển SplitContainer

 

 

 

Bước 2: Viết xử lý sự kiện Click cho mỗi LinkLabel Mã xử lý sự kiện Click cho LinkLabel Google:

 

 

 

 

public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}

private void linkLabel1_LinkClicked(object sender, LinkLabelLinkClickedEventArgs e)
{
webBrowser1.Navigate(“http://info24h.vn”);
}

private void linkLabel2_LinkClicked(object sender, LinkLabelLinkClickedEventArgs e)
{
webBrowser1.Navigate(“http://trithucsangtao.vn”);
}

private void linkLabel3_LinkClicked(object sender, LinkLabelLinkClickedEventArgs e)
{
webBrowser1.Navigate(“http://damtreem.vn”);
}

private void linkLabel4_LinkClicked(object sender, LinkLabelLinkClickedEventArgs e)
{
webBrowser1.Navigate(“http://vaydamcongchua.com”);
}

private void linkLabel5_LinkClicked(object sender, LinkLabelLinkClickedEventArgs e)
{
webBrowser1.Navigate(“http://shopthoitrangcongso.com.vn”);
}

private void linkLabel6_LinkClicked(object sender, LinkLabelLinkClickedEventArgs e)
{
webBrowser1.Navigate(“http://vaydamtreem.com”);
}
}

 

 

 

Tương tự, viết mã xử lý sự kiện Click cho các LinkLabel khác.

 

 

Bài 2

Xây dựng ứng dụng Đặt hàng cho phép đặt xe với giao diện như sau:

 

 

treeview listview winform c# 3

 

 

Hình 3. Giao diện khi tải form

 

Mô tả ứng dụng

 

  1. Ứng dụng cho phép người dùng chọn loại xe trên TreeView, khi người dùng chọn loại xe thì thông tin chi tiết về loại xe sẽ được hiển thị trên ListView.

 

 

 

treeview listview winform c# 4

 

 

Hình 4. Giao diện khi chọn loại xe trên TreeView

 

 

 

  1. Người dùng nhấn chọn xe cần mua trên ListView, hai điều khiển NumericUpdown là Số lượng: và Thông tin mua hàng: được kích hoạt cho người dùng nhập số lượng và thông tin mua hàng.

 

 

treeview listview winform c# 4

 

Hình 5. Giao diện khi chọn xe cụ thể trên ListView

 

 

 

  1. Khi người dùng thay đổi số l ượng thì Tổng tiền được cập nhập .

 

  1. Người dùng có thể chọn các loại hợp đồng là: Trả góp, Khoán gọn và Bảo hiểm .

 

 

  1. Khi đã đặt hàng xong, người dùng nhấn vào button Lưu để lưu lại thông tin mua hàng.

Thông tin mua hàng được hiển thị trên MessageBox.

 

 

treeview listview winform c# 5

 

 

Hình 6. Thông tin mua hàng được hiển thị

 

 

 

(Ứng dụng được lưu vào thư mục Bai 2)

 

Gợi ý:

 

Thiết kế giao diện như sau:

 

 

 

treeview listview winform c# 6

 

 

Treeview                                      Listview

 

 

 

 

 

 

 

NumericUpDown                             DomainUpdown

 

 

 

 

 

 

 

 

Để thực hiện chức năng khi người dùng chọn từng loại xe thì thông tin của loại xe đó được hiển thị, sử dụng sự kiện AfterSelect của TreeView. Với sự kiện này, kiểm tra xem loại xe nào trên Treview đang được chọn thì thêm các item tương ứng trên ListView.

 

Hướng dẫn coding :

 

1. Tạo lớp xe  :

 

public class xe

{

string hang;

 

public string Hang

{

get { return hang; }

set { hang = value; }

}

int namsanxuat;

 

public int Namsanxuat

{

get { return namsanxuat; }

set { namsanxuat = value; }

}

int dongco;

 

public int Dongco

{

get { return dongco; }

set { dongco = value; }

}

int gia;

 

public int Gia

{

get { return gia; }

set { gia = value; }

}

 

public xe(string hang, int namsanxuat, int dongco, int gia)

{

this.hang = hang;

this.namsanxuat = namsanxuat;

this.dongco = dongco;

this.gia = gia;

}

}

 

2. coding :

 

 

Form1 coding :

 

 

public partial class Form1 : Form

{

public Form1()

{

InitializeComponent();

 

khoitao();

}

 

public void khoitao()

{

 

treeView1.ExpandAll(); // bung hết cây ra

xe[] mangxemay = new xe[] { new xe(“hon da”,2013,100,20000),

new xe(“hon da”,2014,125,20000)

};

 

xe[] mangoto = new xe[] { new xe(“toyota”,2013,100,30000),

new xe(“toyota”,2014,100,25000)

};

 

 

for (int i = 0; i < treeView1.Nodes[0].Nodes[0].Nodes.Count; i++)

{

treeView1.Nodes[0].Nodes[0].Nodes[i].Tag = mangxemay[i];

}

 

for (int i = 0; i < treeView1.Nodes[0].Nodes[1].Nodes.Count; i++)

{

treeView1.Nodes[0].Nodes[1].Nodes[i].Tag = mangoto[i];

}

}

 

private void Form1_Load(object sender, EventArgs e)

{

 

}

xe temp;

private void treeView1_AfterSelect(object sender, TreeViewEventArgs e)

{

 

listView1.Clear();

listView1.Columns.Clear();

 

if (e.Node == treeView1.Nodes[0])

{

listView1.View = View.List;

listView1.Items.Add(new ListViewItem(“bạn chọn nút gốc Xe”));

}

else if (e.Node == treeView1.Nodes[0].Nodes[0])

{

listView1.View = View.List;

listView1.Items.Add(new ListViewItem(“bạn chọn nút Xe máy”));

}

else if (e.Node == treeView1.Nodes[0].Nodes[1])

{

listView1.View = View.List;

listView1.Items.Add(new ListViewItem(“bạn chọn nút Ô tô”));

}

else if (e.Node == treeView1.Nodes[0].Nodes[0].Nodes[0])

{

// SH

// điền tiêu đề cột, chiều rộng, canh giữa

this.listView1.Columns.Add(“Hãng”, 140, HorizontalAlignment.Center);

this.listView1.Columns.Add(“Năm sản xuất”, 70, HorizontalAlignment.Center);

this.listView1.Columns.Add(“động cơ”, 70, HorizontalAlignment.Center);

this.listView1.Columns.Add(“giá “, 70, HorizontalAlignment.Center);

this.listView1.View = View.Details;

 

// lấy đối tượng xe từ thuộc tính tag

temp = (xe)e.Node.Tag;

// xuất thuộc tính của đối tượng xe lên listview1

ListViewItem item = new ListViewItem(temp.Hang);

item.SubItems.Add(temp.Namsanxuat.ToString());

item.SubItems.Add(temp.Dongco.ToString());

item.SubItems.Add(temp.Gia.ToString());

this.listView1.Items.Add(item);

}

else if (e.Node == treeView1.Nodes[0].Nodes[0].Nodes[1])

{

// Spacy

// điền tiêu đề cột, chiều rộng, canh giữa

this.listView1.Columns.Add(“Hãng”, 140, HorizontalAlignment.Center);

this.listView1.Columns.Add(“Năm sản xuất”, 70, HorizontalAlignment.Center);

this.listView1.Columns.Add(“động cơ”, 70, HorizontalAlignment.Center);

this.listView1.Columns.Add(“giá “, 70, HorizontalAlignment.Center);

this.listView1.View = View.Details;

 

// lấy đối tượng xe từ thuộc tính tag

temp = (xe)e.Node.Tag;

// xuất thuộc tính của đối tượng xe lên listview1

ListViewItem item = new ListViewItem(temp.Hang);

item.SubItems.Add(temp.Namsanxuat.ToString());

item.SubItems.Add(temp.Dongco.ToString());

item.SubItems.Add(temp.Gia.ToString());

this.listView1.Items.Add(item);

}

 

else if (e.Node == treeView1.Nodes[0].Nodes[1].Nodes[0])

{

// Innova

// điền tiêu đề cột, chiều rộng, canh giữa

this.listView1.Columns.Add(“Hãng”, 140, HorizontalAlignment.Center);

this.listView1.Columns.Add(“Năm sản xuất”, 70, HorizontalAlignment.Center);

this.listView1.Columns.Add(“động cơ”, 70, HorizontalAlignment.Center);

this.listView1.Columns.Add(“giá “, 70, HorizontalAlignment.Center);

this.listView1.View = View.Details;

 

// lấy đối tượng xe từ thuộc tính tag

temp = (xe)e.Node.Tag;

// xuất thuộc tính của đối tượng xe lên listview1

ListViewItem item = new ListViewItem(temp.Hang);

item.SubItems.Add(temp.Namsanxuat.ToString());

item.SubItems.Add(temp.Dongco.ToString());

item.SubItems.Add(temp.Gia.ToString());

this.listView1.Items.Add(item);

}

else if (e.Node == treeView1.Nodes[0].Nodes[1].Nodes[1])

{

// Camry

// điền tiêu đề cột, chiều rộng, canh giữa

this.listView1.Columns.Add(“Hãng”, 140, HorizontalAlignment.Center);

this.listView1.Columns.Add(“Năm sản xuất”, 70, HorizontalAlignment.Center);

this.listView1.Columns.Add(“động cơ”, 70, HorizontalAlignment.Center);

this.listView1.Columns.Add(“giá “, 70, HorizontalAlignment.Center);

this.listView1.View = View.Details;

 

// lấy đối tượng xe từ thuộc tính tag

temp = (xe)e.Node.Tag;

// xuất thuộc tính của đối tượng xe lên listview1

ListViewItem item = new ListViewItem(temp.Hang);

item.SubItems.Add(temp.Namsanxuat.ToString());

item.SubItems.Add(temp.Dongco.ToString());

item.SubItems.Add(temp.Gia.ToString());

this.listView1.Items.Add(item);

}

 

 

}

 

private void button1_Click(object sender, EventArgs e)

{

MessageBox.Show(“Thông tin xe bao gồm : ”

+ “\n  Hãng ” + temp.Hang

+ “\n  Năm sản xuất ” + temp.Namsanxuat

+ “\n  Động cơ ” + temp.Dongco

+ “\n  Giá ” + temp.Gia

+ “\n  Số lượng ” + numericUpDown1.Value.ToString()

+ “\n  Số tiền ” + textBox1.Text

+ “\n  Phương thức thanh toán ” + domainUpDown1.Text

);

}

 

private void button2_Click(object sender, EventArgs e)

{

Application.Exit();

}

 

private void numericUpDown1_ValueChanged(object sender, EventArgs e)

{

textBox1.Text = (numericUpDown1.Value * temp.Gia).ToString();

}

}

 

 

 

 

Chia sẻ kiến thức cho cộng đồng  info24h.vn

 

Xem thêm:

Gửi bình luận

Xem thêm

Thời trang

Xem thêm

Giảm cân

Mua bán inox, inox 304, inox 201
Xem thêm

Kiến thức y học

Xem thêm

Thông tin giáo dục

Link hữu ích
shop bán váy đầm công chúa đẹp tại TP.HCM
shop bán Thời trang trẻ em cao cấp giao hàng toàn cầu
mua mùn cưa
váy đầm trẻ em | váy đầm công chúa | Sở giáo dục Lâm Đồng 
 |  Thu mua phe lieu
shop bán đầm bé gái đẹp tại TP.HCM

Tuyển chuyên viên thiết kế và may đầm công chúa giỏi :