Làm việc với các điều khiển trên ToolBox

Nội dung thảo luận:

– Sử dụng các điều khiển Textbox Button tạo chương trình Hello World

– Sử dụng điều khiển DateTimePicker hiển thị ngày sinh của bạn

– Sử dụng combobox, CheckBox, RadioButton, ListBox để xử lý các nhập liệu của người dùng

– Sử dụng điều khiển LinkLabel để hiển thị trang web trên Internet

– Cài đặt điều khiển ActiveX

TOOLBOX chứa các điều khiển để thiết kế form chương trình. Bạn có thể sử dụng những điều khiển đã có sẵn hay thêm một vài thành phần vào đó để sử dụng sau này.

Xây dựng chương trình HELLOWORLD

  • Tìm hiểu chương trình

Giao diện chính của chương trình như sau:

giao dien hello world

Nó bao gồm một textbox – ô cho phép nhập chuỗi ký tự có biểu tượng  trên TOOLBOX và một button. Khi chương trình chạy, click vào button hiển thị để textbox hiện dòng chữ “HelloWorld” – Xin chào thế giới.

  • Thiết kế chương trình

Bạn tạo mới một dự án như đã học. Tại trang start page chọn tạo mới một Visual Studio Solution. Nhập tên tại ô Name là HelloWorld, click vào nút Browse để chọn đường dẫn lưu dự án của mình.

thiet ke chuong trinh

Nhấn OK để tạo.

Bây giờ bạn đã có một giải pháp trắng. Tiếp theo ta tạo mới một dự án từ giải pháp này. Để tạo R-click vào Solution vừa tạo chọn Add | New Project

addtex

Một cửa sổ hiện ra, click chọn Windows Application tại ô Visual Studio Installed Template. Nhập tên là HelloWorld tại ô Name, đường dẫn như đường dẫn chứa solution mới tạo.

new project

– Thiết kế:

– Tạo một Textbox (textbox1) và một Button (Button1) lên giao diện đồ họa của Form như đã biết

TextBox: điều khiển cho phép nhập một chuỗi các ký tự cho chương trình xử lý

Button: điều khiển cho phép chương trình có một hành động khi người dùng click lên nó khi chạy chương trình.

– Thiết lập thuộc tính cho các điều khiển: Textbox1 – Text: Rỗng; Button1 – Text: Hiển thị.

– Viết mã:

– Tại giao diện chính của Form double click vào Button1 để chuyển qua chế độ viết mã, viết thủ tục Button1_Click

– Nhập đoạn mã sau vào đó:

TextBox1.Text = “HelloWorld!”

Khi bạn gõ textbox1 và dấu ‘.’ thì chương trình tự xổ xuống một danh sách cho bạn chọn lựa, bạn chọn thuộc tính text (Enter).

  • Chạy chương trình

Nhắp nút start như ví dụ trước là xong.

Sử dụng điều khiển DATETIMEPICKER

DATETIMEPICKER, điều khiển cho phép người dùng chọn thời gian dưới dạng giao diện của lịch biểu.

1. Chương trình Birthday

  • Tìm hiểu chương trình

Giao diện của chương trình:

hiện ngày sinh

