共用方式為


XAML 即時預覽:擷取和編輯傳統型應用程式 UI

透過 XAML 即時預覽,您可以擷取傳統型應用程式的使用者介面 (UI),並將其放入 Visual Studio 內的固定視窗,這可讓您更輕鬆地使用 XAML 熱重新載入來變更應用程式,並即時檢視這些變更。

An animation that shows XAML Live Preview in action.

XAML 即時預覽視窗

XAML 即時預覽視窗可在偵錯期間使用。 若要開啟此功能,請移至 [偵錯]>[視窗]>[XAML 即時預覽]

Screenshot of the XAML Live Preview option from the Debug menu bar.

或者,選取應用程式工具列中的 [以 XAML 即時預覽顯示] 按鈕。

Screenshot of the XAML Live Preview option from the application toolbar.

捲動和縮放

除了使用捲軸捲動之外,您還可以使用下列項目互動:

  • 滑鼠滾輪,包含垂直和水平 (如果您的滑鼠支援)。
  • 觸控板兩指捲動,包含垂直和水平。
  • 按下 Ctrl 鍵搭配滑鼠拖曳動作。

在縮放方面,您也可以使用下列項目互動:

  • 左下角的 [放大/縮小] 按鈕。
  • 如果您想要使用鍵盤,可按下 Ctrl+加號 (+) 或 Ctrl+減號 (-) 鍵盤快速鍵。
  • 按下 Ctrl 鍵搭配滑鼠滾輪動作,或使用觸控板捏合縮放動作。 使用滑鼠的額外優勢是可維持控制區域。

An animation of the scroll and zoom actions in XAML Live Preview.

元素選取

XAML Live Preview 中的元素選取類似於執行中應用程式的選取。 此功能可讓您在即時視覺化樹狀結構或來源 XAML 中找到元素。

An animation of the element selection action in XAML Live Preview.

元素選取是由前四個工具列按鈕所控制 (從左至右)。

Screenshot of the XAML Live Preview toolbar buttons for element selection.

工具列按鈕會產生下列動作:

  • 元素選取:啟動元素選取動作;換句話說,在 XAML 即時預覽中將滑鼠移至應用程式內容上方時,該功能會醒目顯示元素。 當您按一下某個元素時,系統會在 [即時視覺化樹狀結構] 中選取該元素。 如果 [預覽選取的元素] 已啟用,且來源 XAML 可供使用,則會順帶瀏覽至來源。 此行為與即時視覺化樹狀結構中的行為相同。
  • 在選取期間顯示元素資訊:切換按鈕,可控制滑鼠所停留元素的顯示大小、色彩和字型資訊。
  • 僅顯示我的 XAML:切換按鈕,可控制要醒目提示的元素:全部,或僅限解決方案中提供來源 XAML 的元素。 此行為與即時視覺化樹狀結構中的行為相同。
  • 預覽選取的項目:切換按鈕,可控制在選取元素時瀏覽至來源 XAML。 按鈕預設為關閉。 此行為與即時視覺化樹狀結構中的行為相同。

尺規

尺規可協助您對齊應用程式中的元素。 尺規會顯示與上一個尺規的距離,以應用程式單位表示。 如此一來,您就可以驗證應用程式不同部分之間的距離。

And animation of the rulers in action.

第二組工具列按鈕會控制尺規,如下所示 (從左至右):

Screenshot of the second group of rulers toolbar buttons in XAML Live Preview.

  • 新增垂直尺規: 新增一個垂直尺規。 如果您連續多次點擊此按鈕,系統會放置新的尺規,不會與現有的尺規重疊。
  • 新增水平尺規: 新增一個水平尺規,類似於垂直尺規。
  • 移除所有尺規: 一次移除所有尺規。
  • 選取尺規色彩: 變更尺規的色彩。
  • 切換尺規可見度: 按一下即可隱藏或顯示所有尺規。

尺規可妥善支援鍵盤。 您可以使用 Tab 鍵進行切換。 使用方向鍵可使尺規一次移動一個像素,或按下 Ctrl 搭配方向鍵即可一次移動 10 個應用程式單位。 Del 鍵可刪除目前選取的尺規。 您也可以選取標籤附近的 [刪除尺規] 按鈕,以使用滑鼠刪除尺規。

在使用 [元素選取] 時,您可以在元素周圍新增尺規。 按一下滑鼠右鍵會新增垂直尺規。 若要新增水平尺規,請選取並按住 Shift 鍵,再按一下滑鼠右鍵。

And animation of how you can add rulers to the outline of an image in XAML Live Preview.

多視窗應用程式

如果您的應用程式有多個視窗,您可以使用 [視窗] 下拉式方塊來選擇要顯示的視窗。 或者,在要瀏覽的視窗中使用應用程式工具列中的 [以 XAML 即時預覽顯示] 按鈕。

An animation of the multi-window application feature in XAML Live Preview.

支援的平台

Visual Studio 2022 的初始版本支援下列平台和偵錯案例。

平台 元素選取和資訊提示 尺規
WPF Yes Yes
UWP Yes Yes
WinUI3 桌面 Yes Yes
.NET MAUI Yes Yes
Xamarin 5.0+ (Android Emulator) No 是 (px*)

注意

在上表中,(px*) 代表以像素為單位的尺規;其他所有平台都會以平台單位顯示資訊,取決於螢幕的 DPI。

限制

XAML 即時預覽的運作方式是每秒擷取應用程式螢幕畫面數次,並使用 PrintWindow 等可用的 API。 該功能具有下列限制:

  • 如果應用程式視窗的某個部分超出畫面,則該部分通常不會顯示 XAML 熱重新載入變更。
  • 視窗可以不參與螢幕畫面擷取 (將無法使用 XAML 即時預覽),方法是使用 SetWindowDisplayAffinity 搭配 WDA_EXCLUDEFROMCAPTURE,或是 DwmSetWindowAttribute 搭配 DWMWA_CLOAK。

下一步

深入了解 XAML 熱重新載入,此功能會與 XAML 即時預覽緊密搭配使用。

Visual Studio 2022 版本資訊