BÀI 2: LÀM VIỆC VỚI VISUAL C#.NET

Tháng mười một 15, 2025
 |  Không có bình luận

2.1. Cửa sổ Solution Explorer (Quản lý Giải pháp)

  • Công dụng: Đây là “bản đồ” của dự án. Nó hiển thị cấu trúc cây, bao gồm Solution, các Project bên trong, và tất cả các tệp tin (Forms, Classes,

tài nguyên…) thuộc Project đó.

  • Thao tác chính:
    • Thêm/Xóa Project khỏi Solution.
    • Thêm/Xóa/Đổi tên các tệp tin (Forms, .cs files) trong Project.
    • Nhấp đúp chuột để mở tệp tin (mở giao diện thiết kế Form hoặc mở mã nguồn).
    • Nhấp chuột phải vào Project để Build (biên dịch) hoặc Rebuild (biên dịch lại).

2.2. Cửa sổ Properties (Thuộc tính)

  • Công dụng: Đây là cửa sổ quan trọng nhất trong lập trình trực quan. Nó cho phép bạn xem và thay đổi thuộc tính của đối tượng đang được chọn.
  • Cách hoạt động:
    • Nếu bạn nhấp vào một Form, nó hiển thị thuộc tính của Form (ví dụ: Text, Size, BackColor).
    • Nếu bạn nhấp vào một Button trên Form, nó hiển thị thuộc tính của Button (ví dụ: Name, Text, Enabled).
  • Các thuộc tính (Properties): Là các đặc điểm của đối tượng (ví dụ: màu sắc, kích thước, nội dung text).
  • Các sự kiện (Events): (Ký hiệu hình tia sét). Là các hành động mà đối tượng có thể phản hồi (ví dụ: Click của Button, TextChanged của TextBox).

2.3. Hộp công cụ (Toolbox)

  • Công dụng: Chứa danh sách tất cả các đối tượng điều khiển (Controls) mà bạn có thể kéo-thả vào Form để thiết kế giao diện.
  • Ví dụ: Button, Label, TextBox, ComboBox, PictureBox…
  • Cách dùng: Nhấp vào điều khiển trong Toolbox, sau đó kéo và thả vào vị trí mong muốn trên Form.

2.4. Cửa sổ thiết kế (Designer) và Cửa sổ mã lệnh (Code View)

  • Cửa sổ Designer (Thiết kế): Là nơi bạn thấy giao diện trực quan của Form. Bạn dùng chuột để kéo-thả, sắp xếp các điều khiển từ Toolbox.
  • Cửa sổ Code View (Mã lệnh): (Nhấn F7 để chuyển qua). Đây là nơi bạn viết mã lệnh C# để xử lý logic cho Form (ví dụ: viết code cho sự kiện Click của Button).
  • Quan hệ: Hai cửa sổ này liên kết chặt chẽ. Ví dụ, khi bạn nhấp đúp vào một Button trên Designer, Visual Studio sẽ tự động chuyển sang Code View và tạo ra một phương thức xử lý sự kiện (event handler) Button_Click cho bạn.

2.5. Các cửa sổ phụ trợ khác

  • Cửa sổ Thuộc tính của Project (Project Properties): Nhấp chuột phải vào Project (trong Solution Explorer) -> Properties. Dùng để cấu hình dự án (ví dụ: chọn loại ứng dụng, biểu tượng (icon), Framework…).
  • Cửa sổ Options (Tùy chọn): Vào menu Tools -> Options…. Dùng để tùy chỉnh toàn bộ môi trường Visual Studio (ví dụ: đổi font chữ, màu sắc, cài đặt gỡ lỗi).
  • Cửa sổ Danh sách đối tượng (Class View/Object Browser): Cho phép xem cấu trúc các Lớp (Class), Phương thức (Method) trong dự án của bạn hoặc trong các thư viện .NET.
  • Thực đơn Refactor: (Nhấp chuột phải vào mã lệnh -> Refactor). Cung cấp các công cụ tự động để tái cấu trúc mã (ví dụ: đổi tên biến/phương thức ở mọi nơi, trích xuất mã thành một phương thức mới).

Bài tập thực hành (1 giờ)

Mục tiêu: Tạo dự án Windows Forms và nhận diện các cửa sổ.

Bài tập 2.1: Tạo dự án Lập trình Trực quan.

  1. Mở Visual Studio 2008.
  2. Chọn File -> New -> …
  3. Trong cửa sổ bên trái, chọn Visual C#.
  4. Trong cửa sổ giữa, chọn Windows Forms Application.
  5. Đặt tên (Name) cho dự án là BaiTap2_GiaoDien.
  6. Nhấn OK.

