Trang chủ

Tự học winform c# qua ví dụ – treeview, listview

Bạn hãy tạo một giao diện giống như giao diện của Microsoft Outlook Express.

Bạn hãy tạo một giao diện giống như giao diện của Microsoft Outlook Express.

 

 

 Ví dụ tự làm

Hãy viết chương trình soạn thảo văn bản (như trên) sử dụng giao diện MDI.


 Tạo giao diện kiểu Explorer

Bạn hãy tạo một giao diện giống như giao diện của Microsoft Outlook Express.

Microsoft Outlook Express gồm có 3 phần, phần bên trái là một danh sách cây (có dạng giống như thư mục trong Window Explorer), phần trên bên phải là danh sách của các mục ở bên trái (cũng có dạng giống như phần hiển thị của Window Explorer) và phần dưới bên trái là hiển thị nội dung của mục chọn ở bên trên.

Để tạo được giao diện này, ta cần các loại đối tượng sau:

–          TreeView

–          Splitter

–          ListView

–          RichTextBox (hay TextBox)

Cách làm như sau:

  1. Tạo một dự án mới có tên là OutlookStyles
  2. Kéo đối tượng Toolbar vào trong form.
  3. Kéo tiếp đối tượng Panel vào trong form và set thuộc tính Dock cho nó là Fill để nó phình lớn hết form.

treeview1

  1. Kéo đối tượng TreeView control từ hộp công cụ Toolbox vào trong form (nhớ kéo nó vào trong Panel). Trong cửa sổ properties của nó, chọn thuộc tính Dock và set cho nó là Left bằng cách click vào panel bên trái.

treeview2

Đây là một đối tượng cho phép ta hiển thị các thông tin dưới dạng một cây thư mục.

  1. Kéo đối tượng Splitter từ hộp công cụ vào trong form. Nó sẽ được tự động Dock bên trái, nghĩa là bạn sẽ thấy nó nằm ngay sát bên phải của TreeView. Resize nó cho nhỏ lại (width = 4)

 

treeview3

 

Splitter là một control cho phép ta resize các control bên trong một form theo theo 2 hướng của nó. Khi ta di chuyển Splitter sang phải thì control bên phải sẽ nhỏ lại, bên trái thì lớn ra và ngược lại. Ta sẽ thấy rõ hơn khi làm xong ứng dụng này.

  1. Kéo đối tượng khung chứa Panel từ hộp công cụ vào trong form. Bạn set thuộc tính Fill cho nó để nó tự động phình to hết phần còn lại của form.

 

 

treeview5

 

Panel là một khung chứa. Ta phải sử dụng khung chứa Panel vì khung bên phải của giao diện sẽ gồm có 2 thành phần nữa.

  1. Kéo đối tượng ListView từ hộp công cụ vào trong Panel của form. Mở cửa sổ properties của nó ra và set thuộc tính DockTop.

 

 

treeview5

 

ListView là đối tượng hiển thị các thông tin giống như danh sách files trong Window Explorer. ListView cho phép ta hiển thị các kiểu như: LargeIcon, SmallIcon, List, Detail.

  1. Kéo tiếp đối tượng Splitter từ hộp công cụ vào trong Panel của form. Set thuộc tính Dock của nó là Top để cho nó nằm kế ngay dưới của ListView.
  2. Cuối cùng bạn kéo đối tượng Richtextbox hay Textbox vào trong panel của form và set thuộc tính Dock của nó là Fill để nó tự động phình to ra hết phần còn lại của Panel.

Lưu ý: Nếu bạn sử dụng Textbox thì phải set thuộc tính Multiline của nó thành true thì nó mới tự động lớn ra được, còn không thì nó chỉ hiển thị có 1 hàng trên form mà thôi.

 

 

treeview6

 

 

Bạn bấm F5 để chạy thử chương trình. Bạn để chuột vào các cạnh của panel và kéo qua kéo lại, bạn sẽ thấy nó giống như giao diện của Microsoft Outlook Express hay Window Explorer.

 

Tiếp theo, hãy tạo các item cho TreeView.

  1. Mở cửa sổ properties của TreeView, chọn thuộc tính Nodes và click vào nút ‘…’. Một hộp hội thoại TreeNode Editor xuất hiện.
  2. Bấm vào button Add Root để tạo các mục sau:

–          Lập trình Visual C#

