使用 XAML 設計工具建立 UI

Visual Studio 2012 的 XAML 設計工具提供視覺化介面，協助您設計使用 XAML、WPF 和 Silverlight 應用程式建置的 Windows 市集應用程式。您可以從 [工具箱] 拖曳控制項並在 [屬性] 視窗中設定屬性，藉此建立應用程式的使用者介面。您也可以在 XAML 檢視中直接編輯 XAML。

XAML 設計工具工作區

Visual Studio 中的 XAML 設計工具工作區是由好幾個視覺化介面項目所組成。其中包括畫板、[工具箱]、[裝置] 視窗、[文件大綱] 視窗、[方案總管]、[屬性] 視窗和 XAML 編輯器。若要開啟 XAML 設計工具，請以滑鼠右鍵按一下 [方案總管] 中的 XAML 頁面並選取 [檢視設計工具]。

製作檢視

XAML 設計工具可提供 XAML 檢視和同步處理的 [設計] 檢視來顯示應用程式的呈現 XAML 標記。在 Visual Studio 中開啟 XAML 文件後，您可以使用 [設計] 和 [XAML] 索引標籤，在 [設計] 檢視和 [XAML] 檢視之間切換。在 [設計] 檢視中，含有「畫板」(Artboard) 的視窗就是作用中的視窗，而且能將之做為主要工作介面。您可以透過它加入或繪製項目，然後修改這些項目，以視覺化方式在您的應用程式中設計頁面。如需詳細資訊，請參閱使用 XAML 設計工具中的項目。下圖顯示 [設計] 檢視中的畫板。

您可以使用 [交換窗格] 按鈕，切換哪一個視窗要出現在最上方：畫板或 XAML 編輯器。

畫板可提供下列功能：

• 對齊線
  對齊線是當控制項邊緣對齊時，或文字基線對齊時顯示為紅色虛線的「對齊界限」(Alignment Boundary)。只有在啟用 [貼齊至對齊線] 後，對齊界限才會出現。

• Grid 滑軌
  Grid 滑軌可用來管理 Grid 面板中的列與欄。您可以建立和刪除列與欄，以及調整其相對寬度和高度。出現在畫板左邊的垂直 Grid 滑軌適用於列，而出現在頂端的水平線則適用於欄。

• Grid 提示
  Grid 提示會顯示為 Grid 滑軌上已附加垂直或水平線的三角形。當您拖曳 Grid 提示時，相鄰欄或列的寬度或高度會在您移動滑鼠時更新。

  Grid 提示可用來控制 Grid 的列與欄的寬度和高度。您可以在 Grid 滑軌中按一下，加入新的欄或列。當您針對具有兩個或更多欄或列的 Grid 面板加入新的列或欄時，出現在滑軌外部的迷你工具列可讓您明確地設定寬度和高度。此迷你工具列可讓您設定 Grid 列和欄的固定、星號和自動調整大小選項。

• 調整大小控點
  調整大小控點會出現在選取的控制項上，讓您調整控制項的大小。當您調整控制項的大小時，通常會出現寬度和高度值，協助您調整控制項的大小。如需在 [設計] 檢視中操作控制項的詳細資訊，請參閱使用 XAML 設計工具中的項目。

• 邊界
  邊界代表控制項邊緣與其容器邊緣之間的固定間距。您可以使用 [屬性] 視窗中 [配置] 之下的邊界屬性，設定控制項的邊界。

• 邊界提示
  您可以使用邊界提示來變更項目相對於其配置容器的邊界。當邊界提示呈開啟狀態時，則未設定邊界且邊界提示會顯示不連續的鏈結。若未設定邊界，則在執行階段調整配置容器的大小時，項目的位置維持不變。當邊界提示呈關閉狀態時，邊界提示會顯示不中斷的鏈結，而且在執行階段調整配置容器的大小時，項目會隨著邊界移動 (邊界會保持固定)。

