XAML 程式碼編輯器

Visual Studio IDE 中的 XAML 程式碼編輯器包含要為 Windows 平台和 Xamarin.Forms 建立 WPF 和 UWP 應用程式所需的所有工具。 本文概述程式碼編輯器在開發 XAML 型應用程式時所扮演的角色，以及 Visual Studio 2019 中 XAML 程式碼編輯器特有的功能。

首先，讓我們看看具有已開啟 WPF 專案的 IDE (整合式開發環境)。 下圖顯示您將與 XAML 程式碼編輯器一起使用的數個重要 IDE 工具。

從下圖左下角順時針方向來看，重要 IDE 工具如下所示：

• [XAML 程式碼編輯器] 視窗，這是本文的主題，您可以在其中建立和編輯程式碼。
• [XAML 設計工具] 視窗，您可以在其中設計 UI。
• [工具箱] 可停駐視窗，您可以在其中將控制項新增至 UI。
• [偵錯] 按鈕，您可以在其中執行程式碼並對程式碼進行偵錯。
  (您也可以在使用 XAML 熱重新載入進行偵錯時即時編輯程式碼)。
• [方案總管] 視窗，您可以在其中管理檔案、專案和方案。
• [屬性] 視窗，您可以在其中變更 UI 的外觀，以及 UI 控制項的運作方式。

若要繼續，讓我們深入了解 XAML 程式碼編輯器。

XAML 程式碼編輯器 UI

雖然 XAML 應用程式的程式碼編輯器視窗會共用一些同樣出現在標準 IDE 中的 UI (使用者介面) 元素，但該視窗也有一些可讓您更容易開發 XAML 應用程式的獨特功能。

以下是 XAML 程式碼編輯器視窗本身的外觀。

接下來，讓我們看看程式碼編輯器中每個 UI 元素的功能。

第一個資料列

在 XAML 程式碼視窗頂端的第一列中，左側有 [設計] 索引標籤、[交換窗格] 按鈕、[XAML] 索引標籤和 [快顯 XAML] 按鈕。

其運作方式如下：

• [設計] 索引標籤會將焦點從 XAML 程式碼編輯器變更至 XAML 設計工具。
• [交換窗格] 按鈕會反轉 IDE 中 XAML 設計工具和 XAML 程式碼編輯器的位置。
• [XAML] 索引標籤會將焦點變更回 XAML 程式碼編輯器。
• [快顯 XAML] 按鈕會在 IDE 之外另外建立一個 XAML 程式碼編輯器視窗。

繼續看下去，右側則有 [垂直分割] 按鈕、[水平分割] 按鈕和 [摺疊窗格] 按鈕。

其運作方式如下：

• [垂直分割] 按鈕會將 IDE 中 XAML 設計工具和 XAML 程式碼編輯器的位置從水平對齊變更為垂直對齊。
• [水平分割] 按鈕會將 IDE 中 XAML 設計工具和 XAML 程式碼編輯器的位置從垂直對齊變更為水平對齊。
• [摺疊窗格] 按鈕可讓您摺疊底部窗格中的內容，無論該窗格是程式碼編輯器還是設計工具。 (若要還原底部窗格，請再次選擇相同按鈕，此按鈕的名稱現在會是 [展開窗格] 按鈕。)

第二列

在 XAML 程式碼視窗頂端的第二列中，有兩個 [視窗] 下拉式清單。 不過，如果您檢視這些 UI 元素的工具提示，其會進一步將這兩個清單識別為 [元素: 視窗] 和 [成員: 視窗]。

[視窗] 下拉式清單有不同的功能，如下所示：

• 左側的 [元素: 視窗] 可協助您檢視和瀏覽至同層級或父元素。

  具體來說，其會顯示類似大綱的檢視，以顯示程式碼的標籤結構。 當您從清單中進行選取時，您在程式碼編輯器中的焦點會貼齊包含您所選元素的程式碼。

  

• 右側的 [成員: 視窗] 可協助您檢視和瀏覽至屬性或子元素。

  具體而言，其會顯示程式碼中的屬性清單。 當您從清單中進行選取時，您在程式碼編輯器中的焦點會貼齊包含您所選屬性的程式碼。

  