–          Lập trình căn bản ADO.Net

–          Tin học cơ sở.

–          Thiết kế trang web.

 

 

 

treeview7

 

  1. Click Ok và bấm F5 để chạy thử chương trình, bạn sẽ thấy được kết quả giống như dưới:

 

 

treeview8

 

Bạn có thể tạo các mục con cho các mục root này.

  1. Vào lại hộp hội thoại TreeNode Editor.
  2. Chọn mục Sách Lập Trình .Net và click vào button Add Child và nhập vào các mục:

–          Chương 1 – Giới thiệu .Net

–          Chương 2 – Visual Studio .Net

–          Chương 3 – Lập  trình giao diện

–          Chương 4 – Kết nối cơ sở dữ liệu

–          ….

 

 

treeview9

 

 

lưu ý:  mỗi lần tạo con của Sách Lập Trình .Net, bạn phải chọn Sách Lập Trình .Net và  click vào button Add Child.

  1. Bấm Ok để trở ra form. Bạn sẽ thấy trên TreeView, mục Sách Lập Trình .Net có dấu (+) ở đầu. Điều này có nghĩa là mục Sách Lập Trình .Net có các con của nó. Nếu bạn bấm vào dấu (+) này thì danh sách các mục con của nó sẽ hiển thị ra. Bạn có thể tạo rất nhiều con – cháu – chắt v.v… của nó.

 

Tạo các icon cho các node của TreeView.

  1. Trước hết, ta phải tạo một ImageList.
  2. Kéo đối tượng ImageList từ hộp công cụ vào trong form. Từ cửa sổ properties, chọn thuộc tính Images để và click vào nút ‘’, một cửa sổ Image Collection Editor xuất hiện để tạo các image cho nó.

 

 

treeview99

 

 

  1. Trong hộp hội thoại Image Collection Editor, bạn bấm vào nút Add 3 lần để lần lượt tạo các image cho nó theo thứ tự các hình:

–          Chọn hình cho quyển sách khi không chọn (Book_1.gif)

–          Chọn hình cho quyển sách khi chọn (Book_2.gif)

–          Chọn hình cho chương khi không chọn (Chapter_1.gif)

–          Chọn hình cho chương khi chọn (Chapter_2.gif)

 

treeview888

 

 

  1. Click Ok để trở ra form.

Lưu ý: Bạn xem lại thuộc tính size (kích thước cho các hình) cho đúng  là 25×25.

  1. Chọn TreeView trên form và mở cửa sổ properties của nó ra, chọn thuộc tính ImageList, bấm vào mũi tên sổ xuống và chọn imageList1

 

 

treeview999

 

  1. Bạn sẽ thấy trên TreeView các hình được điền vào các node. Tuy nhiên, ta sẽ phải set lại các hình cho đúng.
  2. Chọn lại thuộc tính Nodes và click vào nút ‘’ để mở cửa sổ TreeNode Editor.
  3. Chọn mục Lập trình Visual C#, click vào combox box của Image rồi chọn hình thứ 1, tiếp theo click vào combox của Selected Images và chọn hình thứ 2.
  4. Tiếp tục làm như vậy cho hết các mục Root.

 

 

treeview99999

 

  1. 10.   Click vào dấu (+) của mục Lập trình Visual C# và tiếp tục làm với các con của nó.  Chọn mục Chương 1- Giới thiệu, trong combox của Image, chọn hình thứ 3, trong combo box của Seletected Image, chọn hình thứ 4.

 

 

treeview999999

 

  1. 11.   Cứ tiếp tục làm như vậy cho đến hết các con.

12. Click Ok để trở ra.

13. Bấm F5 để chạy chương trình. Bạn hãy chọn vào các mục và thấy kết quả.

 

Tạo các item cho ListView

  1. Trước khi tạo các mục cho ListView, bạn hãy kéo đối tượng ImageList vào trong form để tạo các Icon cho các mục trong ListView và đổi tên thành imglstLargeIcon.
  2. Bạn sử dụng hình mà bạn đã dùng cho TreeView, Chapter_l_1.gif để add vào imglstLargeIcon, và set kích thước của nó là size=40,40.
  3. Mở cửa sổ properties của ListView.
  4. Chọn thuộc tính LargeImageList và chọn imglstLargeIcon.
  5. Chọn thuộc tính Items và click vào nút ‘’ để mở hộp hội thoại ListViewItem Collection Editor.

 

 

 

