控件布局对于应用程序可用性非常重要且至关重要.它用于在应用程序中排列一组GUI元素.选择布局面板时需要考虑一些重要事项.它们是 :
子元素的位置.
子元素的大小.
将重叠的子元素叠加在一起.
控件的固定像素排列不起作用如果应用程序已用于不同的屏幕分辨率. XAML提供了一组丰富的内置布局面板，以便以适当的方式排列GUI元素.
我们将首先查看简单的固定布局.然后我们将看看Silverlight设计支持的动态布局方案.我们将看到与所有用户界面元素相关的布局相关属性和概念.
最简单的布局由画布元素. 画布面板是基本布局面板，其中子元素可以使用相对于画布任何一侧的坐标显式定位，如左，右，上和下.
通常情况下，画布用于2D图形元素(如椭圆，矩形等).它不用于UI元素，因为在调整XAML应用程序的大小，本地化或缩放时，指定绝对坐标会给您带来麻烦.
下面给出了常用的属性 画布类.
| Sr.No. | 属性&描述 |
|---|---|
| 1 | Background 获取或设置一个填充面板内容区域的画笔. (继承自Panel) |
| 2 | Children 获取此Panel的子元素的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.不. | 方法&说明 |
|---|---|
| 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附加属性的值. |
以下示例显示如何将子元素添加到画布.下面是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>
编译并执行上述代码时，您将看到以下输出.