中間窗格，程式碼編輯器

中間窗格是 XAML 程式碼編輯器的「程式碼」部分。 其包含您會在 IDE 程式碼編輯器中找到的大部分功能。 我們會探討幾個可協助您開發 XAML 程式碼的通用 IDE 功能。 我們也會點出 IDE 中的 XAML 獨有功能。

快速動作

您可以使用 [快速動作]，透過單一動作重構、產生或修改程式碼。

例如，您可以使用 [快速動作] 來執行的其中一個實用工作，就是在 [MainWindow.xaml.cs] 索引標籤中從 C# 程式碼移除不必要的 Using。

方法如下：

1. 將滑鼠停留在 Using 陳述式上，選擇燈泡圖示，然後從下拉式清單中選擇 [移除不必要的 Using]。

   

2. 選擇您要修正 [文件]、[專案] 還是 [方案] 中的所有出現項目。

3. 檢視 [預覽] 對話方塊，然後選擇 [套用]。

您也可以從功能表列存取此功能。 若要這樣做，請選擇 [編輯]>[IntelliSense]>[移除和排序 Using]。

如需 Using 設定的詳細資訊，請參閱排序 Using 頁面。 如需 IntelliSense 的詳細資訊，請參閱 Visual Studio 中的 IntelliSense 頁面。 如需開發人員使用 [快速動作] 的一些典型方式的詳細資訊，請參閱常用的快速動作頁面。

變更追蹤

您可利用左邊界的色彩，追蹤在檔案中所做的變更。 以下是色彩與所採取動作的關聯：

• 開啟檔案後所做的未儲存變更，將在左邊界以黃色橫條表示 (稱為選取範圍邊界)。

  

• 儲存變更後 (但在關閉檔案前)，橫條會變成綠色。

  

若要關閉或開啟這項功能，請在 [文字編輯器] 設定中 ([工具]>[選項]>[文字編輯器])，變更 [追蹤修訂] 選項。

如需變更追蹤 (用來包含會出現在程式碼字串底下的波浪線) 的詳細資訊，請參閱 Visual Studio 程式碼編輯器的功能頁面的編輯器功能一節。

以滑鼠右鍵按一下捷徑功能表

當您在 XAML 程式碼編輯器中編輯程式碼時，有幾個可使用滑鼠右鍵的捷徑功能表來存取的功能。 這些功能大多可以在 Visual Studio IDE 中通用，但有些則是和 [設計] 視窗一起使用程式碼編輯器時特有的功能。

以下是每項功能的作用，以及其為何實用：

• 檢視程式碼 - 開啟程式設計語言的程式碼視窗，一般會成為預設檢視旁的索引標籤，內有 [設計] 視窗和 XAML 程式碼編輯器。
• 檢視表設計工具 - 開啟預設檢視，內有 [設計] 視窗和 XAML 程式碼編輯器。 (如果您已在預設檢視中，則不會執行任何動作。)
• 快速動作與重構 - 透過單一動作重構、產生或修改程式碼。 當您將滑鼠停留在程式碼上方時，您會在有快速動作或重構可供使用時看到燈泡圖示。
  另請參閱：快速動作和重構程式碼。
• 重新命名... - 僅重新命名命名空間。 如果沒有可重新命名的命名空間，則會收到錯誤訊息，內容指出「只能重新命名命名空間前置詞」。
• 移除和排序命名空間 - 移除未使用的命名空間，然後為留下的命名空間排序。
• 瞄核定義 - 預覽某個類型的定義，而不離開您目前在編輯器中的位置。
  另請參閱：瞄核定義和使用瞄核定義來檢視和編輯程式碼。
• 移至定義 - 瀏覽至某個類型或成員的來源，並在新的索引標籤中開啟結果。
  另請參閱：移至定義。
• 範圍陳述式... - 使用會新增到所選程式碼區塊周圍的範圍陳述式程式碼片段。
  另請參閱：擴充程式碼片段和範圍陳述式程式碼片段。
• 插入程式碼片段 - 在游標位置插入程式碼片段。
• 剪下 - 不言自明
• 複製 - 不言自明
• 貼上 - 不言自明
• 大綱 - 展開和摺疊程式碼區段。
  另請參閱：大綱。
