Hoang Ha's Blog

Layout controls bao gồm 3 loại Panel:

• Canvas - Khung chứa cơ bản nhất, sử dụng trong trường hợp các điều khiển được sắp xếp cố định (không thay đổi so với phiên bản 1.0).

• StackPanel - sử dụng trong việc sắp xếp các đối tượng tiếp theo một đối tượng khác, theo chiều ngang hoặc chiều dọc. Nó được sử dụng hiệu quả nhất khi đặt bên trong một Grid.

• Grid – là Layout control mềm dẻo nhất trong các layout control, trong đó một bảng được thiết lập để sử dụng cho việc sắp xếp các đối tượng trong các dòng và các cột.

Ngoài các layout controls trên, silverlight 2 còn cung cấp một Border layout control.

Canvas

Canvas cung cấp sự sắp xếp "vị trí cố định" cho các controls. Canvas cũng cung cấp một Background, nhưng bạn cũng nên chú ý rằng màu background mặc định dùng cho Canvas là trong suốt và chiều rộng và chiều cao mặc định là zero.

Mỗi điều khiển UI sẽ chuyển tới vị trí của nó trên Canvas dựa và các thuộc tính Canvas’s Left và Canvas’s Top. Khả năng sử dụng thuộc tính của Canvas bên trong một điều khiển được xem như là một Attached Property.



Đoạn mã trên đặt button bên phải của cạnh trái của Canvas 150 pixels và bên dưới cạnh trên của Canvas 50 pixels, như mô tả trong hình dưới đây:



StackPanels

StackPanels đặc trưng được biên dịch với layout controls khác. Chúng cho phép bạn sắp xếp các đối tượng bên trên một đối tượng khác, hay đặt tiếp theo một đối tượng khác.

Bạn có thể cung cấp một giá trị cho thuộc tính margin của một button mà nó sẽ canh đều 4 cạnh của StackPanels (left, top, right, and bottom) như hình sau:



Theo cách này chúng ta sẽ thiết lập một button cách đều các cạnh là 100 pixels.



Cách thứ hai để khai báo một Thickness là cung cấp tổng khoảng cách của các cạnh và tổng khoảng cách của top - bottom.



Ảnh hưởng của khai báo này là: button se canh trái và phải là: 25; canh top và bottom là 10.

Cuối cùng, bạn có thể khai báo canh lề mỗi cạnh một cách độc lập, như hình dưới:



Dưới đây là giao diện sắp xếp các điều khiển bên trong StackPanels với thuộc tính Orientation được thiết lập giá trị Vertical.




Với việc thiết lập thuộc tính Orientation tới Horizontal:



các điều khiển bên trong StackPanels sẽ được sắp xếp như sau:



Grids

Grids (bạn không nên nhầm lẫn với DataGrids) cung cấp sự sắp đặt một cách dễ dàng và chinh xác bằng việc cung cấp một table được cấu trúc hóa. Bạn khai báo các dòng và các cột, và sau đó đặt các điều khiển vào bên trong vị trí của các dòng/cột chỉ định bằng cách sử dụng Extended Properties.

Đặc trưng, bạn khai báo một grid, khai báo các dòng, các cột và sau đó đặt các điều khiển vào bên trong các vị trí chỉ định (ví dụ, cột 3, dòng 1). Để quan sát công việc này, bắt đầu một dự án mới được gọi là EasyGrid và chú ý tới cách mà Visual Studio tạo Grid cho bạn.



Vùng được đánh dấu tròn bên trên định nghĩa ba dòng và ba cột, tuy vậy không có nghĩa là Grid của bạn phải đặt một cách cân đối. Tôi đã chọn thiết lập cả giá trị chiều cao lớn nhất và nhỏ nhất cho các dòng và giá trị chiều cao nhỏ nhất và lớn nhất cho các cột.

Với những thiết lập trên, Tôi đặt các TextBlocks vào bên trong các dòng 0,1 và 2, phục vụ cho việc đưa ra lời nhắc tới người dùng.

Đối với việc nhập dữ liệu người dùng, Tôi đặt vào hai TextBox, mỗi TextBox trong các dòng 0 và 1. Và sau đó trong dòng 2 Tôi đặt hai điều khiển CheckBox trong cột 1 và cột 2. Để cho vui, tôi thiết lập thuộc tính isChecked của CheckBox đầu tiên là true. Kết quả sẽ hiển thị như sau: