XAML 程式代碼編輯器

Visual Studio IDE 中的 XAML 程式代碼編輯器 包含建立適用於 Windows 平臺的 WPF 和 UWP 應用程式所需的所有工具，以及 Xamarin.Forms 或 .NET MAUI。 本文概述程式代碼編輯器在開發 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元素的工具提示，它會進一步將其識別為 「Element： Window」 和 「Member： Window」。。

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

• 元素：左側的視窗 可協助您檢視及巡覽至同層級或父元素。

  具體來說，它會顯示一個類似大綱的檢視，可顯示程式代碼的標記結構。 當您從清單中選取時，程式代碼編輯器中的焦點會貼齊包含您所選取專案的程式代碼行。

  

• 成員：右側的視窗 可協助您檢視及巡覽至屬性或子元素。

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

  

中間窗格，程式代碼編輯器

中間窗格是 XAML 程式代碼編輯器的「程式代碼」部分。 它包含您在 IDE 程式代碼編輯器中找到的大部分功能。 我們將探討幾個可協助您開發 XAML 程式代碼的通用 IDE 功能。 我們還會在 IDE 中強調 XAML 獨特的功能。

快速動作

您可以使用 快速動作 來重構、產生或使用單一動作修改程式代碼。

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

方法如下：

1. 將滑鼠停留在 using 語句上，選擇燈泡圖示，然後選擇 從下拉式清單中移除不必要的 Usings。

   

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 支援適用於 WPF、UWP、Xamarin.Forms和 .NET MAUI中的 XAML 開發人員。 在 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 頁面，以及傳統型應用程式 （XAML Islands） 頁面中 主機 UWP XAML 控制件。

XAML 結構視覺化工具

程式代碼編輯器中的結構可視化檢視功能會顯示結構參考線，其為垂直虛線，表示程式代碼中相符的開啟和封閉標記元素。 這些垂直線可讓您更輕鬆地查看邏輯區塊開始和結束的位置。

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

適用於 XAML 的 IntelliCode

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

您可以辨識 IntelliCode 選取項目，因為它們會出現在清單頂端，並以星號顯示在旁。

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

設定

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

XAML 選擇性設定

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

通用文字編輯器選項

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

XAML 特定的文字編輯器選項

下表列出 [選項] 對話框中的設定，可在開發 XAML 型應用程式時增強編輯體驗。 請瀏覽連結的資訊以深入瞭解這些選項，以及如何使用這些選項。

後續步驟

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

另請參閱

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