Silverlight - 動態佈局

在Silverlight的所有佈局面板中，Canvas是最不有趣的一個。其他面板支援動態佈局，這意味著佈局可以根據顯示專案數量、顯示資訊的大小或使用者調整瀏覽器大小而導致的可用空間數量的變化而調整。

Silverlight 提供了兩種具有動態佈局策略的面板。

StackPanel - 將元素垂直或水平排列。
Grid - 提供靈活的網格狀或表格狀佈局系統。

StackPanel

StackPanel 是 XAML 中一個簡單而有用的佈局面板。在StackPanel中，子元素可以根據其 orientation 屬性水平或垂直地排列成單行。當需要建立任何型別的列表時，通常會使用它。ItemsControls 使用 StackPanel。Menu、ListBox和ComboBox是其預設的內部佈局面板。

以下是StackPanel常用的屬性。

以下是StackPanel最常用的屬性。

序號	屬性及描述
1	Background 獲取或設定填充面板內容區域的Brush。（繼承自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。以下是其中在StackPanel內建立了一些屬性的按鈕的XAML實現。

<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面板提供了一個靈活的區域，該區域由行和列組成。在Grid中，子元素可以以表格形式排列。可以使用Grid.Row和Grid.Column屬性將元素新增到任何特定的行和列。預設情況下，Grid面板將建立一個行和一列。多行和多列是透過RowDefinitions和ColumnDefinitions屬性建立的。行的高度和列的寬度可以透過以下三種方式定義：

固定值 - 為邏輯單位（1/96 英寸）分配固定大小。
Auto - 它將佔用該特定行/列中的控制元件所需的空間。
星號 (*) - 當Auto和固定大小填滿後，它將佔用剩餘空間。

以下是Grid類的常用屬性。

以下是Grid最常用的屬性。

序號	屬性及描述
1	Background 獲取或設定填充面板內容區域的Brush。（繼承自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類的常用方法。

以下是Grid最常用的方法。

序號	方法及描述
1	GetColumn 從指定的FrameworkElement獲取Grid.Column XAML附加屬性的值。
2	GetColumnSpan 從指定的FrameworkElement獲取Grid.ColumnSpan XAML附加屬性的值。
3	GetRow 從指定的FrameworkElement獲取Grid.Row XAML附加屬性的值。
4	SetColumn 設定指定的FrameworkElement上的Grid.Column XAML附加屬性的值。
5	SetRow 設定指定的FrameworkElement上的Grid.Row XAML附加屬性的值。
6	SetRowSpan 設定指定的FrameworkElement上的Grid.RowSpan XAML附加屬性的值。

以下示例演示如何將子元素新增到Grid以表格形式指定它。以下是添加了一些UI元素的XAML實現。

<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*列的兩倍。

執行上述程式碼後，您將看到以下輸出。

調整應用程式大小時，這兩列的內容也會相應調整大小。順便說一句，星號大小的行或列的絕對值無關緊要；只有比例才是重要的。

列印頁面