Windows Controls - ThS. Nguyễn Hà Giang pdf

Thu c t í nh controlsCommon Properties Description BackgroundImage Ảnh nền của control ForeColor Màu hiển thị text trên form Enabled Xác định khi control trạng thái enable Focused Xác đị

W in dow s Con t r ols

ThS Nguyễn Hà Giang

q Label, textbox, button

q ListBox, Combobox, ListView, TreeView

q GroupBox, Panel & TabControl

q CheckBox, RadioButton, CheckedListBox, TrackBar

T ng quan controls

n Một số thuộc tính của control

q Text : nội dung caption, title…

q Focus : chuyển focus vào control

q TabIndex : thứ tự của control nhận focus

n Mặc định được VS.NET thiết lập

q Enable : thiết lập trạng thái truy cập của control

q Visible : ẩn control trên form, có thể dùng phương thức Hide

q Anchor :

n Neo giữ control ở vị trí xác định

n Cho phép control di chuyển theo vị trí

q Size : xác nhận kích thước của control

Thu c t í nh controls

Common Properties Description

BackgroundImage Ảnh nền của control

ForeColor Màu hiển thị text trên form

Enabled Xác định khi control trạng thái enable

Focused Xác định khi control nhận focus

TabStop Nếu true, user có thể sử dụng tab để select control

TextAlign Canh lề text trên control

Control Layout - Anchor

Control Layout - Anchor

n Khi FormBorderStyle = Sizable, form cho phép thay đổi kích thước khi Runtime

q Sự bố trí của control cũng thay đổi!

n Sử dụng thuộc tính Anchor

q Cho phép control phản ứng lại với thao tác resize của form

n Control có thể thay đổi vị trí tương ứng với việc resize của form

n Control cố định không thay đổi theo việc resize của form

q Các trạng thái neo

n Left: cố định theo biên trái

n Right: cố định theo biên phải

n Top: cố định theo biên trên Bottom: cố định theo biên dưới

Control Layout - Anchor

Button được neo biên trái

Button tự do

Vị trí tương đối với biên trái không đổi

Di chuyển tương ứng theo kích thước mới

Control Layout - Anchor

n Thiết lập Anchor cho control

Chọn các biên để neo

Biên được chọn neo, màu đậm

Control Layout - Anchor

Neo theo bốn phía

Control Layout - Docking

n Các control có thể gắn (dock) với một cạnh nào đó của form, hoặc container của control.

Windows Explorer

TreeView gắn

bên trái

ListView gắn bên phải

Control Layout - Docking

Bottom Fill

Top

Control Layout - Docking

TextBox

Dock = Fill TextBox.Multiline = True Dock = Bottom

Label, TextBox, Button

Label, TextBox, Button

Label, TextBox, Button

Label

Thuộc tính thường dùng

dụng control

Label, TextBox, Button

cho phép nhập liệu, mặc định là false

Event thường dùng

Label, TextBox, Button

Button

Thuộc tính thường dùng

Event thường dùng

khai báo mặc định khi người lập trình kích đúp vào button trong màn hình Design View của Form.

Label, TextBox, Button

Chuyển thành chữ hoa

Double click vào

textbox để tạo event

handler cho event

TextChanged

Label, TextBox, Button

n Chỉ cho nhập số

Sự kiện phát sinh khi textbox nhận focus và

Label, TextBox, Button

n Chức năng AutoComplete cho TextBox

q Hỗ trợ hoàn thành nhanh chóng các chuỗi chứa trong một nguồn nào đó.

q Thiết lập các chuỗi hỗ trợ (dạng collection)

q Được sử dụng khi AutoComleteSource là CustomSource

q Kiểu hỗ trợ: Append, Suggest

n AutoCompleteSource:

q Nguồn dữ liệu để hỗ trợ hoàn thành

q FileSystem, HistoryList, CustomSource…

n Cho phép nhập theo định dạng được thiết lập:

