使用 XAML 設計工具中的項目

發行項
02/06/2013

您可以使用 XAML、程式碼或 XAML 設計工具，將項目 (控制項、配置和圖形) 加入至應用程式。本主題說明如何在 XAML 設計工具中處理項目。

將項目加入至配置

「配置」(Layout) 是調整大小以及在 UI 中定位項目的處理序。若要定位視覺化項目，您必須將它們放在配置 Panel 中。Panel 有一個子屬性，而該子屬性是 FrameworkElement 型別的集合。您可以使用各種 Panel 子項目 (如 Canvas、StackPanel 和 Grid) 做為配置容器，並可讓您在頁面上定位和排列項目。

根據預設，在使用 JavaScript 針對 Windows 建置的 Windows 市集應用程式中，Grid 面板可做為頁面文件內的最上層配置容器。您可以在最上層頁面配置中加入配置面板、控制項或其他項目。

若要將項目加入至配置

在 Visual Studio 專案中，於 [文件大綱] 視窗中執行下列其中一項作業：
- 按兩下工具箱中的項目 (或選取 [工具箱] 中的項目並按 Enter 鍵)。
- 從 [工具箱] 將項目拖曳至畫板。
- 在 [工具箱] 中，選取其中一個繪圖工具 (例如，橢圓形或矩形)，然後在使用中的面板中繪製項目。

變更項目的圖層順序

當 XAML 設計工具的畫板上有兩個項目時，系統會依照圖層順序將其中一個項目顯示在另一個項目的前面。在 [文件大綱] 視窗中項目清單的底部是最前面的項目 (但已設定項目的 [ZIndex] 屬性時除外)。當您在文件或配置容器中插入項目時，在使用中容器項目中，該項目就會自動放置在其他項目的前面。若要變更項目的順序，您可以使用 [順序] 命令，或在 [文件大綱] 視窗中拖曳物件樹狀結構中的項目。

若要變更圖層順序

執行下列任一步驟：
- 在 [文件大綱] 視窗中，向上或向下拖曳項目，以建立想要的圖層順序。
- 以滑鼠右鍵按一下 [文件大綱] 視窗或畫板中您要變更圖層順序的項目，指向 [順序]，然後按下列其中一項：
  - [提到最上層] 可將項目提到順序的最上層。
  - [上移一層] 可將項目在順序中上移一層。
  - [下移一層] 可將項目在順序中下移一層。
  - [移到最下層] 可將項目移到順序的最下層。
- 變更 [屬性] 視窗中 [配置] 區段下的 [ZIndex] 屬性。若為重疊的項目，[ZIndex] 屬性的優先順序高於 [文件大綱] 視窗中顯示的項目順序。當項目重疊時，[ZIndex] 值較低的項目會出現在前面。

變更項目的對齊方式

您可以使用功能表命令或將項目拖曳至對齊線，對齊畫板中的項目。

「對齊線」(Snapline) 是視覺提示，可協助您以相對於應用程式中其他項目的方式對齊項目。

若要使用功能表命令對齊兩個或更多項目

選取您要對齊的項目選取項目時，您可以按住 Ctrl 鍵來選取多個項目。
在 [屬性] 視窗的 [配置] 區段中的 [HorizontalAlignment] 下選取下列其中一個屬性：[Left]、[Center]、[Right] 或 [Stretch]。
在 [屬性] 視窗的 [配置] 區段中的 [VerticalAlignment] 下選取下列其中一個屬性：[Top]、[Center]、[Bottom] 或 [Stretch]。

若要使用對齊線對齊兩個或更多項目

在 XAML 設計工具中，如果配置至少包含兩個項目，請拖曳其中一個項目或調整其大小，讓邊緣對齊另一個項目。

當邊緣對齊時，會出現「對齊界限」(Alignment Boundary) 表示已經對齊。對齊界限是一條紅色虛線。只有在啟用 [貼齊至對齊線] 後，對齊界限才會出現。如需顯示對齊界限的畫板圖例，請參閱使用 XAML 設計工具建立 UI。

變更項目的邊界

XAML 設計工具中的邊界決定畫板上項目周圍的空白間距。例如，邊界指定項目的外緣與該項目所在 Grid 面板的界限之間的間距。邊界也可指定 StackPanel 中內含項目之間的間距。

若要變更項目的邊界

選取要變更邊界的項目。
在 [屬性] 視窗的 [配置] 之下，變更 [Margin] 的屬性 ([Top]、[Left]、[Right]、[Bottom]) 的值 (以像素為單位，或與裝置無關的單位，約為 1/96 英吋)。

若要變更畫板中項目的邊界

若要變更項目相對於其配置容器的邊界，當項目位於配置容器並已選取時，按一下畫板上該項目周圍的「邊界提示」(Margin Adorner)。如需顯示邊界提示的圖例，請參閱使用 XAML 設計工具建立 UI。

如果邊界提示呈開啟狀態 (不論是垂直或水平)，則表示尚未設定該邊界。如果邊界提示呈關閉狀態，則表示已設定該邊界。

當您開啟邊界提示且未設定相反側的邊界時，相反側的邊界會根據畫板中的項目位置設定為正確的值。若為相反側的邊界 (如 [Left] 和 [Right] 邊界)，至少一定會設定其中一個屬性。

重要

放在某些配置容器 (如 Canvas) 中的項目沒有邊界提示。根據 StackPanel 的方向而定，放在 StackPanel 內的項目具有左右邊界或上下邊界的邊界提示。

群組和取消群組項目

在 XAML 設計工具中群組兩個以上的項目，可以建立新配置容器並將這些項目放在該容器內。將兩個以上的項目一起放在配置容器中，可讓您輕鬆地選取、移動及轉換群組，就如同將該群組中的所有項目都當成一個項目。群組對於識別彼此相關的項目也很有幫助，例如組成導覽項目的按鈕。取消項目群組時，只要刪除內含項目的配置容器即可。

若要將項目群組到新的配置容器中

選取您要群組的項目 (若要選取多個項目，請按住 CTRL 鍵並按一下這些項目)。
以滑鼠右鍵按一下選取的項目，指向 [群組置入]，然後按一下您要置入群組之配置容器的類型。

提示

如果您選取 Viewbox、T:Windows.UI.Xaml.Controls.Border 或 ScrollViewer 來群組您的項目，這些項目會放在 Viewbox、Border 或 ScrollViewer 內的新 Grid 面板中。如果您將這其中一個配置容器中的項目取消群組，則只會刪除 Viewbox、Border 或 ScrollViewer，並且將 Grid 面板保留下來。若要刪除 Grid 面板，請再次取消項目的群組。

若要取消項目群組和刪除配置

以滑鼠右鍵按一下您要取消群組的群組，然後按一下 [取消群組]。

您也能以滑鼠右鍵按一下 [文件大綱] 中選取的項目，然後按一下 [群組置入] 或 [取消群組] 來群組或取消群組項目。

重設項目配置

您可以使用 [重設配置] 命令，還原項目的特定配置屬性的預設值。您可以使用此命令，個別或全部重設項目的邊界、對齊方式、寬度、高度和大小。

若要重設項目配置

在 [文件大綱] 視窗或畫板中以滑鼠右鍵按一下項目，選取 [重設配置]，然後按一下您要重設的屬性 (或按一下 [全部] 重設項目的所有配置屬性)。

請參閱

概念

使用 XAML 設計工具建立 UI

共用方式為