WinUI 3 的 XAML 執行時設計工具

Visual Studio 包含一組執行時工具，讓你能在應用程式執行時設計、迭代並檢查 WinUI 3 XAML。 將它們結合使用，能提供快速的編輯-重新載入-檢查迴圈，顯示真實的使用者介面——真實樣式、真實資料範本、真實動畫——而非靜態的近似。

本文所述的執行時工具無論是否有設計者都非常有價值。 本文將逐步介紹工作流程。

你會用什麼

Prerequisites

• Visual Studio 2022 版本 17.0 或更新版本（包含 XAML 熱重新載入 與 Live Visual Tree）。
• 一個使用 Windows 應用程式 SDK 的 WinUI 3 專案。 請參考 「建立並執行 WinUI 3 專案 」來建立一個。
• 你的專案應該針對 .NET 6 或更新版本（C#）或使用 C++/WinRT。

步驟 1：在除錯器下啟動你的應用程式

按 F5 （或 除錯>開始除錯）。 當除錯器連接時，XAML 熱重新載入 會自動啟動。

XAML 熱重新載入 工具列會出現在應用程式內的覆蓋層上。 如果你沒看到，請確認該設定是否啟用：

1. 請前往工具>選項>除錯>XAML 熱重新載入。
2. 確認已勾選啟用 XAML 熱重新載入。

步驟二：編輯 XAML，立即看到變更

應用程式運行時，切換到編輯器中任一 .xaml 檔案並做出變更——例如更換 Background 顏色或新增 Button. 執行中的應用程式會在一兩秒內更新，且不需要重啟。

熱重新載入 能做什麼、不能做什麼

熱重新載入 處理大多數常見的剪輯：

• 新增、移除或重新排序元素
• 變更屬性值（顏色、邊界、文字、大小）
• 新增或修改樣式與資源字典
• 變更資料範本內容

有些變更需要重新開始：

• 新增類別、程式碼後置事件處理常式或 x:Class 變更
• 修改 App.xaml 合併字典（有時）
• 變更參照新屬性的 x:Bind 運算式

當 熱重新載入 無法套用變更時，工具列會顯示通知。 只要重新啟動應用程式就能接收那些變更。

欲了解更多資訊，請參閱 XAML 熱重新載入。

步驟 3：檢查視覺樹與屬性

開啟 即時視覺樹 視窗（Debug>Windows>即時視覺樹）。 這個視窗會顯示你執行中的應用程式 UI 樹中每個元素，並依父子關係組織。

以視覺方式選取元素

1. 在 Live Visual Tree 工具列中，啟用 在執行中的應用程式中選取元素（十字準星按鈕）。
2. 點擊你執行中的應用程式中的任何元素——樹狀結構會導向該元素， Live Property Explorer 會顯示它的屬性。

這在執行階段相當於點選設計介面上的某個元素，但不同的是，它精確反映你的應用程式實際轉譯出的內容，包括以程式碼動態建立的元素。

執行時編輯屬性

在 Live Property Explorer 中，你可以即時更改房產價值。 例如：

• 變更一個 Margin 以調整間距，並立即查看效果。
• 將 Visibility 設為 Collapsed，以測試元素隱藏時會發生什麼情況。
• 調整 Width 或 Height 測試響應式版面。

這些執行時的編輯不會被儲存回你的 XAML 檔案——它們是用來做實驗的。 找到喜歡的數值後，輸入.xaml檔案（熱重新載入 會自動選取並永久設定）。

步驟 4：使用 XAML Live 預覽

XAML Live Preview 會將你正在執行的應用程式渲染到一個 Visual Studio 分頁中，讓你可以同時查看應用程式和 XAML 原始碼，無需切換視窗。

若要開啟：Debug>Windows>。

這在單螢幕配置中尤其有用，因為在應用程式和 Visual Studio 之間使用 Alt+Tab 切換很不方便。

欲了解更多資訊，請參閱 XAML Live 預覽版。

推薦：建立 UI 遊樂場頁面

在你的專案中建立一個專門的 遊樂場頁面 ——這個頁面的唯一目的是讓你嘗試控制項、樣式和版面配置。 這讓你擁有一個隨時準備視覺迭代的草稿本，且與上述執行時工具搭配得特別好。

