Silverlight - Bố cục cố định
Bố cục của các điều khiển là rất quan trọng và quan trọng đối với khả năng sử dụng ứng dụng. Nó được sử dụng để sắp xếp một nhóm các phần tử GUI trong ứng dụng của bạn. Có những điều quan trọng nhất định cần xem xét khi chọn bảng bố trí. Họ là -
- Vị trí của các phần tử con.
- Kích thước của các phần tử con.
- Xếp lớp các phần tử con chồng lên nhau.
Sự sắp xếp pixel cố định của các điều khiển sẽ không hoạt động nếu ứng dụng đã được sử dụng trên các độ phân giải màn hình khác nhau. XAML cung cấp một tập hợp phong phú các bảng bố cục tích hợp sẵn để sắp xếp các phần tử GUI theo cách thích hợp.
Chúng ta sẽ bắt đầu bằng cách xem xét simple fixedbố cục. Sau đó, chúng ta sẽ xem xétDynamiccác kịch bản bố cục mà Silverlight đã thiết kế để hỗ trợ. Chúng ta sẽ thấy các thuộc tính và khái niệm liên quan đến bố cục xuyên suốt tất cả các phần tử giao diện người dùng.
Bố cục cố định
Loại bố cục đơn giản nhất được cung cấp bởi Canvasthành phần. CácCanvas bảng điều khiển là bảng điều khiển bố cục cơ bản, trong đó các phần tử con có thể được định vị một cách rõ ràng bằng cách sử dụng các tọa độ liên quan đến bất kỳ cạnh nào của Canvas như trái, phải, trên và dưới.
Thông thường, Canvasđược sử dụng cho các phần tử đồ họa 2D (chẳng hạn như Ellipse, Rectangle, v.v.). Nó không được sử dụng cho các phần tử giao diện người dùng vì việc chỉ định tọa độ tuyệt đối sẽ gây rắc rối khi bạn thay đổi kích thước, bản địa hóa hoặc chia tỷ lệ ứng dụng XAML của mình.
Dưới đây là các properties của Canvas lớp học.
Sr không. | Kê khai tài sản |
---|---|
1 | Background Nhận hoặc đặt một Brush lấp đầy vùng nội dung bảng điều khiển. (Kế thừa từ Panel) |
2 | Children Nhận UIElementCollection của các phần tử con của Bảng điều khiển này. (Được kế thừa từ Panel.) |
3 | Height Nhận hoặc đặt chiều cao được đề xuất của phần tử. (Được kế thừa từ FrameworkElement.) |
4 | ItemHeight Lấy hoặc đặt một giá trị chỉ định chiều cao của tất cả các mục có trong WrapPanel. |
5 | ItemWidth Lấy hoặc đặt một giá trị chỉ định chiều rộng của tất cả các mục được chứa trong WrapPanel. |
6 | LogicalChildren Nhận một điều tra viên có thể lặp lại các phần tử con logic của phần tử Panel này. (Được kế thừa từ Panel.) |
7 | LogicalOrientation Hướng của bảng điều khiển, nếu bảng chỉ hỗ trợ bố cục theo một chiều duy nhất. (Được kế thừa từ Panel.) |
số 8 | LeftProperty Xác định thuộc tính Canvas.Left XAML đính kèm. |
9 | Margin Lấy hoặc đặt lề ngoài của một phần tử. (Được kế thừa từ FrameworkElement.) |
10 | Name Lấy hoặc đặt tên nhận dạng của phần tử. Tên cung cấp một tham chiếu để mã phía sau, chẳng hạn như mã xử lý sự kiện, có thể tham chiếu đến phần tử đánh dấu sau khi nó được xây dựng trong quá trình xử lý bởi bộ xử lý XAML. (Được kế thừa từ FrameworkElement.) |
11 | Orientation Nhận hoặc đặt một giá trị chỉ định thứ nguyên mà nội dung con được sắp xếp. |
12 | Parent Nhận phần tử cha logic của phần tử này. (Được kế thừa từ FrameworkElement.) |
13 | Resources Nhận hoặc đặt từ điển tài nguyên được xác định cục bộ. (Được kế thừa từ FrameworkElement.) |
14 | Style Lấy hoặc đặt kiểu được phần tử này sử dụng khi nó được hiển thị. (Được kế thừa từ FrameworkElement.) |
15 | TopProperty Xác định thuộc tính Canvas.Top XAML đính kèm. |
16 | Width Lấy hoặc đặt chiều rộng của phần tử. (Được kế thừa từ FrameworkElement.) |
17 | ZIndexProperty Xác định thuộc tính Canvas.ZIndex XAML đính kèm. |
Dưới đây là các methods của Canvas.
Sr không. | Phương pháp & Mô tả |
---|---|
1 | GetLeft Nhận giá trị của thuộc tính Canvas.Left XAML đính kèm cho phần tử đích. |
2 | GetTop Nhận giá trị của thuộc tính Canvas.Top XAML đính kèm cho phần tử đích. |
3 | GetZIndex Nhận giá trị của thuộc tính Canvas.ZIndex XAML đính kèm cho phần tử đích. |
4 | SetLeft Đặt giá trị của thuộc tính Canvas.Left XAML đính kèm cho một phần tử đích. |
5 | SetTop Đặt giá trị của thuộc tính Canvas.Top XAML đính kèm cho một phần tử đích. |
6 | SetZIndex Đặt giá trị của thuộc tính Canvas.ZIndex XAML đính kèm cho một phần tử đích. |
Ví dụ sau đây cho thấy cách thêm các phần tử con vào một Canvas. Dưới đây là cách triển khai XAML trong đó hình Elip được tạo bên trong Canvas với các thuộc tính bù đắp khác nhau.
<UserControl x:Class = "FirstExample.MainPage"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable = "d"
d:DesignHeight = "300" d:DesignWidth = "400">
<Grid x:Name = "LayoutRoot" Background = "White">
<Canvas Width = "380" Height = "280" >
<Ellipse Canvas.Left = "30" Canvas.Top = "30"
Fill = "Gray" Width = "200" Height = "120" />
</Canvas>
</Grid>
</UserControl>
Khi đoạn mã trên được biên dịch và thực thi, bạn sẽ thấy kết quả sau.