treeview9999999

 

  1. Bạn hãy click vào nút Add, nhập vào mục text và chọn imageIndex:

–          Text = Chương 1 – Giới thiệu .Net                           ImageIndex = 0

–          Text = Chương 2 – Visual Studio .Net                      ImageIndex = 0

–          Text = Chương 3 – Lập trình giao diện                     ImageIndex = 0

–          Text = Chương 4 – Kết nối cơ sở dữ liệu                            ImageIndex = 0

–          Text = Chương 5 – Lập trình hướng đối tượng           ImageIndex = 0

–          Text = Chương 6 – Tạo báo cáo (Report)                ImageIndex = 0

Bấm F5 để chạy chương trình.

 

treeview99999999

 

 

 

Tạo các kiểu hiển thị cho ListView

ListView cho ta các kiểu hiển thị khác nhau như LargeIcon, SmallIcon, List, và Detail.

  1. Để tạo xem các kiểu hiển thị, bạn tạo các button cho toolbar trên form gồm các mục: LargeIcon, SmallIcon, ListDetail.
  2. Trước khi thêm các button cho toolbar, bạn phải thêm vào trong form 1 ImageList và đổi tên thành imglstToolbar để sử dụng làm image cho toolbar.

Bạn thêm vào 4 hình : LargeIcon.bmp, SmallIcon.bmp, List.bmp, Detail.bmp

 

 

treeview999999999

 

  1. Sau đó, từ cửa sổ properties của toolbar, chọn thuộc tính ImageList và chọn imglstToolbar cho nó.

 

treeview88

 

  1. Để tạo các button cho toolbar, bạn chọn thuộc tính Button và click vào nút ‘’. Click vào nút Add để tạo các button:
ToobarButton 1 ImageIndex
Pushed
Text
0
True
Để trống
ToobarButton 2 ImageIndex
Pushed
Text
1
False
Để trống
ToobarButton 3 ImageIndex
Pushed
Text
2
False
Để trống
ToobarButton 4 ImageIndex
Pushed
Text
3
False
Để trống

Ghi chú: Thuộc tính Push được set bằng True để khi bạm bấm button đó thì button đó sẽ tự động chìm xuống và khi bạn bấm button khác thì button khác sẽ chìm xuống và button này lại nỗi lên. Tuy nhiên bạn phải dùng code để làm thao tác này.

 

 

 

treeview888

 

 

  1. Bấm Ok để trở về form. Bạn sẽ thấy toolbar của ta như sau:

 

 

treeview8888

 

  1. Trước khi tạo các cách view cho ListView, bạn phải tạo thêm 1 ImageList cho trường hợp SmallIcon.
  2. Kéo đối tượng ImageList từ toolbox vào trong form, đổi tên nó thành imglstSmallIcon và thêm vào 1 hình giống như của imsglstLargeIcon nhưng set kích thước của nó về 20×20.
  3. Mở cửa sổ properties của ListView, chọn thuộc tính SmallImageList và chọn imglstSmallIcon cho nó.
  4. Bấm F5 để chạy chương trình.

 

Tuy nhiên, khi bạn bấm vào button Detail, bạn sẽ không thấy có gì trên ListView hết.

Để thấy được trên ListView trong chế độ View.Detail, bạn phải tạo các Column Header cho ListView.

  1. Mở cửa sổ properties của ListView.
  2. Chọn thuộc tính Column và Click vào nút ‘…’ bên cạnh. Màn hình Column Header Collection xuất hiện. Bạn Add 3 lần để tạo 3 cột gồm các thông tin sau:
Name
Text
Width
ChapName
Chương
220
Name
Text
TextAlign
Width
ChapPageNum
Trang
Center
60
Name
Text
TextAlign
Width
ChapNumOfPage
Tổng số trang
Center
60

 

  1. Click Ok và bấm F5 để chạy thử.
  2. Bạn khi bấm vào Detail View, bạn sẽ thấy có hiển thị thông tin ra. Tuy nhiên, chỉ thông tin của cột thứ nhất (Chương) là có thông tin, các cột sau không có gì hết. Vấn để này ta sẽ làm ở bài sau.

 

 

 

 

 

http://info24h.vn  &  http://trithucsangtao.vn  thực hiện

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 :