• 項目控點
  您可以利用指標移至項目周圍之藍色方塊的角落時出現在畫板上的項目控點，對項目進行修改。這些控點可讓您旋轉、調整大小、翻轉、移動，或將圓角半徑加入至項目。項目控點的符號因函式而有所不同，並根據指標的確切位置而變更。如果看不到項目控點，請確定已選取項目。

在 [設計] 檢視中，畫面的左下方區域會提供其他畫板命令，如下所示：

這些命令適用於此工具列：

• 縮放
  縮放可讓您調整設計介面的大小。您可以從 12.5% 放大到 800%，或選取 [調整成選取的大小] 和 [調整成全部的大小] 等選項。

• 顯示/隱藏貼齊格線
  顯示或隱藏可顯示格線的貼齊格線。啟用 [貼齊至格線] 或 [貼齊至對齊線] 時都會使用格線。

• 開啟/關閉貼齊至格線
  在畫板上拖曳項目時，若已啟用 [貼齊至格線]，項目就會傾向於對齊最接近的水平和垂直格線。

• 開啟/關閉貼齊至對齊線
  對齊線可幫助您讓控制項彼此對齊。若已啟用 [貼齊至對齊線]，當您將控制項拖曳到其他控制項的相對位置，而部分控制項的邊緣和文字水平或垂直對齊時，對齊界限就會出現。對齊界限會顯示為一條紅色虛線。

在 [XAML] 檢視中，包含 XAML 編輯器的視窗為作用中的視窗，而 XAML 編輯器是您主要的撰寫工具。Extensible Application Markup Language (XAML) 提供宣告式的 XML 架構詞彙來指定應用程式的使用者介面。[XAML] 檢視包括 IntelliSense、自動格式化、語法反白顯示和標記巡覽。下圖顯示 [XAML] 檢視：

• 分割檢視列
  當 XAML 編輯器位於視窗下方時，分割檢視列就會出現在 [XAML] 檢視的頂端。分割檢視列可讓您控制 [設計] 檢視和 [XAML] 檢視的相對大小。您也可以交換檢視的位置 (使用 [交換窗格] 按鈕)，指定要水平或垂直排列檢視，以及是否摺疊任一個檢視。

• 標記縮放
  標記縮放可讓您調整 [XAML] 檢視的大小。您可以從 20% 放大到 400%。

裝置視窗

Visual Studio 的 XAML 設計工具中的 [裝置] 視窗，可讓您在設計階段模擬應用程式的各種檢視、顯示和顯示選項。以下是它看起來的樣子：

以下是 [裝置]視窗中可用的選項：

• 檢視
  指定應用程式的方向和配置。使用 XAML 建置之 Windows 市集應用程式的專案樣板 (格線、分割和空白)，可以偵測和轉送上述檢視。樣板的每一頁都會提供下列檢視：

  • 橫向。全螢幕檢視 (W x H)。這是預設檢視。

  • 貼齊。當應用程式由使用者貼齊至一端時顯示。應用程式會以垂直方式瀏覽所有頁面。在這個檢視中，您的應用程式的寬度為 320 像素。

  • 填滿。當使用者將兩個應用程式貼齊至此端時顯示。在這個檢視中，您的應用程式的寬度會縮小 322 像素。

  • 縱向。全螢幕檢視 (H x W)。在這個檢視中，您的應用程式的寬度和高度值會交換。

  視使用者所設定的檢視而定，有些檢視可能會停用。例如，若將顯示解析度設定為 1280 x 800，則填滿和貼齊都會停用。在某些視覺狀態下，下一節中描述的合約可能無法使用。

• 視覺狀態
  在為了編輯目前檢視而顯示的 ApplicationViewState 視覺狀態群組中，指定目前的狀態。如果在目前的文件中找不到這些狀態，這個選項就會停用 (根據預設，狀態會包含並定義於 Visual Studio 的基本頁面項目樣板中)。

• 顯示
  指定您用於設計應用程式之裝置的顯示解析度。