q Numeric, phone, date, custom…

-L Yêu cầu ký tự a-z hoặc A-Z

? Ký tự (không bắt buộc) a-z hoặc A-Z

& Yêu cầu ký tự

A, a Ký tự (không bắt buộc) alphanumeric

n Thuộc tính Mask

Mask Mô tả

: Dấu phân cách theo định dạng thời gian

/ Dấu phân cách theo định dạng ngày

< Chuyển tất cả ký tự theo sau thành thường

> Chuyển tất cả ký tự theo sau thành hoa

| Disable hiệu lực của < hay > trước nó

Tất cả các ký tự còn lại sẽ được giữ nguyên khi hiển thị!

ListBox & ComboBox

ListBox & ComboBox

n ListBox

q Cung cấp một danh sách các item cho phép user chọn

q ListBox cho phép hiển thị scroll nếu các item vượt quá vùng thể hiện của ListBox

ListBox & ComboBox

n Method & Event

ListBox & ComboBox

n Thuộc tính Items cho phép thêm item vào ListBox

Danh sách item

Cho phép thêm item trong màn hình thiết

ListBox & ComboBox

n ListBox hiển thị dạng Multi Column

Hiển thị nhiều cột

ListBox & ComboBox

Kiểm tra xem chuỗi nhập có trong list box?

- Nếu có: select item đó

- Ngược lại: thêm chuỗi mới vào list box

ListBox & ComboBox

n Sự kiện SelectedIndexChanged

SelectedIndexChanged

Mỗi khi kích chọn vào item trong listbox ⇒ sẽ xóa item được chọn tương ứng

ListBox & ComboBox

n ComboBox

q Kết hợp TextBox với một danh sách dạng drop down

q Cho phép user kích chọn item trong danh sách drop down

ListBox & ComboBox

n DropDownStyle

ListBox & ComboBox

Bổ sung item trong

ListBox & ComboBox

Mỗi khi kích chọn

một item ⇒ hiển thị

item được chọn trên

MessageBox

ListBox & ComboBox

AutoCompleteMode

AutoCompleteSource

AutoComplete

ListView

List View

n Dạng control phổ biến hiện thị một danh sách item

q Các item có thể có các item con gọi là subitem

n Windows Explorer hiển thị thông tin thư mục, tập tin…

q Có thể hiển thị thông tin theo nhiều dạng thông qua thuộc tính View

n Xem dạng chi tiết thông tin

List View

n Properties

FullRo wSe le c t MultiSelect

List View

n Các dạng thể hiện của ListView

Large Icons List

Tile

List View

Large Icons

Mỗi item xuất hiện với 1 icon kích thước lớn và một label bên dưới

List View

Mỗi item xuất hiện với icon nhỏ và một label bên phải

Small Icons

List View

Mỗi item xuất hiện với icon nhỏ với label bên phải, item được sắp theo cột nhưng không có tiêu đề cột List

List View

Mỗi item xuất hiện với icon kích thước lớn, bên phải có label chứa item

và subitem Tile

List View

Mỗi item xuất hiện trên một dòng, mỗi dòng có các cột chứa thông tin chi tiết

Detail

List View

n Tạo các cột cho ListView – Details qua

q Cửa sổ properties → Columns để tạo.

q Sử dụng code trong chương trình.

ColumnHeader columnHeader1 = new ColumnHeader ();

ColumnHeader columnHeader2 = new ColumnHeader ();

ColumnHeader columnHeader3 = new ColumnHeader ();

columnHeader1.Text = "Name" ; columnHeader2.Text = "Address" ; columnHeader3.Text = "Telephone Number" ;

listView1.Columns.Add(columnHeader1);

List View

Dialog soạn thảo cột

List View

n Thêm các item vào ListView

q Thêm item trong màn hình thiết kế form

q Thêm item thông qua code

n Các lớp định nghĩa Item

q System.Windows.Forms ListViewItem