Hướng dẫn

Bước 1: Khởi động Visual Studio 2008

  1. Nhấn phím Windows trên bàn phím (hoặc nhấp vào biểu tượng Start <img> ở góc màn hình).

  2. Gõ Visual Studio 2008 (hoặc Microsoft Visual Studio 2008).

  3. Nhấp vào kết quả Microsoft Visual Studio 2008 để khởi động chương trình.

Bước 2: Mở cửa sổ “New Project”

Đây là thao tác bạn đã làm ở Bài 1, hãy lặp lại:

  1. Trên thanh menu ở góc trên cùng bên trái, nhấp vào File.

  2. Trong menu thả xuống, chọn New.

  3. Một menu con xuất hiện, nhấp vào Project… (Đây là phần ... còn thiếu trong mô tả của bạn).

Thao tác này (File -> New -> Project…) sẽ mở ra cửa sổ “New Project”.

Bước 3: Chọn loại dự án (Windows Forms Application)

Đây là bước quan trọng nhất, khác với Bài 1.

* Khung bên trái (Project types): Tìm và nhấp chọn Visual C#.

* Khung giữa (Templates): Tìm và nhấp chọn Windows Forms Application. (Đây chính là mẫu dự án “Lập trình Trực quan”).

Bước 4: Đặt tên và tạo dự án

  1. Vẫn ở cửa sổ “New Project”, nhìn xuống phía dưới.

  2. Tìm ô Name:.

  3. Gõ chính xác tên dự án: BaiTap2_GiaoDien

  4. Nhấn nút OK.

Bước 5: Quan sát kết quả

Visual Studio sẽ tạo dự án. Lần này, kết quả sẽ rất khác:

  • Thay vì màn hình viết code, bạn sẽ thấy một cửa sổ giao diện đồ họa ở giữa, trông giống như một cửa sổ Windows trống, có lưới chấm.

  • Tên của cửa sổ này là Form1.cs [Design]. Đây chính là nơi bạn sẽ kéo-thả các nút bấm và ô nhập liệu vào.

Bạn đã tạo thành công dự án Windows Forms đầu tiên!

Bài tập 2.2: Nhận diện các cửa sổ.

  1. Quan sát dự án vừa tạo. Xác định vị trí của các cửa sổ sau:
    • Solution Explorer (Thường ở bên phải).
    • Properties (Thường ở dưới Solution Explorer).
    • Toolbox (Thường ở bên trái, có thể đang bị ẩn).
    • Cửa sổ cs [Design] (Ở giữa).
  2. Nếu không thấy cửa sổ nào, hãy mở nó từ menu View (ví dụ: View -> Toolbox, View -> Properties Window).

Hướng dẫn

Bước 1: Quan sát dự án (Bài tập 2.1)

  1. Hãy đảm bảo bạn đang mở dự án BaiTap2_GiaoDien mà bạn vừa tạo ở Bài tập 2.1.

  2. Màn hình chính của bạn lúc này đang hiển thị một Form trống tên là Form1.cs [Design].

Bước 2: Xác định các cửa sổ chính

Bây giờ, hãy tìm các cửa sổ sau. Nếu bạn không thấy cửa sổ nào, đừng lo, tôi sẽ chỉ bạn cách mở nó ở Bước 3.

  1. Solution Explorer (Quản lý dự án):

    • Vị trí: Thường nằm ở góc trên cùng bên phải.

    • Chức năng: Đây là “cây thư mục” của dự án. Nó hiển thị tất cả các tệp tin, bao gồm cả Form của bạn (ví dụ: Form1.cs). Bạn sẽ dùng nó để mở, thêm, hoặc xóa các tệp tin.

  2. Properties (Thuộc tính):

    • Vị trí: Thường nằm ngay bên dưới cửa sổ Solution Explorer.

    • Chức năng: Đây là cửa sổ quan trọng nhất trong lập trình trực quan. Nó hiển thị và cho phép bạn thay đổi tất cả thuộc tính (như màu sắc, kích thước, văn bản) của đối tượng bạn đang chọn.

    •  

      Thử ngay: Nhấp chuột vào nền của Form1 (ở giữa màn hình). Bạn sẽ thấy cửa sổ Properties hiển thị các thuộc tính của Form1.

  3. Toolbox (Hộp công cụ):

    • Vị trí: Thường nằm ở bên trái màn hình. Nó có thể đang ở dạng một tab nhỏ, bạn cần rê chuột vào để nó hiện ra.

    • Chức năng: Đây là nơi chứa tất cả các “linh kiện” (gọi là Controls) để bạn kéo-thả vào Form, ví dụ như Button (nút bấm), Label (nhãn), và TextBox (ô nhập liệu).

  4. Form1.cs [Design] (Cửa sổ Thiết kế):

    • Vị trí: Nằm ở giữa màn hình.

    • Chức năng: Đây là khu vực làm việc chính, nơi bạn “vẽ” và sắp xếp giao diện của mình bằng cách kéo-thả các Controls từ Toolbox vào.