• 主題
  指定應用程式主題。

• 顯示色彩
  在 [設計] 檢視中開啟和關閉以您的應用程式為主的模擬 Tablet 架構。選取此核取方塊以顯示架構。

• 覆寫縮放比例
  在設計介面中開啟和關閉文件縮放比例的模擬。這可讓您依據一個因子提高縮放百分比。選取此核取方塊以開啟模擬。例如，若縮放百分比為 100%，則設計介面中的文件就會放大為 140%。如果目前的縮放百分比為 180，這個選項就會停用。

• 剪輯成顯示大小
  指定顯示模式。選取此核取方塊，將文件大小剪輯成顯示大小。

文件大綱視窗

XAML 設計工具的 [文件大綱] 視窗可協助您執行下列工作：

• 檢視畫板上所有項目的階層式結構。

• 選取項目以進行修改 (在階層中進行移動、在畫板上進行修改、在 [屬性] 視窗中設定其屬性等)。如需詳細資訊，請參閱使用 XAML 設計工具中的項目。

• 建立和修改做為控制項之項目的樣板。

• 將內容功能表使用於選取的項目。畫板中選取的項目也可以使用相同的功能表。

[文件大綱] 視窗中的可用選項包括：

• 文件大綱
  [文件大綱] 視窗的主要檢視會以樹狀結構顯示文件的階層。您可以使用文件大綱的階層性本質，在各種的詳細層級上檢查文件，以及用單獨或群組方式鎖定和隱藏項目。

• 顯示/隱藏
  顯示或隱藏 [文件大綱] 中的項目所對應的畫板項目。使用 [顯示/隱藏] 按鈕 (在顯示時會出現眼睛符號)，或按 CTRL+H 隱藏項目，而按 SHIFT+CTRL+H 則顯示項目。

• 鎖定/解除鎖定
  鎖定或解除鎖定 [文件大綱] 中的項目所對應的畫板項目。無法修改鎖定的項目。使用 [鎖定/解除鎖定] 按鈕 (在鎖定時會出現掛鎖符號)，或按 CTRL+L 鎖定項目，而按 SHIFT+CTRL+L 則可解除鎖定。

• 將範圍傳回
  位於 [文件大綱] 視窗頂端的這個選項會顯示向上鍵符號，可將文件大綱傳回到前一個範圍。只有您在樣式或樣板的範圍內時，選定範圍才適用。

屬性視窗

[屬性] 視窗可讓您設定控制項的屬性值。以下是它看起來的樣子：

[屬性] 視窗的頂端有各種選項。您可以使用 [名稱] 方塊，變更目前選取之項目的名稱。在左上角，有一個代表目前所選取項目的圖示。若要依分類或依字母順序排列屬性，請按一下 [排列依據] 清單中的 [分類]、[名稱] 或 [來源]。若要查看控制項的事件清單，請按一下 [事件] 按鈕，顯示閃電符號。若要搜尋屬性，請在 [搜尋] 方塊中開始輸入屬性的名稱。在您輸入文字時，[屬性] 視窗會顯示符合搜尋的屬性。有些屬性可讓您藉由選取向下鍵按鈕來設定進階屬性。如需使用屬性和處理事件的詳細資訊，請參閱快速入門：加入控制項和處理事件

每個屬性值的右邊是顯示為方塊符號的「屬性標記」(Property Marker)。屬性標記的外觀可指出屬性是否已套用資料繫結或資源。例如，白色方塊符號表示預設值，黑色方塊符號通常表示已經套用本機資源，而橙色方塊通常表示已經套用資料繫結。按一下屬性標記時，可以巡覽至樣式定義、開啟資料繫結產生器，或開啟資源選擇器。

請參閱

工作

如何建立和套用資源

如何在 XAML 設計工具中繫結資料

概念

使用 XAML 設計工具中的項目

其他資源

How to set a gradient brush on a control

Resource dictionaries

XAML 設計工具 UI 參考