WinUI 3 的 XAML 執行時設計工具

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

注意

Visual Studio 的 XAML Designer（拖放設計分頁）目前不支援 WinUI 3 專案。如果你打開檔案 .xaml 只看到 XML 編輯器，那你的安裝並沒有壞——設計器在 WinUI 3 上無法使用。功能請求會在開發人員社群追蹤：為 WinUI 3 桌面應用程式新增 XAML 設計器支援。關於工程工作的背景，請參見 WindowsAppSDK 討論 #4710。

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

你會用什麼

Tool	其功能是什麼	如何打開它
XAML 熱重載	在不重啟的情況下，將 XAML 變更推送到你的執行應用程式	自動 — 在除錯時編輯任何一個 `.xaml` 檔案
即時視覺樹	顯示完整的執行時元素樹，並允許你在應用程式中選擇元素	偵錯>視窗>即時視覺樹
即時屬性總管	顯示並允許你在執行時編輯所選元素的所有屬性	除錯>Windows>即時屬性總管
XAML 即時預覽	它會在 Visual Studio 裡渲染你正在執行的應用程式，讓你不用切換視窗就能檢查	除錯>Windows>XAML 即時預覽

Tip

Dock 即時視覺樹 與 即時資產探索器 並排展示。兩者合起來會提供詳細的檢查視圖，顯示實際執行時的數值。

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

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

Important

XAML 熱重新載入需要除錯器。未除錯執行（Ctrl+F5）會停用熱重新載入、Live Visual Tree 和 Live Property Explorer。

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

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

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

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

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

有些變更需要重新開始：

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

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

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

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

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

以視覺方式選取元素

在 Live Visual Tree 工具列中，啟用 在執行中的應用程式中選取元素（十字準星按鈕）。
點擊你執行中的應用程式中的任何元素——樹狀結構會導向該元素， 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 遊樂場頁面

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

搭建遊樂場

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

在 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>

讓遊樂場更容易到達。開發過程中，在 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。

如何使用遊樂場

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

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

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

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

任務	執行時工具
在頁面上新增控制項	輸入 XAML 元素 — IntelliSense 會完成標籤及所需屬性
預覽控制	透過熱重新載入在運行中的應用程式中即時觀看
選擇一個元素要檢查	使用即時視覺樹>選擇元素（準星）
檢視或編輯屬性	使用 Live Property Explorer
調整大小或位置	編輯 `Width`、 `Height`、 `Margin` 在 XAML 或 Live Property Explorer 中

高效工作流程的建議

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

意見反應

此頁面對您有幫助嗎？

Last updated on 2026-09-19