Cách tạo Trình tải lên tệp kéo và thả trong ứng dụng Winforms

Thêm hỗ trợ cho việc tải tệp lên bằng tính năng kéo và thả trực quan.

Máy tính xách tay và cây trên bàn làm việc

Nhiều ứng dụng hiện đại hoạt động trên các tệp mà người dùng có thể tải lên hệ thống của họ. Trình chỉnh sửa hình ảnh, IDE mã và trình xử lý văn bản đều là những ví dụ. Nếu bạn đang xây dựng ứng dụng Windows Form, bạn có thể dễ dàng thêm chức năng này như một phần của giao diện người dùng.

Các ứng dụng Windows Form cho phép bạn kéo và thả các thành phần giao diện người dùng như bảng điều khiển hoặc hộp danh sách. Bạn có thể sử dụng các phần tử giao diện người dùng này để tạo chức năng kéo và thả của mình. Khi người dùng kéo tệp vào bảng điều khiển, bạn có thể hiển thị phản hồi dựa trên tệp đó.

Cách tạo UI cho Kéo và Thả Container

Bạn có thể sử dụng phần tử bảng điều khiển để tạo giao diện người dùng cho chức năng kéo và thả. Sau đó, bạn có thể sử dụng phần tử Giao diện người dùng ListBox để hiển thị tên của bất kỳ tệp nào mà người dùng kéo vào bảng điều khiển.

Tạo một ứng dụng Windows Forms mới.
Trong hộp công cụ, tìm kiếm phần tử giao diện người dùng của bảng điều khiển và kéo phần tử đó vào khung vẽ.
Đánh dấu bảng điều khiển mới. Trong cửa sổ thuộc tính, thay đổi giá trị của các thuộc tính sau:

Tài sản

Giá trị mới

Tên

kéoDropPanel

Màu nền

Khói trắng

Kiểu viền

Cố địnhĐơn

Kích thước

600, 400

Dễ thấy

Thật
Trong hộp công cụ, tìm kiếm phần tử Giao diện người dùng ListBox và kéo phần tử đó vào khung vẽ. Định vị nó sao cho nằm trong bảng điều khiển và đảm bảo rằng có một số khoảng cách giữa ListBox và bảng điều khiển.
Đánh dấu ListBox mới và thay đổi giá trị của các thuộc tính sau:

Tài sản

Giá trị mới

Tên

đã tải lênDanh sách tệp

Màu nền

Khói trắng

Kiểu viền

Không có

Kích thước

500, 300

Dễ thấy

Sai

Cách thêm sự kiện kéo và thả

Bạn có thể sử dụng các sự kiện trong ứng dụng Windows Form để thực thi các chức năng nhất định chỉ khi một số sự kiện nhất định xảy ra.

Để thêm chức năng vào bảng điều khiển kéo và thả, bạn sẽ cần thêm hai sự kiện. Sự kiện “DragEnter” sẽ xảy ra khi bạn kéo tệp qua bảng điều khiển. Sự kiện “DragDrop” sẽ xảy ra khi bạn thả chuột để thả tệp vào bảng điều khiển.

Làm nổi bật thành phần giao diện người dùng của bảng điều khiển bên ngoài.
Trong cửa sổ thuộc tính, bấm vào làm sáng để mở danh sách sự kiện.
Bấm đúp vào KéoNhập sự kiện để tạo ra một chức năng mới. Chức năng này sẽ thực thi khi bạn kéo tệp qua bảng điều khiển.

Bên trong chức năng mới, thay đổi biểu tượng con chuột để biểu thị hành động kéo/thả:

 private void dragDropPanel_DragEnter(object sender, DragEventArgs e)
{
    
    e.Effect = DragDropEffects.All;
}

bấm vào Mẫu 1.cs [Design] ở đầu cửa sổ Visual Studio, để quay lại chế độ xem canvas. Đánh dấu phần tử giao diện người dùng của bảng điều khiển.
Trong cửa sổ thuộc tính, bấm vào làm sáng để quay lại danh sách sự kiện. Lần này, nhấp đúp vào Kéo thả biến cố. Điều này sẽ tạo ra một chức năng khác sẽ thực thi khi bạn thả chuột để thả các tệp vào bảng điều khiển.
Bên trong chức năng DragDrop mới, lấy danh sách các tệp mà người dùng đang kéo vào bảng điều khiển. Bạn có thể tìm thấy điều này trong chi tiết sự kiện được tự động chuyển vào hàm.
```
 private void dragDropPanel_DragDrop(object sender, DragEventArgs e)
{
    string[] files = (string[])e.Data.GetData(DataFormats.FileDrop, false);
} 
```