• 原始檔控制 - 檢視開放原始碼存放庫的程式碼貢獻歷程記錄。

中間窗格，捲軸

捲軸不只能捲動程式碼。 您也可以使用捲軸來開啟另一個程式碼編輯器窗格。 此外，您還可以使用捲軸，透過為程式碼新增註釋，或透過使用不同的顯示模式，協助您更有效率地撰寫程式碼。

分割程式碼視窗

在程式碼編輯器的捲軸右上方有 [分割] 按鈕。 當您選擇此按鈕，便可以開啟另一個程式碼編輯器窗格。 這非常有用，因為這些窗格彼此獨立運作，所以您可以使用這些窗格在不同位置處理程式碼。

如需如何分割編輯器視窗的詳細資訊，請參閱管理編輯器視窗頁面。

使用註釋或對應模式

您也可以變更捲軸的外觀及其包含的其他功能。 例如，許多人喜歡在捲軸中包含註釋，以提供程式碼變更、中斷點、書簽、錯誤和插入號位置等視覺提示。

其他人則喜歡使用對應模式，以在捲軸上以縮圖方式顯示程式碼。 檔案中有許多程式碼的開發人員可能會發現對應模式可以比預設捲軸更有效率地追蹤到程式碼。

如需如何變更捲軸預設設定的詳細資訊，請參閱自訂捲軸頁面。

XAML 特定功能

下列功能大多可以在 Visual Studio IDE 中通用，但其中有些功能已新增維度，而能讓 XAML 開發人員更容易地撰寫程式碼。

XAML 程式碼片段

程式碼片段是可重複使用的小型程式碼區塊，您可以使用滑鼠右鍵的捷徑功能表命令 [插入程式碼片段] 或鍵盤快速鍵組合 (Ctrl+K、Ctrl+X) 將其插入到程式碼檔案中。 我們已增強 IntelliSense，使其支援顯示 XAML 程式碼片段，這個功能同時適用於內建程式碼片段以及您手動新增的任何自訂程式碼片段。 一些現成可用的 XAML 程式碼片段包括 #region、Column definition、Row definition、Setter 和 Tag。

如需詳細資訊，請參閱程式碼片段和 C# 程式碼片段頁面。

XAML #region 支援

在 Visual Studio 中，#region 支援 XAML 開發人員在 WPF、UWP 和 Xamarin.Forms 使用。 在 Visual Studio 2019 中，我們會繼續以漸進方式改進 #region 支援。 例如，在 16.4 版和更新版本中，當您開始輸入 <! 時，便會顯示 #region 選項。

當您想要以群組方式選取也想要展開或摺疊的程式碼時，便可以使用區域。

    <!--#region NameOfRegion-->
    Your code is here
    <!--#endregion-->

如需區域的詳細資訊，請參閱 #region (C# 參考) 頁面。 如需展開和摺疊程式碼區段的詳細資訊，請參閱大綱頁面。

XAML 註解

開發人員通常偏好使用註解來記載其程式碼。 您可以透過下列方式，將註解新增至 MainWindow.xaml 索引標籤中的 XAML 程式碼：

• 在註解前面輸入 <!--，然後在註解後面新增 -->。

• 輸入 <!，然後從選項清單中選擇 !--。

  

• 選取您想要以註解括住的程式碼，然後從 IDE 中的工具列選擇 [註解] 按鈕。 若要反轉動作，請選擇 [取消註解] 按鈕。

  

• 選取您想要以註解括住的程式碼，然後按 Ctrl+K、Ctrl+C。 若要將選取的程式碼取消註解，請按 Ctrl+K、Ctrl+U。

如需如何在 MainWindow.xaml.cs 索引標籤的 C# 程式碼中使用註解的詳細資訊，請參閱文件註解頁面。

XAML 燈泡

出現在 XAML 程式碼中的燈泡圖示是可用來重構、產生或修改程式碼的快速動作的一部分。

以下有一些範例說明燈泡如何為 XAML 程式碼撰寫體驗帶來好處：

