Silverlight - 固定布局

---

控件的布局对于应用程序的可用性非常重要且至关重要。它用于在应用程序中排列一组 GUI 元素。选择布局面板时需要考虑一些重要事项。他们是 -

• 子元素的位置。
• 子元素的大小。
• 将重叠的子元素分层。

如果应用程序在不同的屏幕分辨率上使用，则控件的固定像素排列将不起作用。XAML 提供了一组丰富的内置布局面板，可以以适当的方式排列 GUI 元素。

我们将从简单的固定布局开始。然后我们将看看Silverlight 设计支持的动态布局方案。我们将看到渗透到所有用户界面元素中的与布局相关的属性和概念。

固定布局

Canvas元素提供了最简单的布局。Canvas面板是基本布局面板，可以使用相对于 Canvas 任意一侧（如左、右、上、下）的坐标显式定位子元素。

通常，Canvas用于 2D 图形元素（例如椭圆形、矩形等）。它不用于 UI 元素，因为在调整 XAML 应用程序大小、本地化或缩放 XAML 应用程序时指定绝对坐标会带来麻烦。

下面给出了Canvas类的常用属性。

下面给出了 Canvas 最常用的属性。

先生。没有。	属性及描述
1	背景 获取或设置填充面板内容区域的 Brush。（继承自面板）
2	孩子们 获取此 Panel 的子元素的 UIElementCollection。（继承自面板。）
3	高度 获取或设置元素的建议高度。（继承自 FrameworkElement。）
4	项目高度 获取或设置一个值，该值指定 WrapPanel 中包含的所有项目的高度。
5	项目宽度 获取或设置一个值，该值指定 WrapPanel 中包含的所有项目的宽度。
6	逻辑儿童 获取一个枚举器，该枚举器可以迭代此Panel 元素的逻辑子元素。（继承自面板。）
7	逻辑导向 面板的方向（如果面板仅支持单个维度的布局）。（继承自面板。）
8	左属性 标识 Canvas.Left XAML 附加属性。
9	利润 获取或设置元素的外边距。（继承自 FrameworkElement。）
10	姓名 获取或设置元素的标识名称。该名称提供了一个引用，以便代码隐藏（例如事件处理程序代码）可以在 XAML 处理器处理期间构造标记元素后引用该标记元素。（继承自 FrameworkElement。）
11	方向 获取或设置一个值，该值指定子内容的排列维度。
12	家长 获取该元素的逻辑父元素。（继承自 FrameworkElement。）
13	资源 获取或设置本地定义的资源字典。（继承自 FrameworkElement。）
14	风格 获取或设置此元素在呈现时使用的样式。（继承自 FrameworkElement。）
15	顶级地产 标识 Canvas.Top XAML 附加属性。
16	宽度 获取或设置元素的宽度。（继承自 FrameworkElement。）
17 号	Z索引属性 标识 Canvas.ZIndex XAML 附加属性。

下面给出了Canvas的常用方法。

以下示例演示如何将子元素添加到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>

当上面的代码被编译并执行时，您将看到以下输出。