使用 XAML 設計工具建立 UI
Visual Studio 2013 中的 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 設計工具的 [設計] 檢視](images/hh921077.xaml_editor_design_view(zh-tw,vs.120).png "XAML 設計工具的 [設計] 檢視")
您可以使用 [交換窗格] 按鈕，切換哪一個視窗要出現在最上方：畫板或 XAML 編輯器。
畫板可提供下列功能：
對齊線
對齊線是當控制項邊緣對齊時，或文字基線對齊時顯示為紅色虛線的「對齊界限」(Alignment Boundary)。 只有在啟用 [貼齊至對齊線] 後，對齊界限才會出現。Grid 滑軌
Grid 滑軌可用來管理 Grid 面板中的資料列和資料行。 您可以建立和刪除列與欄，以及調整其相對寬度和高度。 出現在畫板左邊的垂直 Grid 滑軌適用於列，而出現在頂端的水平線則適用於欄。Grid 提示
Grid 提示會顯示為 Grid 滑軌上已附加垂直或水平線的三角形。 當您拖曳 Grid 提示時，相鄰欄或列的寬度或高度會在您移動滑鼠時更新。Grid 提示可用來控制 Grid 的列與欄的寬度和高度。 您可以在 Grid 滑軌中按一下，加入新的欄或列。 當您針對具有兩個或更多欄或列的 Grid 面板加入新的列或欄時，出現在滑軌外部的迷你工具列可讓您明確地設定寬度和高度。 此迷你工具列可讓您設定 Grid 列和欄的固定、星號和自動調整大小選項。
調整大小控點
調整大小控點會出現在選取的控制項上，讓您調整控制項的大小。 當您調整控制項的大小時，通常會出現寬度和高度值，協助您調整控制項的大小。 如需在 [設計] 檢視中操作控制項的詳細資訊，請參閱使用 XAML 設計工具中的項目。邊界
邊界代表控制項邊緣與其容器邊緣之間的固定間距。 您可以使用 [屬性] 視窗中 [版面配置] 底下的 Margin 屬性設定控制項的邊界。邊界提示
您可以使用邊界提示來變更項目相對於其配置容器的邊界。 當邊界提示呈開啟狀態時，則未設定邊界且邊界提示會顯示不連續的鏈結。 若未設定邊界，則在執行階段調整配置容器的大小時，項目的位置維持不變。 當邊界提示呈關閉狀態時，邊界提示會顯示不中斷的鏈結，而且在執行階段調整配置容器的大小時，項目會隨著邊界移動 (邊界會保持固定)。項目控點
您可以利用指標移至項目周圍之藍色方塊的角落時出現在畫板上的項目控點，對項目進行修改。 這些控點可讓您旋轉、調整大小、翻轉、移動，或將圓角半徑加入至項目。 項目控點的符號因函式而有所不同，並根據指標的確切位置而變更。 如果看不到項目控點，請確定已選取項目。
在 [設計] 檢視中，畫面的左下方區域會提供其他畫板命令，如下所示：
.png "設計檢視命令")
這些命令適用於此工具列：
縮放
縮放可讓您調整設計介面的大小。 您可以從 12.5% 放大到 800%，或選取 [調整成選取的大小] 和 [調整成全部的大小] 等選項。顯示/隱藏貼齊格線
顯示或隱藏可顯示格線的貼齊格線。 啟用 [貼齊至格線] 或 [貼齊至對齊線] 時都會使用格線。開啟/關閉貼齊至格線
在畫板上拖曳項目時，若已啟用 [貼齊至格線]，項目就會傾向於對齊最接近的水平和垂直格線。開啟/關閉貼齊至對齊線
對齊線可幫助您讓控制項彼此對齊。 若已啟用 [貼齊至對齊線]，當您將控制項拖曳到其他控制項的相對位置，而部分控制項的邊緣和文字水平或垂直對齊時，對齊界限就會出現。 對齊界限會顯示為一條紅色虛線。
在 [XAML] 檢視中，包含 XAML 編輯器的視窗為作用中的視窗，而 XAML 編輯器是您主要的撰寫工具。 Extensible Application Markup Language (XAML) 提供宣告式的 XML 架構詞彙來指定應用程式的使用者介面。 [XAML] 檢視包括 IntelliSense、自動格式化、語法反白顯示和標記巡覽。 下圖顯示 [XAML] 檢視：
![[XAML] 檢視](images/hh921077.xaml_editor(zh-tw,vs.120).png "[XAML] 檢視")
分割檢視列
當 XAML 編輯器位於視窗下方時，分割檢視列就會出現在 [XAML] 檢視的頂端。 分割檢視列可讓您控制 [設計] 檢視和 [XAML] 檢視的相對大小。 您也可以交換檢視的位置 (使用 [交換窗格] 按鈕)，指定要水平或垂直排列檢視，以及是否摺疊任一個檢視。標記縮放
標記縮放可讓您調整 [XAML] 檢視的大小。 您可以從 20% 放大到 400%。
裝置視窗
Visual Studio 的 XAML 設計工具中的 [裝置] 視窗，可讓您在設計階段模擬應用程式的各種檢視、顯示和顯示選項。 當您使用 XAML 設計工具時，可以從 [設計] 功能表存取 [裝置] 視窗。 以下是它看起來的樣子：
![[裝置] 視窗](images/hh921077.xaml_editor_device_panel(zh-tw,vs.120).png "[裝置] 視窗")
以下是 [裝置]視窗中可用的選項：
顯示
為應用程式指定不同的顯示大小和解析度。方向
為應用程式指定不同的方向：[橫向] 或 [縱向]。邊緣
為應用程式指定不同的邊緣對齊方式：[兩者]、[左]、[右] 或 [無]。高對比
根據選取的對比設定，預覽應用程式。 當您將這個設定設為 [預設] 以外的值，就會覆寫 App.xaml 中設定的 RequestedTheme 屬性。覆寫縮放比例
在設計介面中開啟和關閉文件縮放比例的模擬。 這可讓您依據一個因子提高縮放百分比。 選取此核取方塊以開啟模擬。 例如，若縮放百分比為 100%，則設計介面中的文件就會放大為 140%。 如果目前的縮放百分比為 180，這個選項就會停用。最小寬度
指定最小寬度設定。 最小寬度可以在 App.xaml 中變更。主題
指定應用程式主題。顯示色彩
在 [設計] 檢視中開啟和關閉以您的應用程式為主的模擬 Tablet 架構。 選取此核取方塊以顯示架構。剪輯成顯示大小
指定顯示模式。 選取此核取方塊，將文件大小剪輯成顯示大小。
文件大綱視窗
XAML 設計工具的 [文件大綱] 視窗可協助您執行下列工作：
檢視畫板上所有項目的階層式結構。
選取項目以進行修改 (在階層中進行移動、在畫板上進行修改、在 [屬性] 視窗中設定其屬性等)。 如需詳細資訊，請參閱使用 XAML 設計工具中的項目。
建立和修改做為控制項之項目的樣板。
將內容功能表使用於選取的項目。 畫板中選取的項目也可以使用相同的功能表。
.png "文件大綱視窗")
[文件大綱] 視窗中的可用選項包括：
文件大綱
[文件大綱] 視窗的主要檢視會以樹狀結構顯示文件的階層。 您可以使用文件大綱的階層性本質，在各種的詳細層級上檢查文件，以及用單獨或群組方式鎖定和隱藏項目。顯示/隱藏
顯示或隱藏 [文件大綱] 中的項目所對應的畫板項目。 使用 [顯示/隱藏] 按鈕 (在顯示時會出現眼睛符號)，或按 CTRL+H 隱藏項目，而按 SHIFT+CTRL+H 則顯示項目。鎖定/解除鎖定
鎖定或解除鎖定 [文件大綱] 中的項目所對應的畫板項目。 無法修改鎖定的項目。 使用 [鎖定/解除鎖定] 按鈕 (在鎖定時會出現掛鎖符號)，或按 CTRL+L 鎖定項目，而按 SHIFT+CTRL+L 則可解除鎖定。將範圍傳回
位於 [文件大綱] 視窗頂端的這個選項會顯示向上鍵符號，可將文件大綱傳回到前一個範圍。 只有您在樣式或樣板的範圍內時，選定範圍才適用。
屬性視窗
[屬性] 視窗可讓您設定控制項的屬性值。 以下是它看起來的樣子：
.png "屬性視窗")
[屬性] 視窗的頂端有各種選項。 您可以使用 [名稱] 方塊，變更目前選取之項目的名稱。 在左上角，有一個代表目前所選取項目的圖示。 若要依分類或依字母順序排列屬性，請按一下 [排列依據] 清單中的 [分類]、[名稱] 或 [來源]。 若要查看控制項的事件清單，請按一下 [事件] 按鈕，顯示閃電符號。 若要搜尋屬性，請在 [搜尋] 方塊中開始輸入屬性的名稱。 在您輸入文字時，[屬性] 視窗會顯示符合搜尋的屬性。 有些屬性可讓您藉由選取向下鍵按鈕來設定進階屬性。 如需使用屬性和處理事件的詳細資訊，請參閱快速入門：加入控制項和處理事件
每個屬性值的右邊是顯示為方塊符號的「屬性標記」(Property Marker)。 屬性標記的外觀可指出屬性是否已套用資料繫結或資源。 例如，白色方塊符號表示預設值，黑色方塊符號通常表示已經套用本機資源，而橙色方塊通常表示已經套用資料繫結。 按一下屬性標記時，可以巡覽至樣式定義、開啟資料繫結產生器，或開啟資源選擇器。