• 移除不必要的命名空間。 在 XAML 程式碼編輯器中，不必要的命名空間會顯示為灰色文字。 如果您將游標暫留在不必要的 Using 上，燈泡就會出現。 當您從下拉式清單中選擇 [移除不必要的命名空間] 選項時，您會看到所能移除內容的預覽。

  

• 重新命名命名空間。 此功能可在您醒目提示命名空間後，從滑鼠右鍵的捷徑功能表取得，其可讓您輕鬆地一次變更設定的多個執行個體。 您也可以使用功能表列、[編輯]>[重構]>[重新命名]，或在按 Ctrl+R 後再次按 Ctrl+R，以存取此功能。

  

  如需詳細資訊，請參閱重新命名程式碼符號重構頁面。

UWP 的條件式 XAML

條件式 XAML 可讓您在 XAML 標記中使用 ApiInformation.IsApiContractPresent 方法。 這可讓您在標記中根據 API 是否存在來設定屬性和具現化物件，而不必使用程式碼後置。

如需詳細資訊，請參閱條件式 XAML 頁面，以及在傳統型應用程式中裝載 UWP XAML 控制項 (XAML Islands) 頁面。

XAML 結構視覺化檢視

程式碼編輯器中的結構視覺化檢視功能會顯示結構輔助線，這些輔助線是垂直虛線，用來指出程式碼中相符的開啟和封閉標籤元素。 這些垂直線可讓您更輕鬆地查看邏輯區塊的開始和結束位置。

如需詳細資訊，請參閱瀏覽程式碼頁面。

適用於 XAML 的 IntelliCode

當您將 XAML 標籤新增至程式碼時，一般會從左角括弧 < 開始。 當您輸入該角括弧時，便會出現 IntelliCode 功能表，其中列出數個較受歡迎的 XAML 標籤。 選擇您想要的標籤即可將其快速新增至程式碼。

您可以辨識 IntelliCode 選取項目，因為其會出現在清單頂端並加上星號。

如需詳細資訊，請參閱 IntelliCode 概觀頁面。

設定

如需 Visual Studio IDE 中「所有」設定的詳細資訊，請參閱程式碼編輯器的功能頁面。

XAML 選擇性設定

您可以使用 [選項] 對話方塊來變更 XAML 程式碼編輯器的預設設定。 若要檢視設定，請選擇 [工具]>[選項]>[文字編輯器]>[XAML]。

注意

您也可以使用鍵盤快速鍵來存取 [選項] 對話方塊。 方法如下：按 Ctrl+Q 搜尋 IDE、輸入選項，然後按 Enter 鍵。 接下來，按 Ctrl+E 來搜尋 [選項] 對話方塊、輸入文字編輯器、按 Enter 鍵、輸入 XAML，然後按 Enter 鍵。

如需鍵盤快速鍵的詳細資訊，請參閱 Visual Studio 的快速鍵秘訣頁面。

通用文字編輯器選項

在 XAML 的 [選項] 對話方塊中，下列前三個項目通用於 Visual Studio IDE 所支援的所有程式設計語言。 請瀏覽下表中的連結資訊，以深入了解這些選項及其使用方式。

名稱	其他資訊
一般	[選項] 對話方塊：[文字編輯器] > [所有語言]
捲軸	[選項]、[文字編輯器]、[所有語言]、[捲軸]
索引標籤	選項、文字編輯器、所有語言、定位點

XAML 特定的文字編輯器選項

下表列出 [選項] 對話方塊中可讓您在開發 XAML 型應用程式時獲得強化編輯體驗的設定。 請瀏覽連結資訊，以深入了解這些選項及其使用方式。

名稱	其他資訊
格式設定	選項、文字編輯器、XAML、格式
其他	[選項]、[文字編輯器]、[XAML]、[其他]

提示

[其他] 區段中的 [事件處理常式方法名稱首字大寫] 設定對 XAML 開發人員特別有用。 此設定預設為 [關閉]，因為它是新設定，但建議您將其設定為 [開啟]，以在程式碼中支援適當的大小寫。

下一步

若要深入了解如何在偵錯模式中執行應用程式時即時編輯程式碼，請參閱 XAML 熱重新載入頁面。

另請參閱

• Visual Studio 程式碼編輯器功能
• UWP 應用程式中的 XAML
• Xamarin.Forms 應用程式中的 XAML