q Mỗi item trong ListView có các item phụ gọi là subitem

n Lớp ListViewItem ListViewSubItem định nghĩa các subitem của ListView

n Lớp ListViewSubItem là inner class của ListViewItem

ColumnHeader1 ColumnHeader2 ColumnHeader3

item 1

n Minh họa thêm item qua code

ListViewItem item1 = new ListViewItem ();

n Sự kiện SelectedIndexChanged

n Thể hiện dữ liệu theo dạng cấu trúc cây

n Thành phần chính trong cấu trúc cây là

“Node”

n Node có thể có trạng thái

q Selected

q Expand & collapse

n Text trên mỗi node có thể edit

n Có thể add hoặc delete các node thông qua

code

n Text: nhãn hiển thị trên node

n Checked: true nếu node được check

n FullPath: nhãn của các node từ root đến node này, phân cách bởi “\\”

q Phương thức

n Collapse: collapse tất cả các node

n Expand: expand tất cả các node

n ExpandAll: expand tất cả node con của node này

n GetNodeCount: trả về số lượng node con của node này.

n TreeView có đầy đủ tính chất của một control

n Thuộc tính

q Nodes: lấy tất cả node con của node này

q CheckBoxes: nếu true thì hiển thị checkbox bên cạnh node

q SelectedNode: trả về các node được chọn

q LabelEdit: nếu true, node được edit

n Sự kiện

q AfterSelect: sau khi một node được chọn

q AfterExpanded: sau khi node được expand

q AfterCollapsed: sau khi node được collapse

q AfterEdited: sau khi node được edit

n Các bước tạo TreeView

q Tạo một node gốc (root)

q Add node gốc vào danh sách Nodes của TreeView

q Tạo node con và add vào Nodes của node gốc

q Làm tương tự để add các node mới vào cây

q …

TreeView tv = new TreeView ();

TreeNode root = new TreeNode (root);

tv.Nodes.Add(root);

root.Nodes.Add( new TreeNode (“Vegetables”));

root.Nodes.Add( new TreeNode (“Fruit”));

n Trình xử lý thường có dạng

q void EventHandler(object sender, EventArgs e)

n Sự kiện TreeView thường dùng một lớp con của

EventArgs là TreeViewEventArg

n Thuộc tính

q Node: tham chiếu đến node nơi sự kiện phát sinh

GroupBox, Panel & TabControl

GroupBox & Panel

n Bố trí controls trên GUI

GroupBox & Panel

GroupBox Mô tả

Thuộc tính thường dùng

Controls Danh sách control chứa trong GroupBox

Text Caption của GroupBox

Panel

Thuộc tính thường dùng

AutoScroll Xuất hiện khi panel quá nhỏ để hiển thị hết

các control, mặc định là false

BorderStyle Biên của panel, mặc định là None, các tham

số khác như Fixed3D, FixedSingle

Controls Danh sách control chứa trong panel

GroupBox & Panel

groupBox1 chứa 2 control textBox1 và button1

textBox2 và button2 chứa

GroupBox & Panel

n Minh họa Panel

scroll

n Dạng container chứa các control khác

n Cho phép thể hiện nhiều page trên một form duy nhất

n Mỗi page chứa các control tương tự như group control khác.

q Mỗi page có tag chứa tên của page

q Kích vào các tag để chuyển qua lại giữa các page

n Ý nghĩa:

q Cho phép thể hiện nhiều control trên một form

q Các control có cùng nhóm chức năng sẽ được tổ chức

trong một tab (page)

n TabControl có thuộc tính TabPages

q Chứa các đối tượng TabPage

TabControl

TabPage TabPage

Kích chuột phải

Thêm/Xóa TabPage

n Chỉnh sửa các TabPage

q Chọn thuộc tính TabPages của TabControl

q Sử dụng màn hình TabPage Collection Editor để chỉnh sửa

n Bổ sung Control vào TabControl

q Chọn TabPage cần thêm control

