Thiết lập dòng, cột cho UI control nằm trên Grid trong WPF


Như các bạn đã biết, trong WPF, chúng ta có nhiều Panel để có thể sắp đặt các control và canh chỉnh vị trí tùy theo từng phần của giao diện chương trình. Một trong những Panel được xem  là có khả năng tùy biến tốt nhất để bố trí các control là Grid Panel. Grid Panel cho phép chúng ta sắp xếp control trong một ứng dụng WPF dựa trên các dòng và các cột giống như một bảng trên HTML.

Đối với các bạn sử dụng XAML thì việc thiết lập dòng, cột cho một UI control được đặt trong Grid là khá dễ dàng. Bằng cách sử dụng các thuộc tính là Grid.Row và Grid.Column, ta có thể chỉ định một control sẽ nằm ở dòng nào và cột nào trong Grid. Ví dụ ta có đoạn XAML sau:

image

Ở đây, chúng ta thiết lập cho Button nằm ở dòng thứ hai (với chỉ số dòng đánh từ 0 thì dòng thứ hai sẽ có chỉ số là 1) và cột thứ nhất. Giao diện ta có được như sau:

image

Vấn đề phát sinh khi chúng ta muốn tạo một button trong code và muốn button này sẽ nằm trong một hàng, cột nào đó do chúng ta chỉ định lúc thực thi. Theo suy nghĩ ban đầu thì chúng ta sẽ nghĩ ngay đến việc thiết lập thông qua một thuộc tính Grid “nào đó” nằm trong đối tượng Button như sau:

image

Nhưng thật không may là chúng ta sẽ không thể tìm thấy thuộc tính này trong đối tượng Button. Và nếu sử dụng Visual Studio thì chúng ta có thể thấy được thông báo lỗi (những dấu gạch đỏ) ngay trong code của chúng ta. Vậy làm thế nào để có thể thiết lập dòng và cột cho một control trong code?

Lớp Grid cung cấp cho chúng ta hai phương thức tĩnh là SetRow và SetColumn để có thể thiết lập dòng và cột cho một UI control khi control này được thêm vào trong Grid. Đoạn code cụ thể như sau:

image

 

Sau đó chúng ta có thể thêm Button chúng ta vừa tạo ra vào một Grid và Button này sẽ nằm tại các vị trí được chỉ định như khi chúng ta làm trong XAML

 

Tác giả: xuanchien

Tran Xuan Chien. Japan Advanced Institute of Science and Technology - Japan. Senior Developer - NUS Technology.

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s