Silverlight - 动态布局

Canvas是所有 Silverlight 布局面板中最无趣的。其他面板启用动态布局，这意味着布局可以随着显示项目数量的变化、显示信息大小的变化、或者由于用户调整浏览器大小而导致应用程序可用的空间量发生变化而进行调整。

Silverlight 提供了两个具有动态布局策略的面板。

StackPanel - 将元素排列在垂直或水平堆栈中。
网格- 提供灵活的网格状或表格式布局系统。

堆栈面板

Stack面板是XAML中的一个简单且有用的布局面板。在Stack Panel中，子元素可以根据其方向属性水平或垂直排列在单行中。每当需要创建任何类型的列表时，通常都会使用它。ItemsControls 使用堆栈面板。Menu、ListBox和ComboBox是它们默认的内部布局面板。

下面给出了StackPanel的常用属性。

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

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

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

<UserControl x:Class = "DynamicLayout.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"> 
      <StackPanel>
         <Button x:Name = "button" Content = "Button" Margin = "10" /> 
         <Button x:Name = "button1" Content = "Button" Margin = "10"/> 
         <Button x:Name = "button2" Content = "Button" Margin = "10"/> 
         <Button x:Name = "button3" Content = "Button" Margin = "10"/> 
      </StackPanel>  
   </Grid> 
	
</UserControl>

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

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

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

网格

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

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

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

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

先生。没有。	属性及描述
1	背景获取或设置填充面板内容区域的 Brush。（继承自面板）
2	孩子们获取此 Panel 的子元素的 UIElementCollection。（继承自面板。）
3	列定义获取在此 Grid 实例上定义的 ColumnDefinition 对象的列表。
4	高度获取或设置元素的建议高度。（继承自 FrameworkElement。）
5	项目高度获取或设置一个值，该值指定 WrapPanel 中包含的所有项目的高度。
6	项目宽度获取或设置一个值，该值指定 WrapPanel 中包含的所有项目的宽度。
7	利润获取或设置元素的外边距。（继承自 FrameworkElement。）
8	姓名获取或设置元素的标识名称。该名称提供了一个引用，以便代码隐藏（例如事件处理程序代码）可以在 XAML 处理器处理期间构造标记元素后引用该标记元素。（继承自 FrameworkElement。）
9	方向获取或设置一个值，该值指定子内容的排列维度。
10	家长获取该元素的逻辑父元素。（继承自 FrameworkElement。）
11	资源获取或设置本地定义的资源字典。（继承自 FrameworkElement。）
12	行定义获取在此 Grid 实例上定义的 RowDefinition 对象的列表。
13	风格获取或设置此元素在呈现时使用的样式。（继承自 FrameworkElement。）
14	宽度获取或设置元素的宽度。（继承自 FrameworkElement。）

下面给出了Grid类的常用方法。

下面给出了 Grid 最常用的方法。

先生。没有。	方法及说明
1	获取列从指定的 FrameworkElement 获取 Grid.Column XAML 附加属性的值。
2	获取列跨度从指定的 FrameworkElement 获取 Grid.ColumnSpan XAML 附加属性的值。
3	获取行从指定的 FrameworkElement 获取 Grid.Row XAML 附加属性的值。
4	设置列设置指定 FrameworkElement 上的 Grid.Column XAML 附加属性的值。
5	设置行设置指定 FrameworkElement 上的 Grid.Row XAML 附加属性的值。
6	设置行跨度设置指定 FrameworkElement 上的 Grid.RowSpan XAML 附加属性的值。

以下示例演示如何将子元素添加到 Grid 中以以表格形式指定它。下面给出的是 XAML 实现，其中添加了一些 UI 元素。

<UserControl x:Class = "DynamicLayout.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"> 
	
      <Grid.ColumnDefinitions> 
         <ColumnDefinition Width = "130" /> 
         <ColumnDefinition Width = "1*" /> 
         <ColumnDefinition Width = "2*" /> 
      </Grid.ColumnDefinitions>
		
      <Grid.RowDefinitions> 
         <RowDefinition Height = "Auto" /> 
         <RowDefinition Height = "50" /> 
      </Grid.RowDefinitions>  
		
      <TextBlock Grid.Column = "0" Grid.Row = "0" 
         Text = "Content that no longer fits, not even close here" 
         TextWrapping = "Wrap" /> 
			
      <Button Grid.Column = "1" Grid.Row = "0" Content = "OK" />  
      <Ellipse Grid.Column = "1" Grid.Row = "1"  Fill = "Aqua" /> 
      <Rectangle Grid.Column = "2" Grid.Row = "1" Fill = "Orchid" RadiusX = "20" RadiusY = "20" />  
		
   </Grid> 
	
</UserControl>

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

第二列或第三列的宽度为1*和2*。这意味着它们会共享任何固定宽度列和自动宽度列占用空间后剩余的空间。这里1和2的意义在于2*列获得的空间是1*列的两倍。

执行上述代码后，您将看到以下输出。

当您调整应用程序大小时，这两列的内容也会调整大小以匹配。顺便说一下，星号大小的行或列的绝对值并不重要；只有比率才是重要的。