首頁 > 版面配置 > 格線面板

格線面板

在 Microsoft® Expression Blend™ 中，與其他專門為了管理更加特定的版面配置功能所設計的版面配置容器相比，格線面板是最具彈性的版面配置容器。Expression Blend 提供兩種版面配置編輯模式來使用格線面板：

• 畫布版面配置模式 (預設模式)
• 格線版面配置模式 (進階)

[畫布版面配置模式] 提供的編輯方式與在畫布面板中編輯相同。在這種模式中，當您移動已經設定的欄和列分割線 時，在這些欄和列中的元素會留在原位。[格線版面配置模式] 提供更進階的版面配置功能。在這種模式中，格線面板在設計階段的行為與格線在執行階段的行為相同。您可以在兩種模式之間切換，方法是在選取格線面板時按一下左上角的模式圖示，或者是選取或清除 [選項] 對話方塊 (在 [工具] 功能表上) 的 [畫板] 區段中之 [使用格線版面配置模式] 核取方塊。

使用格線面板的版面配置模式。

可使用版面配置容器子功能表或 [工具箱] 上的 [資產庫] 將格線面板新增至文件。

在 [格線版面配置模式] 所顯示之格線面板中的物件排列方式。

調整位置、大小及排列方式

格線面板的版面配置核心是如何使用對齊方式、邊界以及 Width 與 Height 屬性，有效地調整位置、大小及排列元素的方式：

• 對齊   對齊可依據一個元素的父元素來決定該元素的相對位置。
• 邊界   邊界可決定控制項周圍的空白空間，也就是位於子元素的外部與面板邊界之間的空間。
• Width 與 Height   Width 與 Height 屬性是以像素 (與裝置無關的單位，約為 1/96 英吋) 為測量單位的固定值。您可以將這些屬性設為 [Auto]，以便隨著父面板自動調整子元素的大小。

排列子元素

您可以去除格線內的某些區域，然後在格線內排列元素，作法是使用欄和列分割線 建立一連串的列和欄，由這些欄列定義可以在格線內排列元素的區域。當格線面板成為文件中的使用中元素時，格線的上方和左邊會出現藍色尺規。當您使用 [選取] 工具將滑鼠指標移至尺規上時，指標會變成帶有加號 (+) 的箭號 ，而要新增欄或列的地方會出現橘色線條。按一下上方尺規的任意處會在格線的該位置上新增一欄，按一下左方尺規會新增一列。

新增欄格線分隔線。

您可以在格線面板內繪製子元素，讓元素彼此重疊。重疊元素是否可見將視「Z 順序」而定，也就是在父元素內繪製或放置元素的順序。您可以使用 [物件] 功能表上的 [順序]，或在 [互動] 面板的 [物件與時間軸] 下以滑鼠右鍵按一下項目、指向 [順序]，然後按一下所需的命令，這樣就可以變更元素的 Z 順序。子元素也可以跨越多欄或多列。您也可以開啟貼齊，如此一來就可以透過開啟貼齊格線，將物件排列得更好。貼齊格線可讓您在畫板上拖曳物件，並讓它們貼齊相同容器元素內之其他物件的邊界、基準線 (用於文字物件) 或對齊 (紅色虛線)，如版面配置面板或格線面板中的欄及列分隔線。

調整列與欄的大小

當您處於格線面板的「格線版面配置模式」時，格線面板的上方和左方尺規旁邊會出現鎖定圖示。您可以使用這些鎖定圖示設定格線中的列和欄所用的大小調整類型。您可以設定列的高度屬性和欄的寬度屬性。有三個不同的選項可調整格線中之列和欄的大小，這些選項又會影響格線內之子元素的排列。這些大小選項包括：

• 固定大小  使用像素值 (px)，經由按一下鎖定圖示以設為 [以像素調整大小] (鎖定位置) 來設定。固定大小表示列或欄不會改變大小。

  在 Windows Presentation Foundation (WPF) 應用程式 (像是以 Expression Blend 建立的應用程式) 中，「像素」指的是與裝置無關的像素或與裝置無關的單位，其與螢幕解析度設為 96 DPI 監視器的像素大小相等。無論監視器大小或螢幕解析度為何，每個單位約為 1/96 英吋。

