Thêm hộp danh sách, danh sách thả xuống, hộp tổ hợp hoặc các nút radio vào ứng dụng canvas

Hiển thị một cột dữ liệu (ví dụ: từ bảng nhiều cột) trong ứng dụng canvas để người dùng có thể chọn một hoặc nhiều mục trong danh sách.

• Thêm hộp danh sách để cho phép người dùng chọn nhiều tùy chọn.
• Thêm danh sách thả xuống hoặc hộp tổ hợp để chiếm ít không gian hơn trên màn hình.
• Thêm một bộ nút radio cho một hiệu ứng thiết kế cụ thể.

Chủ đề này tập trung vào các hộp danh sách và nút radio, nhưng các nguyên tắc tương tự cũng áp dụng cho danh sách thả xuống.

Điều kiện tiên quyết

1. Tạo một ứng dụng canvas trống.
2. Tìm hiểu cách thêm và cấu hình các điều khiển.

Tạo danh sách đơn giản

1. Thêm một điều khiển Hộp danh sách có tên là MyListBox và đặt thuộc tính Items của nó thành biểu thức sau:

   ["circle","triangle","rectangle"]
   

   Trình thiết kế của bạn trông tương tự như sau:

   

2. Trên tab Chèn , chọn Biểu tượng, chọn hình tròn và di chuyển nó xuống bên dưới MyListBox:

   

3. Thêm một hình tam giác và một hình chữ nhật, sau đó sắp xếp các hình dạng thành một hàng bên dưới MyListBox:

   

4. Đặt thuộc tính Có thể nhìn thấy của các hình dạng sau thành các hàm sau:

   Hình dạng	Đặt hàm Có thể nhìn thấy
   vòng tròn	If("circle" in MyListBox.SelectedItems.Value, true)
   hình tam giác	If("triangle" in MyListBox.SelectedItems.Value, true)
   hình chữ nhật	If("rectangle" in MyListBox.SelectedItems.Value, true)

5. Trong khi giữ phím Alt, hãy chọn một hoặc nhiều hình dạng trong MyListBox.

   Chỉ hình dạng mà bạn chọn mới xuất hiện.

Trong các bước này, bạn đã sử dụng một biểu thức để tạo danh sách các mục. Bạn có thể áp dụng điều này cho các thành phần khác trong doanh nghiệp của bạn. Ví dụ, bạn có thể sử dụng điều khiển Thả xuống để hiển thị hình ảnh sản phẩm, mô tả sản phẩm, v.v.

Thêm nút radio

1. Trên tab Trang chủ , chọn Màn hình mới, sau đó chọn Trống.

2. Trên tab Chèn , chọn Điều khiển, rồi chọn Radio.

   

3. Đổi tên điều khiển Radio thành Choices và đặt thuộc tính Items của nó thành công thức sau:
   ["red","green","blue"]
   

   

   Nếu cần, hãy thay đổi kích thước tùy chọn điều khiển để hiển thị tất cả các tùy chọn.

4. Trên tab Chèn , chọn Biểu tượng, sau đó chọn hình tròn.

5. Đặt thuộc tính Fill của hình tròn thành hàm sau:
   If(Choices.Selected.Value = "red", Red, Choices.Selected.Value = "green", Green, Choices.Selected.Value = "blue", Blue)

   Trong công thức này, vòng tròn thay đổi màu sắc tùy thuộc vào nút radio bạn chọn.

6. Di chuyển vòng tròn bên dưới nút điều khiển Radio , như trong ví dụ này:

   

7. Trong khi giữ phím Alt, chọn một nút radio khác để thay đổi màu của vòng tròn.

Thêm một mục vào danh sách hiện có

1. Thêm một nút điều khiển và đặt tên là "btnReset".

   Bạn không biết cách thêm, đặt tên và cấu hình điều khiển?

2. Đặt thuộc tính OnSelect trên btnReset thành công thức này:

   ClearCollect(MyItems, {value: "circle"},{value: "triangle"},{value: "rectangle"})
   

3. Đặt thuộc tính Text trên btnReset thành "Reset".

4. Thêm một điều khiển Hộp danh sách có tên là lbItems và đặt thuộc tính Items của nó thành MyItems.

5. Trong khi giữ phím Alt , hãy nhấn nút Đặt lại .

   Lưu ý

   Hộp danh sách sẽ chứa các mục từ bộ sưu tập "MyItems".

6. Sắp xếp hộp danh sách và nút theo chiều dọc.

   

7. Thêm một điều khiển Nhập văn bản và đặt tên là "txtAdd".

8. Đặt Văn bản thuộc tính của txtAdd vào "".

9. Thêm một nút điều khiển và đặt tên là "btnAdd".

10. Đặt thuộc tính Text của btnAdd thành "Add".

11. Đặt OnSelect thuộc tính của btnAdd vào công thức sau:

    Collect(MyItems,{value: txtAdd.Text}); Reset(txtAdd)
    

    Lưu ý

    • Chức năng thu thập sẽ thêm văn bản từ đầu vào văn bản dưới dạng một mục trong bộ sưu tập.
    • Chức năng đặt lại sẽ đặt lại đầu vào văn bản về trạng thái mặc định.

12. Sắp xếp txtAdd và btnAdd sao cho chúng được xếp thẳng hàng bên dưới lbItems và btnReset.

    

13. Xem trước ứng dụng bằng cách nhấn F5.

14. Thêm giá trị văn bản vào txtThêm điều khiển nhập văn bản.

15. Nhấn nút Thêm.

    Lưu ý

    Hộp danh sách sẽ chứa các mục từ bộ sưu tập MyItems.

(Tùy chọn) Xóa một mục khỏi danh sách hiện có

1. Thêm một nút điều khiển và đặt tên là "btnDelete".

2. Đặt thuộc tính Text của btnDelete thành"Delete".

3. Đặt thuộc tính OnSelect của btnDelete thành công thức sau:

   Remove(MyItems, lbItems.Selected)
   

4. Sắp xếp btnXóa sao cho nó được xếp thẳng hàng bên dưới btnĐặt lại

   

5. Xem trước ứng dụng bằng cách nhấn F5.

6. Nhấn nút Đặt lại để đặt lại hộp danh sách.

7. Nhấn một mục trong hộp danh sách để chọn mục đó.

8. Nhấn nút Xóa để xóa mục.