共用方式為


檢查 .NET MAUI 應用程式的可視化樹狀結構

.NET 多平臺應用程式 UI (.NET MAUI) 即時可視化樹狀結構是 Visual Studio 功能,可提供執行中 .NET MAUI 應用程式中 UI 元素的樹視圖。

當您的 .NET MAUI 應用程式在偵錯組態中執行時,使用附加調試程式,即可從 Visual Studio 功能表欄選取 > [偵錯 Windows > 即時可視化樹狀結構] 來開啟 [即時可視化樹狀結構] 視窗:

Screenshot of the Live Visual Tree window in Visual Studio.

前提是已啟用 熱重新載入,不論應用程式的UI是使用 XAML 還是 C# 建置應用程式 UI,即時可視化樹狀結構視窗都會顯示您 app UI 元素的階層。 不過,您必須停用 Just My XAML,才能針對使用 C# 建置的 UI 顯示應用程式的 UI 元素階層。

Just My XAML

UI 元素的檢視預設會使用稱為 Just My XAML 的功能來簡化。 點選 「 顯示 Just My XAML 」 按鈕會停用此功能,並顯示可視化樹狀結構中的所有 UI 元素:

Screenshot of all UI elements in the Live Visual Tree window.

只要從 Visual Studio 功能表欄選取 [>偵錯選項>] XAML 熱重新載入,即可永久停用 [我的 XAML]。 接下來,在 [ 選項 ] 對話框中,確定 [在即時可視化樹 狀結構中啟用 Just My XAML] 已停用:

Screenshot of Just My XAML button disabled in the Live Visual Tree window in Visual Studio.

尋找UI元素

XAML UI 的結構有許多您可能不感興趣的元素,而且如果您沒有充分瞭解應用程式的原始程式碼,您可能很難瀏覽可視化樹狀結構來尋找您要尋找的 UI 元素。 因此,在 Windows 上的 [ 即時可視化樹 狀結構] 視窗有多個方法,可讓您使用應用程式的 UI 來協助您尋找您想要檢查的專案:

  • 在執行中的應用程式中選取元素。 您可以按下 [即時視覺化樹狀結構] 工具列中[執行應用程式] 按鈕中的 [選取專案] 來啟用此模式:

    Screenshot of the Select Element in the Running Application button in the Live Visual Tree toolbar.

    啟用此模式時,當您可以在應用程式中 選取 UI 元素時,即時可視化樹 狀結構視窗會自動更新,以顯示對應至該專案之樹狀結構中的節點。

  • 在執行中應用程式顯示版面配置提示。 您可以按下 [即時視覺化樹狀結構] 工具列中 [執行應用程式] 按鈕中的 [顯示版面設定裝飾項] 來啟用此模式:

    Screenshot of the Display Layout Adorners in the Running Application button in the Live Visual Tree toolbar.

    啟用此模式時,它會導致應用程式視窗沿著選取物件的界限顯示水準和垂直線條,以便您可以看到其對齊的專案,以及顯示邊界的矩形。

  • 預覽選取範圍。 您可以按下 [即時視覺化樹狀結構] 工具列中的 [預覽選取的專案] 按鈕來啟用此模式:

    Screenshot of the Preview Selected Item button in the Live Visual Tree toolbar.

    此模式會顯示宣告專案的 XAML 原始程式碼,前提是您可以存取應用程式原始碼。