Silverlight - 动态布局

Silverlight动态布局 - 从概述，环境设置，入门，XAML概述，项目类型，固定布局，动态布局，约束与无约束布局，Silverlight和CSS，控件，按钮，内容模型，简单易用的步骤学习Silverlight列表框，模板，视觉状态，数据绑定，浏览器集成，浏览器外应用程序，应用程序，资源和部署，文件访问，视图模型，输入处理，隔离存储，文本，动画，视频和音频，打印。

Canvas 是所有Silverlight布局面板中最不感兴趣的.其他面板启用动态布局，这意味着布局可以随着显示的项目数量的变化而变化，或者显示的信息的大小不同，或者应用程序可用的空间量是否因为用户已调整浏览器的大小.

Silverlight提供了两个动态布局策略面板.

StackPanel : 它将元素排列成垂直或水平堆栈.
网格 : 它提供了一个灵活的网格状或类似于表格的布局系统.

堆栈面板

Stack面板是XAML中一个简单而有用的布局面板.在堆栈面板中，子元素可以根据其方向属性水平或垂直排列在一行中.无论何时需要创建任何类型的列表，都经常使用它. ItemsControls使用堆栈面板. 菜单，列表框和 ComboBox 是它们的默认内部布局面板.

以下是常用的属性 StackPanel .

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	Margin 获取或设置元素的外边距. (继承自FrameworkElement.)
9	Name 获取或设置元素的标识名称.该名称提供了一个引用，以便代码隐藏(例如事件处理程序代码)可以在XAML处理器处理期间构造标记元素之后引用该标记元素. (继承自FrameworkElement.)
10	Orientation 获取或设置一个值，该值指定子内容的排列维度.
11	Parent 获取此元素的逻辑父元素. (继承自FrameworkElement.)
12	Resources 获取或设置本地定义的资源字典. (继承自FrameworkElement.)
13	Style 获取或设置此元素在渲染时使用的样式. (继承自FrameworkElement.)
14	Width 获取或设置元素的宽度. (继承自FrameworkElement.)

以下示例显示如何将子元素添加到 StackPanel 中.下面给出的是XAML实现，其中 Buttons 是在具有一些属性的StackPanel内创建的.

编译并执行上述代码时，您将看到以下输出.

动态布局符合

StackPanel尝试安排每个元素在堆叠方向上具有所需的空间.

现在，如果你调整浏览器的大小，你会看到按钮的宽度也发生了变化.

调整动态布局大小 >

网格

网格面板提供了一个灵活的区域，由行和列组成.在网格中，子元素可以以表格形式排列.可以使用 Grid.Row 和 Grid.Column 属性将元素添加到任何特定的行和列.默认情况下，使用一行和一列创建网格面板. RowDefinitions 和 ColumnDefinitions 属性创建了多个行和列.行的高度和列的宽度可以通过以下三种方式定义 :

固定值 : 分配固定大小的逻辑单位(1/96英寸).
自动 : 它将占用该特定行/列中控件所需的空间.
Star(*) : 当自动和固定大小被填充时，将占用剩余空间.

下面给出了 Grid 类的常用属性.

Sr. No.	属性&描述
1	Background 获取或设置一个填充面板内容区域的画笔. (继承自Panel)
2	Children 获取此Panel的子元素的UIElementCollection. (继承自Panel.)
3	ColumnDefinitions 获取在此Grid实例上定义的ColumnDefinition对象列表.
4	Height 获取或设置建议的元素高度. (继承自FrameworkElement.)
5	ItemHeight 获取或设置一个值，该值指定WrapPanel中包含的所有项目的高度.
6	ItemWidth 获取或设置一个值，该值指定WrapPanel中包含的所有项目的宽度.
7	Margin 获取或设置元素的外边距. (继承自FrameworkElement.)
8	Name 获取或设置元素的标识名称.该名称提供了一个引用，以便代码隐藏(例如事件处理程序代码)可以在XAML处理器处理期间构造标记元素之后引用该标记元素. (继承自FrameworkElement.)
9	Orientation 获取或设置一个值，该值指定子内容的排列维度.
10	Parent 获取此元素的逻辑父元素. (继承自FrameworkElement.)
11	Resources 获取或设置本地定义的资源字典. (继承自FrameworkElement.)
12	RowDefinitions 获取在此Grid实例上定义的RowDefinition对象列表.
13	Style 获取或设置渲染时此元素使用的样式. (继承自FrameworkElement.)
14	Width 获取或设置元素的宽度. (继承自FrameworkElement.)

鉴于以下是 Grid 类的常用方法.

Sr. No.	方法&说明
1	GetColumn 从指定的FrameworkElement获取Grid.Column XAML附加属性的值.
2	GetColumnSpan 获取Grid.ColumnSpan XAML的值来自指定FrameworkElement的附加属性.
3	GetRow 从指定的FrameworkElement获取Grid.Row XAML附加属性的值.
4	SetColumn 在指定的FrameworkElement上设置Grid.Column XAML附加属性的值.
5	SetRow 在指定的FrameworkElement上设置Grid.Row XAML附加属性的值.
6	SetRowSpan 设置th指定FrameworkElement上Grid.RowSpan XAML附加属性的值.

以下示例显示如何将子元素添加到网格中以表格形式指定它.下面给出了一些添加了一些UI元素的XAML实现.

第一列设置为固定大小.此列中的任何元素都具有该宽度. Grid.Column 和 Grid.Row 属性指定这些项目所在的行和列，这些是基于0的属性.

第二列或第三列的宽度为 1 * 且 2 * .这意味着在任何固定和自动宽度列占用空间后，它们会分享剩余的空间.这里 1 和 2 的重要性在于 2 * 列的空间是 1 * column.

执行上面的代码时，你会看到以下输出.

动态布局网格

调整应用程序大小时，这两列的内容会调整大小以匹配.顺便说一句，星形行或列的绝对值无关紧要;它只是比率，这很重要.

调整动态布局网格大小