• 依星號調整大小　使用星號值 (*)，經由按一下鎖定圖示以設為 [以星號調整大小] (未鎖定位置) 來設定。依星號調整大小的效果與 HTML 中依百分比調整大小類似。
• 自動調整大小　不定義 Height 和 Width 屬性，經由按一下鎖定圖示以設為 [自動調整大小] 來設定。自動調整大小表示格線面板內的元素會隨著父元素的大小改變而調整大小。

格線面板中的不同欄設定成依星號調整大小和自動調整大小。

調整子元素的位置

在 [畫布版面配置模式] 中，您可以直接在畫板上工作、將元素在格線面板中任意拖曳 (甚至到界限之外)，或者在 [屬性] 面板的 [版面配置] 之下輸入精確的位置值，以視覺化地調整元素的位置。

在 [格線版面配置模式] 中，您可以設定每一個元素的邊界來設定格線內之子元素的位置。邊界指定一個元素與定義格線之列和欄之間的位移量，或與格線內的格線邊緣之間的位移量。邊界最初是在您將子元素拖曳至格線中的位置時設定，代表從所選元素的邊緣至下一條格線線段 (列或欄) 的距離。按一下邊界 (結點) 提示即可設定這些值。如果邊界提示呈開啟狀態 (像 或 )，則未設定該邊界。如果邊界提示呈關閉狀態 (如 或 )，則已設定該邊界。在執行階段調整格線大小，將會使任何未設定邊界的元素留在原位。與邊界繫結的元素則會隨著邊界大小的改變而移動。

Expression Blend 還會使用一項簡單的規則來設定預設對齊方式—如果您繪製或調整大小的子元素通過列或欄的中間，Width 和 Height 將會設為 Auto，否則就會固定。您也可以設定對齊方式，指出在調整格線大小時是否要強制使用邊界。如下圖所示，格線內的對齊方式會顯示為實線 (已設定對齊方式) 或虛線 (未設定對齊方式)。

[格線] 面板中，與左右兩邊繫結 (已設定邊界 - 請注意已指出邊界值)，但未與上下兩邊繫結 (未設定邊界) 的按鈕。

• 水平對齊
  • 靠左 - 錨定至左邊，但是調整大小時向右延伸
  • 置中 - 永遠錨定至水平置中，而不考慮調整大小
  • 靠右 - 錨定至右邊，但是調整大小時向左延伸
  • 延伸 - 調整大小時往水平方向兩邊延伸
• 垂直對齊
  • 靠下 - 錨定至下方，但是調整大小時向上延伸
  • 置中 - 永遠錨定至垂直置中，而不考慮調整大小
  • 靠上 靠下 - 錨定至上方，但是調整大小時向下延伸
  • 延伸 - 調整大小時往垂直方向兩邊延伸
• 邊界設定   [上]、[左]、[右] 以及 [下] 邊界是以像素 (或與裝置無關的單位， 約為 1/96 英吋) 測量的固定值。當您將子元素拖曳至格線中時，便會設定這些值，而這些值代表從所選元素的邊緣到下一條格線線段的距離。

調整子元素的大小

有 2 個主要選項可供您調整子元素的大小：固定大小或自動調整大小。固定大小的元素會在 [版面配置] 類別中設定特定的 [Width] 與 [Height] 值。自動調整大小的元素會將 [Width] 與 [Height] 值設為 [Auto]，並且隨著父面板自動調整大小。

• MinWidth 和 MinHeight　將列或欄內的元素調整或縮放到的最小大小。
• MaxWidth 和 MaxHeight　將列或欄內的元素調整或縮放到的最大大小。如果您不想設定大小上限，可以將此值設為 [無限大]。
• 裁剪內容   決定父面板是否應裁剪其子元素。

格線分割器

GridSplitter 是格線面板中所使用的一種控制項，提供了一個互動式 UI，可供使用者在執行階段手動調整格線組件大小。您可以在 [資產庫] 中取得 GridSplitter。

如需格線面板、GridSplitter 控制項，或如何建立自訂版面配置面板的詳細資訊，請參閱 Windows 軟體開發套件 (SDK) 的＜.NET 程式開發＞一節 (英文)。