使用格線版面配置面板

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

• 格線版面配置模式 (預設模式)    提供與 Grid 之執行階段調整大小行為相同的編輯經驗。在這種模式中，當您移動已經建立的欄和列分隔線 時，在這些欄和列中的物件會變更大小，以保留其 Margin 屬性。

• 畫布版面配置模式   提供與在畫布面板內編輯相同的編輯經驗。在這種模式中，當您移動已經建立的欄和列分隔線 時，在這些欄和列中的物件會保留在原位，但是它們的 Margin 屬性則會更新。

您可以在這兩種模式之間切換，方法是在選取 Grid 物件時按一下左上角的模式圖示，或者是選取或清除 [選項] 對話方塊 (在 [工具] 功能表上) 之 [畫板] 區段中的 [使用格線版面配置模式] 核取方塊。

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

從 [資產] 面板 或從 [工具] 面板中的版面配置容器按鈕選取 Grid  ，然後使用指標在畫板上拖曳，即可將 Grid 新增至文件。下列 XAML 程式碼會新增至您的專案：

<Grid/>

如需如何使用 Grid 物件的詳細資訊，請參閱新增或移除列或欄和變更列或欄的大小選項。

格線版面配置模式中顯示出分割為三列與三欄的格線面板上之物件排列方式

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

Grid 面板中版面配置的目的是要使用 Alignment 、 Margin 以及 Width 與 Height 屬性，有效地調整物件位置、大小及排列方式：

• Alignment    依據物件的父物件來決定該物件的相對位置。

• Margins    決定控制項周圍的空白空間，也就是位於子物件的外部與面板邊界之間的空間。

• Width 與 Height    以像素 (換算為 「與裝置無關」 的單位約為 1/96 英吋) 為單位測量的固定值。您可以將這些屬性設為 [Auto]，以隨著父面板自動調整子物件的大小。

排列子物件

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

新增欄格線分隔線

您可以在 Grid 版面配置面板內繪製子物件，讓物件彼此重疊。是否可看見重疊物件將視 Z 軸順序而定，也就是在父物件內繪製或放置物件的順序。您可以使用 [物件] 功能表上的 [順序]，或在 [物件與時間軸] 面板中以滑鼠右鍵按一下項目，再指向 [順序]，然後按一下所需的命令，如此即可變更物件的 Z 軸順序。子物件也可以跨越多欄或多列。

您還可以開啟貼齊功能，如此一來就可以透過貼齊至對齊線，將物件排列得更整齊。貼齊格線可讓您在畫板上拖曳物件，並讓它們貼齊相同容器物件內之其他物件的邊界、基準線 (用於文字物件) 或對齊 (紅色虛線)，如版面配置面板或格線面板中的欄及列分隔線。

如需詳細資訊，請參閱開啟或關閉貼齊。

調整列與欄的大小

當您處於 Grid 版面配置面板的 [格線版面配置模式] 時，格線面板的上方和左側尺規旁會出現鎖定圖示。您可以使用這些鎖定圖示設定格線中的列和欄所用的大小調整類型。您可以設定列的高度值和欄的寬度值。您有三個不同的選項，可調整格線中之列和欄的大小，這些選項又會影響格線內之子物件的排列。這些調整大小的選項如下所示：

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

  注意：
  在 Expression Blend 專案中， 「像素」 指的是與裝置無關的像素或與裝置無關的單位，其與螢幕解析度設為 96 DPI 監視器的像素大小相等。無論監視器大小或螢幕解析度為何，每個單位約為 1/96 英吋。

• 星號調整 　使用星號值 (*)，經由按一下鎖定圖示以設為 [以星號調整大小] (未鎖定位置) 進行設定。依星號調整大小的效果與 HTML 中依百分比調整大小類似。

• 自動調整大小    不定義 [Width] 或 [Height] 屬性，經由按一下鎖定圖示以設為 [自動調整大小] 進行設定。自動調整大小表示格線面板內的物件會隨著父物件的大小改變而調整大小。

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

已在畫板上選取格線分隔線 時，您可以使用 [屬性] 面板，在使用星號調整或固定大小時，選取調整大小選項以及調整 Width 屬性。您也可以在 [屬性] 面板中，設定欄格線分隔線的 MaxWidth 與 MinWidth 屬性。

調整子物件的位置

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

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

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

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

• 水平對齊

  • [左]    錨定至左邊，但是調整大小時向右延伸。

  • [置中]    永遠錨定為水平置中，而不考慮調整大小。

  • [右]    錨定至右邊，但是調整大小時向左延伸。

  • [延展]    調整大小時往水平方向兩邊延伸。

• 垂直對齊

  • [下]    錨定至底部，但是調整大小時向上延伸。

  • [置中]    永遠錨定至垂直置中，而不考慮調整大小。

  • [上] 。錨定至上方，但是調整大小時向下延伸。

  • [延展]    調整大小時往垂直方向兩邊延伸。

• [邊界設定]   [上]、[左]、[右] 以及 [下] 邊界是以像素 (換算為與裝置無關的單位約為 1/96 英吋) 測量的固定值。這些值是在您將子物件拖曳至格線中時設定，而這些值代表從所選物件的邊緣到下一條格線的距離。

調整子物件的大小

有兩種主要的調整大小選項可用於子物件：固定大小或自動調整大小。固定大小的物件會在 [版面配置] 類別中具有特定的寬度與高度值。自動調整大小的物件會將寬度與高度值設為 [Auto]，並且隨著父面板自動調整大小。

• [MinWidth 和 MinHeight]   列或欄內的物件可以調整或縮放到的最小尺寸。

• [MaxWidth 和 MaxHeight]   列或欄內的物件可以調整或縮放到的最大尺寸。如果您不想設定大小上限，可以將此值設為 [無限大]。

• [裁剪內容]   決定父面板是否應裁剪其子物件。

格線分割器

GridSplitter 是格線面板中所使用的一種控制項，使用者可與此控制項互動，在執行階段手動調整格線組件大小。您可在 [資產] 面板中找到 GridSplitter 。

如需有關格線面板、 GridSplitter 控制項，或如何建立自訂版面配置面板的詳細資訊，請參閱 Windows Presentation Foundation (WPF) 之＜.NET Framework 類別庫＞的 System.Windows.Controls 命名空間 一節，或請參閱＜.NET Framework Class Library for Microsoft Silverlight＞(Silverlight 之 .NET Framework 類別庫)的 System.Windows.Controls Namespace (System.Windows.Controls 命名空間) 一節。

另請參閱

工作

新增或移除列或欄
變更列或欄的大小選項

Copyright © 2011 by Microsoft Corporation. All rights reserved.