Chương trình có một điều khiển DaeTimePicker (trên TOOLBOX  là điều khiển có hình datetimepicker cho phép người dùng chọn một ngày bất kỳ để chương trình xử lý và một nút Button1 sẽ thực hiện đưa ra một hộp thông báo bằng MsgBox hiển thị ngày mà người dùng đã chọn.

  • Xây dựng giao diện

Bạn cũng tạo mới một Solution trắng có tên Birthday và thêm một Project có tên tương tự ở dạng Windows Application trong ô Visual Studio Installed Template như ví dụ trước.

Tại giao diện thiết kế của form1 bạn thêm hai điều khiển là DateTimePickerButton1 vào, đặt thuộc tính Text cho Button1 là ‘Hiện ngày sinh’. Lưu lại tất cả những thiết đặt bằng cách nhấp chọn Save All trên Standard Bar. Nếu chương trình hiện ra một thông báo yêu cầu chọn chế độ lưu thì bạn chọn lưu với mã hóa 65001.

  • Viết mã cho chương trình

Bạn chỉ cần viết mã cho Button1 để thực thi hành động hiện ra thông báo khi người dùng đã chọn ngày và click lên nó. Double click vào Button1 tại giao diện thiết kế form1 và nhập mã như sau:

MsgBox(“Ngày sinh của bạn là: “ & DateTimePicker1.Text)

MsgBox(“Ngày trong năm: “ & DateTimePicker1.Value.DayOfYear.ToString)

MsgBox(“Hôm nay là ngày: ” & Now.ToString)

Đoạn mã này sẽ hiển thị lần lượt ba thông báo có trong dấu ngoặc đơn. Dấu ‘&’ để kết nối chuỗi như “Ngày sinh của bạn là” với nội dung là thuộc tính Text của điều khiển DateTimePicker1. Các hàm khác các bạn sẽ làm quen dần trong các chương sau.

  • Thực thi chương trình

Bạn thử chạy chương trình và chọn đúng ngày sinh của mình xem sao.

2. Làm quen với các thuộc tính khác của DateTimePicker

Bạn click vào đối tượng DateTimePicker1 trên giao diện chính của form và chọn mở thuộc tính của nó.

Trên Properties Windows bạn thử thay đổi các thuộc tính của nó xem sao. Ví dụ, để cho nó hiển thị thông tin về giờ thay vì ngày tháng, bạn thay đổi thuộc tính Format của nó từ long qua Time xem sao.

Làm việc với các điều khiển nhập liệu

Trong suốt quá trình lập trình, thực tế ta luôn xuay quanh việc lập trình để xử lý các điều khiển nhập liệu. Các điều khiển nhập liệu gồm TextBox cho phép người dùng nhập vào một chuỗi các ký tự, menu thể hiện thông tin dưới dạng chọn lệnh, các loại hộp thoại như Checkbox, ListBox, RadioButton, ComboBox thể hiện thông tin dưới dạng tương tự như menu…

1. Tìm hiểu CheckBox

  • Sử dụng

CheckBox là điều khiển cho phép người dùng chọn lựa khả năng xử lý của chương trình. Ta thử tìm hiểu kỹ hơn về điều khiển này qua bài tập sau:

2. Chương trình MyCheckBox

  • Tìm hiểu chương trình:

Chương trình này có hai CheckBox cho phép click chọn. Nếu click chọn vào CheckBox nào thì sẽ hiện một bức ảnh tương ứng với nó.

Giao diện chính của nó như sau:

máy tính ca nhân

  • Thiết kế giao diện:

Tạo một giải pháp mới và thêm vào đó một dự án như đã biết, đặt tên là MyCheckBox.

Các điều khiển sử dụng trong form gồm:

– CheckBox1: thuộc tính Checked – False; Text – Máy tính cá nhân

– Checkbox2: thuộc tính Checked – False; Text – Máy photocopy

– PictureBox1: thuộc tính Image – None; SizeMode: StretchImage

– PictureBox2: thuộc tính Image – None; SizeMode: Stretchimage

Viết mã chương trình:

Vì ta muốn khi người dùng click vào checkbox thì lập tức có thay đổi ẩn/hiện các ảnh ngay nên ta cần xây dựng thủ tục thể hiện sự thay đổi gắn với các checkbox. Trong vb thủ tục đó là thủ tục CheckBox1_CheckedChanged mà ta có thể tạo ra bằng cách nhắp đúp vào điều khiển checkbox từ giao diện thiết kế form hay lựa chọn từ danh sách xổ xuống như đã biết.

– Bạn double click vào điều khiển Checkbox1 để tạo thủ tục CheckBox1_CheckedChanged. Sau đó nhập đoạn mã sau vào:

If CheckBox1.CheckState = 1 Then

            ‘PictureBox1.Visible = True

            PictureBox1.Image = System.Drawing.Image.FromFile _

            (“D:\Data\Studying\VS.Net 05\Tung buoc lap trinh vb.net\Tung buoc lap trinh vb.net\3_Chapter3\Bai tap\MyCheckBox\MyCheckBox\Images\Calcultr.bmp”)

            PictureBox1.Visible = True

        Else

            PictureBox1.Visible = False

        End If

Chú ý: Dấu ‘_’ ở dòng mã thứ 3 tư trên xuống là dấu cho phép xuống dòng khi cảm thấy dòng mã quá dài trong VB. Bức ảnh của các bạn muốn cho vào điều khiển PictureBox1 không nhất thiết phải giống như trên. Bạn có thể copy một bức ảnh bất kỳ vào thư mục chứa dự án và kéo trực tiếp từ cửa sổ Solution Explorer vào trong đoạn mã để lây đường dẫn.

– Tương tự bạn tạo thủ tục CheckBox2_CheckedChanged như sau:

If CheckBox2.CheckState = 1 Then

            ‘PictureBox2.Visible = True

            PictureBox2.Image = System.Drawing.Image.FromFile _

            (“D:\Data\Studying\VS.Net 05\Tung buoc lap trinh vb.net\Tung buoc lap trinh vb.net\3_Chapter3\Bai tap\MyCheckBox\MyCheckBox\Images\CopyMach.bmp”)

            PictureBox2.Visible = True

        Else

            PictureBox2.Visible = False

        End If

  • Chạy chương trình:

Bạn thử chạy chương trình xem sao.

Một số điều khiển khác

1. Sử dụng

Ta thử tìm hiểu tác dụng của một số điều khiển khác như RadioButton, ComboBox, ListBox … qua ví dụ InputControls  xem sao.

2. Chương trình InputControls

  • Tìm hiểu chương trình:

Chương trình này có 6 ô hiện ảnh tương ứng với 5 mặt hàng và một hiển thị đơn vị tiền mà người dùng sẽ chi trả khi mua hàng.

Ô thứ nhất sẽ hiển thị các sản phẩm tương ứng với một trong ba radiobutton đặt trong điêu khiển GroupBox – điều khiển cho phép đặt một số điều khiển khác vào (bạn thử tìm xem nó ở đâu trên TOOLBOX)

Ô thứ hai, thứ ba và thứ tư hiển thị các sản phẩm tương ứng với các mặt hàng chọn bởi các checkbox đặt trong GroupBox2.

Ô thứ 5 hiển thị 1 trong 3 sản phẩm được chọn bởi điều khiển ListBox1.

Ô thứ 6 hiển thị ảnh của đơn vị tiền tệ mà người dùng chọn bởi ComboBox1.

Sau đây là giao diện của chương trình:

mua hang truc tuyen

  • Thiết kế giao diện:

– Tạo hai điều khiển GroupBox

– Tạo 3 radiobox đặt vào trong điều khiển GroupBox1.

– Tạo 3 CheckBox đặt vào trong điều khiển GroupBox2.

– Tạo 1 điều khiển ListBox và không nhập liệu gì cả.

– Tạo một điều khiển ComboBox.

– Tạo 6 PictureBox và 3 Label cùng 1 Button.

– Sửa các thuộc tính sao cho phù hợp với hình trên. Riêng hai điều khiển ListBox ComboBox thì các dữ liệu sẽ được nhập khi Form được load vào lúc chương trình chạy.

  • Viết mã chương trình:

Dưới đây là toàn bộ mã của chương trình, bạn có thể tham khảo:

Public Class Form1

    Private Sub Button1_Click(ByVal sender As System.Object, _

    ByVal e As System.EventArgs) Handles Button1.Click

        End

    End Sub

    Private Sub CheckBox1_CheckedChanged(ByVal sender As System.Object, _

    ByVal e As System.EventArgs) Handles CheckBox1.CheckedChanged

        If CheckBox1.CheckState = 1 Then

            PictureBox2.Image = System.Drawing.Image.FromFile _

            (“D:\Data\Studying\VS.Net 05\Tung buoc lap trinh vb.net\Tung buoc lap trinh vb.net\3_Chapter3\Bai tap\InputControls\InputContorls\Images\AnswMach.bmp”)

            PictureBox2.Visible = True

        Else

            PictureBox2.Visible = False

        End If

    End Sub

 

    Private Sub CheckBox2_CheckedChanged(ByVal sender As Object, _

    ByVal e As System.EventArgs) Handles CheckBox2.CheckedChanged

        If CheckBox2.CheckState = 1 Then

            PictureBox3.Image = System.Drawing.Image.FromFile _

            (“D:\Data\Studying\VS.Net 05\Tung buoc lap trinh vb.net\Tung buoc lap trinh vb.net\3_Chapter3\Bai tap\InputControls\InputContorls\Images\Calcultr.bmp”)

            PictureBox3.Visible = True

        Else

            PictureBox3.Visible = False

        End If

    End Sub

 

    Private Sub CheckBox3_CheckedChanged(ByVal sender As Object, _

    ByVal e As System.EventArgs) Handles CheckBox3.CheckedChanged

        If CheckBox3.CheckState = 1 Then

            PictureBox4.Image = System.Drawing.Image.FromFile _

            (“D:\Data\Studying\VS.Net 05\Tung buoc lap trinh vb.net\Tung buoc lap trinh vb.net\3_Chapter3\Bai tap\InputControls\InputContorls\Images\CopyMach.bmp”)

            PictureBox4.Visible = True

        Else

            PictureBox4.Visible = False

        End If

    End Sub

 

    Private Sub ListBox1_SelectedIndexChanged(ByVal sender As Object, _

    ByVal e As System.EventArgs) Handles ListBox1.SelectedIndexChanged

        Select Case ListBox1.SelectedIndex

            Case 0

                PictureBox5.Image = System.Drawing.Image.FromFile _

                (“D:\Data\Studying\VS.Net 05\Tung buoc lap trinh vb.net\Tung buoc lap trinh vb.net\3_Chapter3\Bai tap\InputControls\InputContorls\Images\Harddisk.bmp”)

                PictureBox5.Visible = True

            Case 1

                PictureBox5.Image = System.Drawing.Image.FromFile _

                (“D:\Data\Studying\VS.Net 05\Tung buoc lap trinh vb.net\Tung buoc lap trinh vb.net\3_Chapter3\Bai tap\InputControls\InputContorls\Images\Printer.bmp”)

                PictureBox5.Visible = True

            Case 2

                PictureBox5.Image = System.Drawing.Image.FromFile _

                (“D:\Data\Studying\VS.Net 05\Tung buoc lap trinh vb.net\Tung buoc lap trinh vb.net\3_Chapter3\Bai tap\InputControls\InputContorls\Images\SateDish.bmp”)

                PictureBox5.Visible = True

        End Select

    End Sub

 

    Private Sub Form1_Load(ByVal sender As Object, _

    ByVal e As System.EventArgs) Handles Me.Load

        ListBox1.Items.Add(“Ổ cứng”)

        ListBox1.Items.Add(“Máy in”)

        ListBox1.Items.Add(“Ăng ten”)

        ComboBox1.Items.Add(“USD”)

        ComboBox1.Items.Add(“Kiểm tra”)

        ComboBox1.Items.Add(“Bảng Anh”)

    End Sub

    Private Sub RadioButton1_CheckedChanged(ByVal sender As Object, _

    ByVal e As System.EventArgs) Handles RadioButton1.CheckedChanged

        PictureBox1.Image = System.Drawing.Image.FromFile _

        (“D:\Data\Studying\VS.Net 05\Tung buoc lap trinh vb.net\Tung buoc lap trinh vb.net\3_Chapter3\Bai tap\InputControls\InputContorls\Images\PComputr.bmp”)

        PictureBox1.Visible = True

    End Sub

 

    Private Sub RadioButton2_CheckedChanged(ByVal sender As Object, _

    ByVal e As System.EventArgs) Handles RadioButton2.CheckedChanged

        PictureBox1.Image = System.Drawing.Image.FromFile _

        (“D:\Data\Studying\VS.Net 05\Tung buoc lap trinh vb.net\Tung buoc lap trinh vb.net\3_Chapter3\Bai tap\InputControls\InputContorls\Images\Computer.bmp”)

        PictureBox1.Visible = True

    End Sub

 

    Private Sub RadioButton3_CheckedChanged(ByVal sender As Object, _

    ByVal e As System.EventArgs) Handles RadioButton3.CheckedChanged

        PictureBox1.Image = System.Drawing.Image.FromFile _

        (“D:\Data\Studying\VS.Net 05\Tung buoc lap trinh vb.net\Tung buoc lap trinh vb.net\3_Chapter3\Bai tap\InputControls\InputContorls\Images\Laptop1.bmp”)

        PictureBox1.Visible = True

    End Sub

 

    Private Sub ComboBox1_SelectedIndexChanged(ByVal sender As Object, _

    ByVal e As System.EventArgs) Handles ComboBox1.SelectedIndexChanged

        Select Case ComboBox1.SelectedIndex

            Case 0

                PictureBox6.Image = System.Drawing.Image.FromFile _

                (“D:\Data\Studying\VS.Net 05\Tung buoc lap trinh vb.net\Tung buoc lap trinh vb.net\3_Chapter3\Bai tap\InputControls\InputContorls\Images\Dollar.bmp”)

                PictureBox6.Visible = True

            Case 1

                PictureBox6.Image = System.Drawing.Image.FromFile _

                (“D:\Data\Studying\VS.Net 05\Tung buoc lap trinh vb.net\Tung buoc lap trinh vb.net\3_Chapter3\Bai tap\InputControls\InputContorls\Images\Check.bmp”)

                PictureBox6.Visible = True

            Case 2

                PictureBox6.Image = System.Drawing.Image.FromFile _

                (“D:\Data\Studying\VS.Net 05\Tung buoc lap trinh vb.net\Tung buoc lap trinh vb.net\3_Chapter3\Bai tap\InputControls\InputContorls\Images\PoundBag.bmp”)

                PictureBox6.Visible = True

        End Select

    End Sub

End Class

Như ví dụ trước, các ảnh bạn có thể tùy biến.

Chạy chương trình:

Bạn thử chạy chương trình xem sao.

Sử dụng điều khiển LINKLABEL

1. Sử dụng

Cho phép mở trình duyệt web IE hay Netscape truy cập một trang web.

Trong ví dụ dưới đây WebLink chúng ta sẽ thử tạo chương trình sử dụng LinkLabel để hiển thị chuỗi văn bản trong Form, kết hợp sự kiện Click với phương thức Process.Start để mở trang web.

2. Chương trình WebLink

  • Tìm hiểu chương trình

Giao diện chương trình:

link label

Chương trình chỉ có môt điều khiển LinkLabel cho phép ta mở một trang web bất kỳ. Trong ví dụ này ta mở trang web cục bộ http://localhost/localstart.asp. Ở đây có thể thay bằng địa chỉ IP là 127.0.0.1.

  • Thiết kế giao diện

Bạn tạo mới một dự án và tạo form như đã biết.

  • Viết mã cho chương trình

Bạn mở chế độ Code Editor để viết thủ tục LinkLabel1_LinkClicked xử lý khi người dùng click vào LinkLabel1 bằng cách double click vào điều khiển LinkLable1 trên form1. Tiếp theo nhập chính xác đoạn mã sau:

LinkLabel1.LinkVisited = True

        System.Diagnostics.Process.Start _

        (“http://127.0.0.1/localstart.asp”)

Vậy là chương trình của chúng ta đã có thể thực thi.

  • Chạy chương trình.

Chương trình tương đối đơn giản, bạn thử chạy xem. Nếu nhà có nối mạng, bạn có thể cho một trang web nào trực tuyến thay vì trang cục bộ. Bạn cũng cần cấu hình Default Website để không có bất cứ trục trặc nào khi chạy chương trình.

chay chuong trinh

  • Hiểu thêm về mã chương trình

– Dòng 1: LinkLabel1.LinkVisited = True. Dòng này có tác dụng đánh dấu màu thể hiện người dùng đã duyệt qua liên kết này nhờ thuộc tính LinkVisited.

– Dòng 2: kết hợp sự kiện click với phương thức Process.Start để mở trang web.

Cài đặt điều khiển ACTIVEX

Visual Studio.NET là một sản phẩm hoàn toàn mới của Microsoft. Các chương trình trước đây thường dựa trên công nghệ COM (Component Object Model). Và .NET không còn dựa vào mô hình COM nữa nhưng nó vẫn cho phép ta tái sử dụng chúng cũng như đưa những đối tượng COM, ACTIVEX cũ vào cửa sổ TOOLBOX để sử dụng như một điều khiển của VS.NET.

Các điều khiển activeX hay đối tượng COM thường chứa trong các file .exe hay .dll. Khi bạn cài đặt một số chương trình, ứng dụng thì thường cũng đăng ký theo chúng vào hệ thống, ví dụ như khi cài Microsoft Word chẳng hạn, có một điều khiển ActiveX giúp vẽ biểu đồ có tên Microsoft Chart.

Trong bài tập dưới đây chúng ta sẽ đưa ActiveX Microsoft Chart vào TOOLBOX của VS.NET để sử dụng.

Nếu bạn nào xây dựng diễn đàn bằng ngôn ngữ ASP.NET thì cũng có thể thêm điều khiển FreeTextBox đã xây dựng sẵn vào TOOLBOX và sử dụng để các thành viên đăng tải bài viết lên diễn đàn khá tiện ích.

Cài đặt ActiveX :

– Để đưa được một điều khiển ActiveX vào thì trước hết TOOLBOX phải hiện lên tức là phải có một dự án đang mở và mở ở chế độ thiết kế form.

– Khi đã làm hiện TOOLBOX bạn chọn một tab bất kỳ muốn cho thêm ActiveX vào, mình chọn tab chuẩn Windows Forms.

– R-Click vào TOOLBOX và chọn Choose Items… như hình:

toolbox

– Một cửa sổ hiện ra cho phép ta chọn các thành phần muốn thêm vào tùy thích. Có thể chọn thành phần của .Net Frame Works, COM Components hay là chọn một điều khiển nào bạn sẵn có bằng click chọn nút Browse để duyệt. Ở đây ta chọn .COM Components và duyệt đến điều khiển ActiveX Microsoft Office Chart 11.0 để thêm vào. Nhắp OK và chờ xem kết quả.

component
Hình minh họa:

Và bây giờ trên TOOLBOX đã có thêm điều khiển mới cho ta thực hiện:

office chart

Viết một bình luận