搭建遊樂場

1. 在 方案總管 右鍵點擊你的專案，選擇新增>項目>空白頁（WinUI 3）。 將其命名為 UIPlayground.xaml。

2. 在 UIPlayground.xaml 中，新增一個 ScrollViewer，並為你想嘗試的每個控制項或模式建立對應的區段：

   <Page
       x:Class="MyApp.UIPlayground"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   
       <ScrollViewer Padding="24">
           <StackPanel Spacing="24">
   
               <!-- Section: Buttons -->
               <TextBlock Text="Buttons" Style="{StaticResource SubtitleTextBlockStyle}"/>
               <StackPanel Orientation="Horizontal" Spacing="8">
                   <Button Content="Standard"/>
                   <Button Content="Accent" Style="{StaticResource AccentButtonStyle}"/>
                   <ToggleButton Content="Toggle"/>
                   <HyperlinkButton Content="Link" NavigateUri="https://learn.microsoft.com"/>
               </StackPanel>
   
               <!-- Section: Text input -->
               <TextBlock Text="Text input" Style="{StaticResource SubtitleTextBlockStyle}"/>
               <TextBox PlaceholderText="Type here..." Width="300" HorizontalAlignment="Left"/>
               <PasswordBox PlaceholderText="Password" Width="300" HorizontalAlignment="Left"/>
   
               <!-- Add more sections as needed -->
   
           </StackPanel>
       </ScrollViewer>
   </Page>
   

3. 讓遊樂場更容易到達。 開發過程中，在 App.xaml.cs 中將它設為啟動頁面：

   // In App.xaml.cs, OnLaunched method — swap in for quick playground access:
   // rootFrame.Navigate(typeof(UIPlayground));
   

   或者，如果您的應用程式使用 NavigationView，請新增一個只會在偵錯版本中顯示的選單項目。 例如，在你主視窗的代碼背後：

   // In your main window or shell page constructor, after InitializeComponent():
   #if DEBUG
       NavView.MenuItems.Add(new NavigationViewItem
       {
           Content = "UI Playground",
           Tag = typeof(UIPlayground)
       });
   #endif
   

   其中 NavView 是您的 NavigationView 控制項的 x:Name。

如何使用遊樂場

1. 按 F5 啟動應用程式並導向遊樂場頁面。
2. 將 .xaml 檔案與執行中的應用程式並排開啟（或使用 XAML Live 即時預覽）。
3. 在 XAML 編輯器中新增或修改控制項——熱重新載入 能即時推送變更。
4. 使用 Live Visual Tree 點擊渲染中的控制項，並在 Live Property Explorer 中檢查它們的實際配置值。
5. 當你對控制項的外觀滿意時，把 XAML 複製到你的真實頁面。

這個模式給你一個「型別-重載-檢查」的循環——因為它執行的是真實程式碼，你會看到真實的資料範本、真實樣式和真實動畫。

比較設計時與執行時的方法

以下是常見的 UI 設計任務如何對應執行時工具：

高效工作流程的建議

• 使用 WinUI 3 圖庫應用程式。 從 Microsoft Store 安裝或從 GitHub 編譯。 它會顯示每個 WinUI 3 控制項，並附有互動範例和可複製的 XAML。 把它當作一個視覺目錄，你可以在寫 XAML 前瀏覽。
• 保持你的遊樂場頁面開放。 把它當作你應用程式的活生生風格指南來對待。
• 使用 d:DesignHeight 和 d:DesignWidth。 即使沒有設計師，這些屬性也能幫助 IntelliSense，讓你在編輯器中開啟頁面時保持大小一致。
• 與 XAML 繫結失敗視窗整合。 從 Debug>Windows>XAML Binding Failures 開啟它，以找出設計工具永遠不會顯示給你的繫結錯誤。
• 使用社群工具包。 Windows 社群工具包提供控制項與輔助工具，減少你手寫版面所需的數量。

相關內容

• XAML 熱重載
• XAML 即時預覽
• 偵錯時檢查 XAML 屬性
• 選擇合適的視覺樹檢視器
• 控制概述
• WinUI 3 圖庫應用程式