Bước 3: Mở lại các cửa sổ (Nếu bị thiếu)

Nếu bạn không tìm thấy một trong các cửa sổ trên (ví dụ: lỡ tay tắt mất Toolbox), bạn luôn có thể mở lại chúng từ thanh Menu View ở trên cùng.

  • Để mở Toolbox: Chọn View -> Toolbox.

  • Để mở Properties: Chọn View -> Properties Window (hoặc nhấn phím F4).

  • Để mở Solution Explorer: Chọn View -> Solution Explorer.

Bài tập 2.3: Thao tác thiết kế cơ bản.

  1. Mở Toolbox, tìm điều khiển Button và TextBox.
  2. Kéo 1 Button và 1 TextBox thả vào Form1.
  3. Nhấp chọn Button vừa tạo.
  4. Nhìn vào cửa sổ Properties, tìm thuộc tính Text và đổi giá trị của nó thành “Nhấn tôi”.
  5. Nhấp chọn Form1 (nhấp vào nền của Form).
  6. Trong cửa sổ Properties, tìm thuộc tính Text và đổi thành “Bài tập 2”.
  7. Nhấn F5 để chạy thử ứng dụng.

Hướng dẫn

Bước 1: Mở Toolbox và tìm điều khiển

  1. Hãy đảm bảo bạn đang mở dự án BaiTap2_GiaoDien.

  2. Nhìn sang bên trái màn hình, tìm tab Toolbox.

  3. Rê chuột hoặc nhấp vào tab Toolbox để mở nó ra.

  4. Bạn sẽ thấy một danh sách dài các điều khiển. Hãy tìm 2 điều khiển sau:

    • Button (Nút bấm)

    • TextBox (Ô nhập liệu)

Bước 2: Kéo-thả điều khiển vào Form

  1. Nhấp chuột và giữ vào điều khiển Button trong Toolbox.

  2. Kéo chuột vào khu vực Form1.cs [Design] (ở giữa) rồi thả chuột ra. Bạn sẽ thấy một nút bấm (button1) xuất hiện trên Form.

  3. Làm tương tự: Kéo điều khiển TextBox từ Toolbox và thả vào Form1.

Bây giờ bạn đang có 1 Button và 1 TextBox trên Form của mình.

Bước 3: Thay đổi thuộc tính (Properties) của Button

  1. Dùng chuột nhấp chọn vào button1 trên Form.

  2. Nhìn sang cửa sổ Properties (ở góc dưới bên phải).

  3. Tìm thuộc tính có tên là Text. (Bạn có thể cuộn xuống hoặc sắp xếp theo A-Z).

  4. Giá trị hiện tại của Text đang là “button1”. Hãy nhấp vào đó và gõ lại thành Nhấn tôi.

  5. Nhấn Enter. Ngay lập tức, chữ trên nút bấm của bạn sẽ thay đổi.

Bước 4: Thay đổi thuộc tính (Properties) của Form

  1. Bây giờ, hãy nhấp chuột vào nền của Form (khu vực trống của Form1).

  2. Nhìn lại cửa sổ Properties. Nó sẽ hiển thị thuộc tính của Form1.

  3. Tìm thuộc tính Text (đây là tiêu đề của cửa sổ).

  4. Giá trị hiện tại là “Form1”. Hãy đổi nó thành Bài tập 2.

  5. Nhấn Enter. Tiêu đề của cửa sổ Form sẽ thay đổi.

Bước 5: Chạy thử ứng dụng

  1. Sau khi đã thay đổi, hãy nhấn phím F5 (hoặc nút Start Debugging <img>).

  2. Chương trình sẽ biên dịch và chạy.

  3. Một cửa sổ ứng dụng sẽ xuất hiện, mang đúng tiêu đề “Bài tập 2” và có một nút bấm “Nhấn tôi” cùng một ô nhập liệu mà bạn đã tạo.