Silverlight - 固定佈局

上一個

下一個

控制元件的佈局對於應用程式的可用性非常重要和關鍵。它用於在應用程式中排列一組 GUI 元素。在選擇佈局面板時，需要考慮一些重要事項。它們是 -

子元素的位置。
子元素的大小。
子元素彼此重疊的分層。

如果應用程式在不同的螢幕解析度上使用，則控制元件的固定畫素排列不起作用。XAML 提供了一套豐富的內建佈局面板來以適當的方式排列 GUI 元素。

我們將首先了解簡單的固定佈局。然後，我們將瞭解 Silverlight 設計支援的動態佈局方案。我們將看到貫穿所有使用者介面元素的佈局相關屬性和概念。

固定佈局

Canvas 元素提供了最簡單的佈局型別。Canvas 面板是基本佈局面板，其中子元素可以使用相對於 Canvas 任何一側（例如左、右、上和下）的座標顯式定位。

通常，Canvas 用於 2D 圖形元素（例如 Ellipse、Rectangle 等）。它不用於 UI 元素，因為在調整大小、本地化或縮放 XAML 應用程式時，指定絕對座標會帶來麻煩。

以下是Canvas 類的常用屬性。

以下是 Canvas 最常用的屬性。

序號	屬性及描述
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	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 的常用方法。

序號	方法及描述
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 附加屬性的值。

以下示例演示如何將子元素新增到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>

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

列印頁面

上一個

下一個