Silverlight - 固定布局
控件的布局对于应用程序的可用性非常重要和关键。 它用于在应用程序中排列一组 GUI 元素。 选择布局面板时需要考虑一些重要事项。 他们是 −
- 子元素的位置。
- 子元素的大小。
- 重叠的子元素彼此层叠。
如果应用程序在不同的屏幕分辨率上使用，则控件的固定像素排列将不起作用。 XAML 提供了一组丰富的内置布局面板，可以以适当的方式排列 GUI 元素。
我们将首先了解简单的固定布局。 然后我们将了解 Silverlight 设计支持的动态布局方案。 我们将看到渗透到所有用户界面元素中的与布局相关的属性和概念。
固定布局
Canvas 元素提供了最简单的布局。 Canvas 面板是基本布局面板，可以使用相对于 Canvas 任意一侧(例如左、右、上、下)的坐标显式定位子元素。
通常，Canvas 用于 2D 图形元素(例如椭圆形、矩形等)。 它不用于 UI 元素，因为在调整 XAML 应用程序大小、本地化或缩放 XAML 应用程序时指定绝对坐标会带来麻烦。
下面给出的是Canvas类的常用属性。
| Sr. No. | 属性和描述 |
|---|---|
| 1 | Background 获取或设置填充面板内容区域的Brush。 (继承自Panel) |
| 2 | Children 获取此面板的子元素的 UIElementCollection。 (继承自Panel。) |
| 3 | Height 获取或设置元素的建议高度。 (继承自FrameworkElement。) |
| 4 | ItemHeight 获取或设置一个值，该值指定 WrapPanel 中包含的所有项目的高度。 |
| 5 | ItemWidth 获取或设置一个值，该值指定 WrapPanel 中包含的所有项目的宽度。 |
| 6 | LogicalChildren 获取一个可以迭代此Panel 元素的逻辑子元素的枚举器。 (继承自Panel。) |
| 7 | LogicalOrientation 面板的方向(如果面板仅支持单个维度的布局)。 (继承自Panel。) |
| 8 | LeftProperty 标识 Canvas.Left XAML 附加属性。 |
| 9 | Margin 获取或设置元素的外边距。 (继承自FrameworkElement。) |
| 10 | Name 获取或设置元素的标识名称。 该名称提供了一个引用，以便代码隐藏(例如事件处理程序代码)可以在 XAML 处理器处理期间构造标记元素后引用该标记元素。 (继承自 FrameworkElement。) |
| 11 | Orientation 获取或设置一个值，该值指定子内容排列的维度。 |
| 12 | Parent 获取该元素的逻辑父元素。 (继承自FrameworkElement。) |
| 13 | Resources 获取或设置本地定义的资源字典。 (继承自FrameworkElement。) |
| 14 | Style 获取或设置此元素在呈现时使用的样式。 (继承自FrameworkElement。) |
| 15 | TopProperty 标识 Canvas.Top XAML 附加属性。 |
| 16 | Width 获取或设置元素的宽度。 (继承自FrameworkElement。) |
| 17 | ZIndexProperty 标识 Canvas.ZIndex XAML 附加属性。 |
下面是Canvas常用的方法。
| Sr. No. | 方法及说明 |
|---|---|
| 1 | GetLeft 获取目标元素的 Canvas.Left XAML 附加属性的值。 |
| 2 | GetTop 获取目标元素的 Canvas.Top XAML 附加属性的值。 |
| 3 | GetZIndex 获取目标元素的 Canvas.ZIndex XAML 附加属性的值。 |
| 4 | SetLeft 设置目标元素的 Canvas.Left XAML 附加属性的值。 |
| 5 | SetTop 设置目标元素的 Canvas.Top XAML 附加属性的值。 |
| 6 | SetZIndex 设置目标元素的 Canvas.ZIndex XAML 附加属性的值。 |
以下示例演示如何将子元素添加到 Canvas 中。 下面是 XAML 实现，其中在 Canvas 内创建具有不同偏移属性的 Ellipse。
<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>
编译并执行上述代码后，您将看到以下输出。