Cách hiển thị danh sách các tệp đã kéo

Bây giờ bạn đã thêm chức năng để người dùng kéo và thả tệp, bạn có thể hiển thị tên của tệp bằng phần tử giao diện người dùng ListBox.

Bên trong hàm dragDropPanel_DragDrop(), sau khi nhận được danh sách tệp, hãy sử dụng vòng lặp for để lặp qua từng tệp.
```
 foreach (var file in files)
{
                
} 
```
Bên trong vòng lặp for, chỉ lấy tên của tệp. Tách tên của tệp khỏi đường dẫn tệp và lưu trữ tệp trong một biến riêng. Nếu đang sử dụng máy Mac, bạn có thể cần phải sửa đổi mã để tính đến dấu gạch chéo lên thay vì dấu gạch chéo ngược.
```
 string fileName = file.Substring(file.LastIndexOf("\") + 1, file.Length - (file.LastIndexOf("\") + 1)); 
```

Thêm tên của tệp vào phần tử giao diện người dùng ListBox.

 try
{
    uploadedFilesList.Items.Add(fileName);
}
catch (Exception exception)
{
    Console.WriteLine(exception);
}

ListBox không hiển thị theo mặc định. Sau vòng lặp for, thay đổi khả năng hiển thị của ListBox thành true:
```
 uploadedFilesList.Visible = true; 
```

Sửa đổi hàm tạo ở đầu tệp. Đặt Cho phép thả và Tự động cuộn thuộc tính của bảng kéo và thả thành true.

 public Form1()
{
    InitializeComponent();
    dragDropPanel.AllowDrop = true;
    dragDropPanel.AutoScroll = true;
}

Làm thế nào để xóa danh sách

Sau khi người dùng đã kéo các mục vào bảng điều khiển, họ có thể muốn xóa danh sách và bắt đầu lại. Bạn có thể thêm một nút để xóa danh sách khi người dùng nhấp vào nó.

Sử dụng hộp công cụ, kéo một nút lên canvas.
Đánh dấu nút. Sử dụng cửa sổ thuộc tính để thay đổi các thuộc tính sau thành các giá trị mới:

Tài sản

Giá trị mới

Tên

ClearButton

Chữ

Xa lạ
Nhấp đúp vào nút để tạo chức năng mới. Chức năng này sẽ thực thi khi bạn nhấp vào nút trong thời gian chạy:
```
 private void clearButton_Click(object sender, EventArgs e)
{
}

 
```

Bên trong chức năng, xóa nội dung của phần tử giao diện người dùng ListBox và ẩn nó:

 private void clearButton_Click(object sender, EventArgs e)
{
    uploadedFilesList.Items.Clear();
    uploadedFilesList.Visible = false;
}

Cách kiểm tra bảng điều khiển kéo và thả

Để kiểm tra chức năng kéo và thả, hãy chạy ứng dụng và kéo một số tệp vào bảng điều khiển. Nếu cần, bạn cũng có thể gỡ lỗi ứng dụng Winforms của mình trong Visual Studio khi chạy. Điều này sẽ giúp bạn hiểu những gì đang xảy ra trong mỗi dòng mã.

Nhấn nút phát màu xanh lục ở đầu cửa sổ Visual Studio để chạy ứng dụng.
Kéo một số tệp từ trình khám phá tệp của bạn và thả chúng vào bảng điều khiển. Đảm bảo rằng bạn không chạy Visual Studio ở chế độ quản trị viên. Bạn sẽ cần định cấu hình các quyền bảo mật bổ sung để tính năng kéo và thả hoạt động ở chế độ quản trị viên.
Bảng điều khiển sẽ cập nhật để hiển thị cho bạn tên của các tệp bạn đã kéo vào bảng điều khiển.
Kéo đủ tệp và bạn sẽ thấy bảng kéo và thả tự động hiển thị thanh cuộn ở bên phải.
bấm vào Xa lạ để làm trống danh sách.

Sử dụng chức năng kéo và thả trong Windows Form Apps

Bây giờ hy vọng bạn đã hiểu cách thêm chức năng kéo và thả vào ứng dụng Windows Form của mình. Có nhiều tính năng khác mà bạn có thể khám phá để làm những điều thú vị với Windows Forms.