格線面板
.png "本頁適用於 WPF 和 Silverlight 2")
與其他專門為了管理更加特定的版面配置功能所設計的版面配置容器相比，格線面板是最具彈性的版面配置容器。Microsoft Expression Blend 提供兩種版面配置編輯模式來使用格線面板：
.png "Cc295203.ecb419d9-1def-4c4d-9656-cab9bdb89672(zh-tw,Expression.10).png")
[畫布版面配置模式] (預設模式) 提供的編輯方式與在畫布面板中編輯相同。在這種模式中，當您移動已經設定的欄和列分割線 .png "Cc295203.e91e3024-62b1-46db-a73c-7e2ef5fd2780(zh-tw,Expression.10).png")
時，在這些欄和列中的元素會留在原位。.png "Cc295203.c76bbf09-1922-4f45-8d92-9c8ae64ca4a4(zh-tw,Expression.10).png")
[格線版面配置模式] (進階) 提供更進階的版面配置功能。在這種模式中，格線面板在設計階段的行為與格線在執行階段的行為相同。您可以在兩種模式之間切換，方法是在選取格線面板時按一下左上角的模式圖示，或者是選取或清除 [選項] 對話方塊 (在 [工具] 功能表上) 的 [畫板] 區段中之 [使用格線版面配置模式] 核取方塊。
使用格線面板的版面配置模式
.png "Cc295203.3078f933-314a-4951-966c-a66f5edbf69f(zh-tw,Expression.10).png")
可使用版面配置容器子功能表或 [工具箱] 上的 [資產庫] 按鈕 .png "Cc295203.0224cabd-5da1-4e01-bddd-4a647401a098(zh-tw,Expression.10).png")
，將格線面板新增至文件。
格線版面配置模式中顯示出分割為三列與三欄的格線面板上之物件排列方式
.png "Cc295203.0c06c18b-6bce-4d41-bf0f-0d1f8cdbf5d3(zh-tw,Expression.10).png")
調整位置、大小及排列方式
格線面板的版面配置核心是如何使用對齊方式、邊界以及 Width 與 Height 屬性，有效地調整位置、大小及排列元素的方式：
對齊 可依據一個元素的父元素來決定該元素的相對位置。
邊界 可決定控制項周圍的空白空間，也就是位於子元素的外部與面板邊界之間的空間。
Width 與 Height 以像素為單位測量固定值 (或裝置無關的 單位，約為 1/96 英吋)。您可以將這些屬性設為 [Auto]，以隨著父面板自動調整子元素的大小。
.gif "Cc295203.7e183f1f-37d8-4dcb-980c-19a5d61ca087(zh-tw,Expression.10).gif")
回到頁首
排列子元素
您可以去除格線內的某些區域，然後在格線內排列元素。您可以使用欄和分隔線 建立一連串的列和欄，由這些欄列定義可以在格線內排列元素的區域。當格線面板成為文件中的使用中元素時，格線的上方和左邊會出現藍色尺規。當您使用 [選取] .png "Cc295203.2ff91340-477e-4efa-a0f7-af20851e4daa(zh-tw,Expression.10).png")
工具將滑鼠指標移至尺規上時，指標會變成帶有加號 (+) 的箭號 .png "Cc295203.a61a7ecb-9364-4bfe-ae2e-fac00d6858ba(zh-tw,Expression.10).png")
，而要新增欄或列的地方會出現橘色線條。按一下上方尺規的任意處會在格線的該位置上新增一欄，按一下左方尺規會新增一列。
新增欄格線分隔線
.png "Cc295203.814b7368-8ef4-4771-a067-17e30a9f4bff(zh-tw,Expression.10).png")
您可以在格線面板內繪製子元素，讓元素彼此重疊。是否可看見重疊元素將視「Z 軸順序」而定，也就是在父元素內繪製或放置元素的順序。您可以使用 [物件] 功能表上的 [順序]，或在 [互動] 面板的 [物件與時間軸] 下以滑鼠右鍵按一下項目、指向 [順序]，然後按一下所需的命令，如此即可變更元素的 Z 軸順序。子元素也可以跨越多欄或多列。您也可以開啟貼齊，如此一來就可以透過開啟貼齊格線，將物件排列得更好。貼齊格線可讓您在畫板上拖曳物件，並讓它們貼齊相同容器元素內之其他物件的邊界、基準線 (用於文字物件) 或對齊 (紅色虛線)，如版面配置面板或格線面板中的欄及列分隔線。
回到頁首
調整列與欄的大小
當您處於格線面板的 [格線版面配置模] 時，格線面板的上方和左側尺規旁會出現鎖定圖示。您可以使用這些鎖定圖示設定格線中的列和欄所用的大小調整類型。您可以設定列的高度值和欄的寬度值。您有三個不同的選項，可調整格線中之列和欄的大小，這些選項又會影響格線內之子元素的排列。這些調整大小的選項如下所示：
固定大小 使用像素值 (px)，經由按一下鎖定圖示以設為 [以像素調整大小] (鎖定位置)
.png "Cc295203.56fdad3b-cb94-41a2-8afb-3a2bbf4b2f1a(zh-tw,Expression.10).png")
進行設定。固定大小表示列或欄不會改變大小。.gif "注意事項")
注意事項：在 Windows Presentation Foundation (WPF) 應用程式 (例如以 Expression Blend 建立的應用程式) 中，「像素」指的是與裝置無關的像素或與裝置無關的單位，其與螢幕解析度設為 96 DPI 監視器的像素大小相等。無論監視器大小或螢幕解析度為何，每個單位約為 1/96 英吋。
星號調整 使用星號值 (*)，經由按一下鎖定圖示以設為 [以星星調整大小] (未鎖定位置)
.png "Cc295203.1b4edaf6-b6a8-4498-80dc-949375fa610d(zh-tw,Expression.10).png")
進行設定。依星號調整大小的效果與 HTML 中依百分比調整大小類似。自動調整大小 不定義 [Width] 和 [Height] 屬性，經由按一下鎖定圖示以設為 [自動調整大小]
.png "Cc295203.aa9ec064-22f8-4b62-9eed-3f4772362d22(zh-tw,Expression.10).png")
進行設定。自動調整大小表示格線面板內的元素會隨著父元素的大小改變而調整大小。
格線面板中的不同欄設定成依星號調整大小和自動調整大小
.png "Cc295203.98b234b2-ac3b-441f-9136-98375fee87b7(zh-tw,Expression.10).png")
已在畫板上選取格線分隔線 時，您可以使用 [屬性] 面板，在使用星號調整或固定大小時，選取調整大小選項以及調整 [Width] 屬性。您也可以在 [屬性] 面板中，設定欄格線分隔線的 [MaxWidth] 與 [MinWidth] 屬性。
回到頁首
調整子元素的位置
在 [畫布版面配置模式] 中，您可以直接在畫板上工作、將元素在格線面板中任意拖曳 (甚至到界限之外)，或者在 [屬性] 面板的 [版面配置] 之下輸入精確的位置值，以視覺方式調整元素位置。
在 [格線版面配置模式] 中，您可以設定每一個元素的邊界以設定格線內之子元素的位置。邊界會指定一個元素與定義格線之列和欄之間的位移量，或與格線內的儲存格邊緣之間的位移量。邊界是在您將子元素拖曳至格線中的位置時設定，代表從所選元素的邊緣至下一條格線 (列或欄) 的距離。按一下邊界 (結點) 提示即可設定這些值。如果邊界提示呈開啟狀態 (像 .png "Cc295203.dac083fe-54cd-4cdc-973a-bea351080175(zh-tw,Expression.10).png")
或 .png "Cc295203.7eeec52f-8610-416e-a0f2-79c7bf117e77(zh-tw,Expression.10).png")
)，則未設定該邊界。如果邊界提示呈關閉狀態 (如 .png "Cc295203.8523b4c7-be0f-4624-961a-6adb66120049(zh-tw,Expression.10).png")
或 .png "Cc295203.95a79778-cb78-400c-9f4f-5f6fc5a02eb1(zh-tw,Expression.10).png")
)，則已設定該邊界。在執行階段調整格線大小，將會使任何未設定邊界的元素留在原位。與邊界繫結的元素則會隨著邊界大小的改變而移動。
Expression Blend 還會使用一項簡單的規則來設定預設對齊方式：如果您繪製或調整大小的子元素通過列或欄的中間，Width 和 Height 將會設為 Auto，否則就會固定。您也可以設定對齊選項，指出在調整格線大小時是否要強制使用邊界。如下圖所示，格線內的對齊方式會顯示為實線 (已設定對齊方式) 或虛線 (未設定對齊方式)。
[格線] 面板中，與左右兩邊繫結 (已設定邊界 - 請注意所指出的邊界值)，但未與上下兩邊繫結 (未設定邊界) 的按鈕。
.png "Cc295203.cd8d0751-ffa0-4f04-bc2f-09584ecd873d(zh-tw,Expression.10).png")
水平對齊
[左]
.png "Cc295203.1e3c2891-633d-4162-a3bd-d5ac53046b56(zh-tw,Expression.10).png")
。錨定至左邊，但是調整大小時向右延伸。[置中]
.png "Cc295203.02978741-8e12-476d-afa7-165b613ea515(zh-tw,Expression.10).png")
。永遠錨定為水平置中，而不考慮調整大小。[右]
.png "Cc295203.c0d22c24-ad68-4355-b8f2-d6a373deaf8e(zh-tw,Expression.10).png")
。錨定至右邊，但是調整大小時向左延伸。[延展]
.png "Cc295203.90aa9534-0480-4a7f-b992-1af23c71ea9c(zh-tw,Expression.10).png")
。調整大小時往水平方向兩邊延伸。
垂直對齊
[下]
.png "Cc295203.7c84b219-479d-45e7-b2fc-2df1b5e35129(zh-tw,Expression.10).png")
。錨定至底部，但是調整大小時向上延伸。[置中]
.png "Cc295203.5d244079-53d6-4188-ac2b-3a31054a2cd7(zh-tw,Expression.10).png")
。永遠錨定至垂直置中，而不考慮調整大小。[上]
.png "Cc295203.737a11a8-b9d6-4270-8432-f17bb11a1337(zh-tw,Expression.10).png")
。錨定至上方，但是調整大小時向下延伸。[延展]
.png "Cc295203.fbd6b7db-d726-4f40-b8c7-b287423e6615(zh-tw,Expression.10).png")
。調整大小時往垂直方向兩邊延伸。
[邊界設定] [上]、[左]、[右] 以及 [下] 邊界是以像素 (或與裝置無關的單位，約為 1/96 英吋) 測量的固定值。這些值是在您將子元素拖曳至格線中時設定，而這些值代表從所選元素的邊緣到下一條格線的距離。
回到頁首
調整子元素的大小
您有兩種主要的縮放選項可用於子項目：固定大小或自動調整大小。固定大小的元素會在 [版面配置] 類別中具有特定的寬度與高度值。自動調整大小的元素會將寬度與高度值設為 [Auto]，並且隨著父面板自動調整大小。
[MinWidth 和 MinHeight] 將列或欄內的元素調整或縮放到的最小的大小。
[MaxWidth 和 MaxHeight] 將列或欄內的元素調整或縮放到的最大的大小。如果您不想設定大小上限，可以將此值設為 [無限大]。
[裁剪內容] 決定父面板是否應裁剪其子元素。
回到頁首
格線分割器
GridSplitter.png "Cc295203.d08d529f-a27e-4a8f-95aa-8a4e8b4ee7be(zh-tw,Expression.10).png")
是格線面板中所使用的一種控制項，此面板可與使用者互動，在執行階段手動調整格線組件大小。可在 [資產庫] 中使用 GridSplitter。
如需有關格線面板、GridSplitter 控制項，或如何建立自訂版面配置面板的詳細資訊，請參閱 Windows 軟體開發套件 (SDK) 的 .NET 開發 (英文) 一節。
回到頁首