q Kéo control từ ToolBox thả vào TabPage đã chọn

Chọn TabPage cần thêm

n Sử dụng code để thêm các TabPage vào TabControl

private void AddTabControl()

{

TabControl tabControl1 = new TabControl ();

TabPage tabPageGeneral = new TabPage ("General");

TabPage tabPageView = new TabPage ("View");

tabControl1.TabPages.Add(tabPageGeneral);

tabControl1.TabPages.Add(tabPageView);

tabControl1.Location = new Point (20, 20);

this Controls.Add(tabControl1);

CheckBox, CheckedListBox RadioButton & TrackBar

n Control đưa ra một giá trị cho trước và user có thể

q Chọn giá trị khi Checked = true

q Không chọn giá trị: Checked = false

n Lớp đại diện CheckBox

Appearance

Text

Properties

n ThreeState = true : cho phép thiết lập 3 trạng thái:

q Checkstate = Indeterminate: không xác định

q CheckState= Checked: chọn

q CheckState= Unchecked: không chọn

Ch ư a ch ọ n

n Cho phép user chọn một option trong số nhóm option

n Khi user chọn 1 option thì tự động option được chọn

trước sẽ uncheck

n Các radio button chứa trong 1 container (form,

GroupBox, Panel, TabControl) thuộc một nhóm.

n Lớp đại diện: RadioButton

n Khác với nhóm CheckBox cho phép chọn nhiều option, còn RadioButton chỉ cho chọn một trong số các option.

Appearance

n Thuộc tính Items lưu trữ danh sách item

n Có thể bổ sung vào thời điểm

q Design time

q Run time

Item được check

Item được select

n MultiColumn = true

Các item được tổ chức theo nhiều cột

n Sự kiện SelectedIndexChanged

public void AddTrackBar() {

TrackBar tb1 = new TrackBar ();

tb1.Location = new Point(10 , 10);

tb1.Size = new Size (250, 50);

Số vị trí di chuyển khi dùng phím Page Kiểu stick ở bên

dưới/bên phải track

n Bổ sung Label hiển thị giá trị của TrackBar

PictureBox & ImageList

5 pictureBox với các SizeMode tương ứng

n Các bước sử dụng ImageList

q Kéo component ImageList từ ToolBox thả vào Form

q Thiết lập kích thước của các ảnh: ImageSize

q Bổ sung các ảnh vào ImageList qua thuộc tính Images

q Sử dụng ImageList cho các control

n Khai báo nguồn image là image list vừa tạo cho control

q Thường là thuộc tính ImageList

n Thiết lập các item/node với các ImageIndex tương ứng

q Việc thiết lập có thể ở màn hình design view hoặc code view

n Tạo ImageList

n Sử dụng ImageList trong ListView

Hiển thị dạng

Khai báo ImageList cho ListView listView1

ImageList

Mỗi item sẽ có ảnh theo đúng thứ tự ImageIndex được khai báo trong ImageList

NumericUpDown & DomainUpDown

n Đoạn code thêm control NumericUpDown

public void AddNumericUpDown() {

NumericUpDown numUpDn = new NumericUpDown();

numUpDn.Location = new Point(50, 50);

numUpDn.Size = new Size(100, 25);

numUpDn.Hexadecimal = true; // hiển thị dạng hexa

numUpDn.Minimum = 0; // giá trị nhỏ nhất

numUpDn.Maximum = 255; // giá trị lớn nhất

numUpDn.Value = 0xFF; // giá trị khởi tạo

numUpDn.Increment = 1; // bước tăng/giảm

Tăng giảm giá trị

Hiển thị giá trị Hexa

q Items: danh sách item

q ReadOnly: true chỉ cho phép thay đổi giá trị qua Up & Down

q SelectedIndex: chỉ mục của item đang chọn

q SelectedItem: item đang được chọn

q Sorted: sắp danh sách item

q Text: text đang hiển thị trên DomainUpDown.

String Collection Editor

Graphic & RichText Controls

n Cho phép chọn ngày trong khoảng xác định thông qua

giao diện đồ họa dạng calendar

n dd: hiển thị 2 con số của ngày

n MM: hiển thị 2 con số của tháng

n yyyy: hiển thị 4 con số của năm

n …(xem thêm MSDN Online)

q MaxDate: giá trị ngày lớn nhất

MinDate: giá trị ngày nhỏ nhất

private void AddDateTimePicker() {

DateTimePicker DTPicker = new DateTimePicker();

DTPicker.Location = new Point(40, 80);

DTPicker.Size = new Size(160, 20);

DTPicker.DropDownAlign = LeftRightAlignment.Right;

DTPicker.Value = DateTime.Now;

DTPicker.Format = DateTimePickerFormat.Custom;

DTPicker.CustomFormat = "'Ngày' dd 'tháng' MM 'năm' yyyy";

Kích drop down

để hiện thị hộp chọn ngày Định dạng xuất: 'Ngày' dd 'tháng' MM 'năm' yyyy

n Cho phép user chọn một ngày trong tháng hoặc nhiều

ngày với ngày bắt đầu và ngày kết thúc.

n Chức năng mở rộng từ TextBox, có thể hiển thị text dạng rich text format (RTF)

n Các text có thể có các font chữ và màu sắc khác nhau.

n Đoạn text có thể được canh lề

n Có thể chứa các ảnh

n Ứng dụng WordPad là dạng RichTextBox

n Sinh viên tự tìm hiểu thêm…

Advanced Controls

n Hiển thị giờ hệ thống

Enable sự kiện Tick

Khoảng thời gian chờ giữa

2 lần gọi Tick Hiển thị thời gian

n Sự kiện Tick

Khai báo trình xử lý sự kiện Tick

Mỗi giây sự kiện Tick phát sinh Trình xử lý của Tick sẽ lấy giờ hệ thống và hiển thị lên

Label

q Step: số bước tăng khi gọi hàm PerformStep

q Value: giá trị hiện tại

q Style: kiểu của progress bar

q PerformStep(): tăng thêm step

q Increment(int value): tăng vị trí hiện tại của tiến độ với giá trị xác định

n Khai báo thanh tiến độ 0-100, step = 10

Max = 100 Min = 0

Step = 10

ProgressBar

Thể hiện trực quan tiến độ

Tăng tiến độ theo step và cập nhật lại

% hoàn thành lên

n Cung cấp chức năng hiển thị một khung text nhỏ khi user

di chuyển chuột vào control bất kỳ

n Khung text chứa nội dung mô tả ý nghĩa của control

q Từ ToolBox kéo ToolTip thả vào form

q Kích chọn control muốn thêm tooltip

q Trong cửa sổ Properties của control sẽ có thuộc tính

ToolTip Thêm text vào thuộc tính này để hiển thị khi tooltip xuất hiện.

n Tạo ToolTip

n Khai báo Tooltip cho textbox trong Design View

Nội dung Tooltip

n Khai báo tooltip cho button

Nhập nội dung Tooltip cần hiển

thị

n Khai báo tooltip cho listbox bằng code

ToolTip xuất hiện khi user di chuyển chuột vào vùng

control

Mouse Event

Mouse Event

n Mouse là thiết bị tương tác thông dụng trên GUI

n Một số các thao tác phát sinh từ mouse

n Mỗi trình xử lý sự kiện sẽ có tham số là đối tượng object

và đối tượng MouseEventArgs (hoặc EventArgs)

Mouse Event

Sự kiện chuột với tham số kiểu EventArgs

MouseEnter Xuất hiện khi con trỏ chuột đi vào vùng biên của

control MouseLeave Xuất hiện khi con trỏ chuột rời khỏi biên của

MouseMove Xuất hiện khi chuột di chuyển và con trỏ chuột ở

trong vùng biên của control