在偵錯時檢查 XAML 屬性Inspect XAML properties while debugging

您可以使用 [即時視覺化樹狀結構] 和 [即時屬性總管] 來即時檢視正在執行的 XAML 程式碼。You can get a real-time view of your running XAML code with the Live Visual Tree and the Live Property Explorer. 這些工具提供您執行中之 XAML 應用程式 UI 項目的樹狀檢閱,並且顯示任何您所選取之 UI 項目的執行階段屬性。These tools give you a tree view of the UI elements of your running XAML application, and show you the runtime properties of any UI element you select.

您可以在下列設定中使用這些工具:You can use these tools in the following configurations:

應用程式類型Type of App 作業系統與工具Operating System and Tools
Windows Presentation Foundation (4.0 和更新版本) 應用程式Windows Presentation Foundation (4.0 and above) applications Windows 7 和更新版本Windows 7 and above
通用 Windows 應用程式Universal Windows apps 使用WINDOWS 10 SDK Windows 10 和更新版本Windows 10 and above, with the Windows 10 SDK

查看即時視覺化樹狀結構中的元素Look at Elements in the Live Visual Tree

首先我們使用一個非常簡單的 WPF 應用程式,而該程式具有清單檢視和按鈕。Let's get started with a very simple WPF application that has a list view and a button. 每當您按一下按鈕,就會將另一個項目加入清單。Every time you click the button, another item is added to the list. 偶數的項目以灰色顯示,而奇數項目則以黃色顯示。Even-numbered items are colored gray, and odd-numbered items are colored yellow.

建立專案Create the project

  1. 建立新的 c # WPF 應用 程式 (檔案 > > 專案,然後輸入 "c # wpf",然後選擇 wpf 應用程式 ( .net Core)wpf 應用程式 ( .NET Framework) ) 。Create a new C# WPF application (File > New > Project, then type "C# WPF", and choose either WPF App (.NET Core) or WPF App (.NET Framework)). 將其命名為 TestXAMLName it TestXAML.

  2. 將 MainWindow.xaml 變更成如下:Change MainWindow.xaml to the following:

    <Window x:Class="TestXAML.MainWindow"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       xmlns:local="clr-namespace:TestXAML"
       mc:Ignorable="d"
       Title="MainWindow" Height="350" Width="525">
       <Grid>
          <Button x:Name="button" Background="LightBlue" Content="Add Item" HorizontalAlignment="Left" Margin="216,206,0,0" VerticalAlignment="Top" Width="75" Click="button_Click"/>
          <ListBox x:Name="listBox" HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100" Margin="205,80,0,0"/>
       </Grid>
    </Window>
    
  3. 將下列的命令處理常式加入 MainWindow.xaml.cs 檔案:Add the following command handler to the MainWindow.xaml.cs file:

    int count;
    
    private void button_Click(object sender, RoutedEventArgs e)
    {
       ListBoxItem item = new ListBoxItem();
       item.Content = "Item" + ++count;
       if (count % 2 == 0)
       {
          item.Background = Brushes.LightGray;
       }
       else
       {
          item.Background = Brushes.LightYellow;
       }
       listBox.Items.Add(item);
    }
    
  4. 建置此專案並開始偵錯。Build the project and start debugging. (組建組態必須為偵錯,而非發行。(The build configuration must be Debug, not Release. 如需組建組態的詳細資訊,請參閱了解組建組態。)For more information about build configurations, see Understanding Build Configurations.)

    當視窗出現時,您應該會看到應用程式中的工具列出現在執行中的應用程式內。When the window comes up you should see the in-app toolbar appear within your running application.

    應用程式的主視窗Main window of the app

    應用程式的主視窗Main window of the app

  5. 現在,按一下 [ 新增專案 ] 按鈕幾次,即可將新專案加入清單中。Now, click the Add Item button a few times to add new items into the list.

檢查 XAML 屬性Inspect XAML properties

  1. 接著,按一下應用程式內工具列 (或移至 [ > Windows > 即時視覺化樹狀]) ,開啟 [即時視覺化樹狀結構] 視窗。Next, open the Live Visual Tree window by clicking on the very left button of the in-app toolbar (or by going to Debug > Windows > Live Visual Tree). 開啟後,將其從停駐位置拖曳出,讓我們可以並排查看此視窗和 [ 即時屬性 ] 視窗。Once its open, drag it away from its docking position so we can look at this window and the Live Properties window side by side.

  2. 在 [即時視覺化樹狀結構] 視窗中,展開 [ContentPresenter] 節點。In the Live Visual Tree window, expand the ContentPresenter node. 其應包含按鈕和清單方塊的節點。It should contain nodes for the button and the list box. 展開清單方塊 (然後展開 [ScrollContentPresenter] 和 [ItemsPresenter]) 來尋找清單方塊項目。Expand the list box (and then the ScrollContentPresenter and the ItemsPresenter) to find the list box items.

    如果您沒有看到 [ ContentPresenter ] 節點,請切換工具列上的 [ 僅顯示我的 XAML ] 圖示。If you don't see ContentPresenter node, toggle the Show Just My XAML icon on the toolbar. 從 Visual Studio 2019 16.4 版開始,XAML 專案的觀看預設會使用 [僅我的 XAML] 功能來簡化。Starting in Visual Studio 2019 version 16.4, the view of XAML elements is simplified by default using the Just My XAML feature. 您也可以在 [選項] 中 停用這項設定 ,永遠顯示所有的 XAML 元素。You can also disable this setting in options to always show all XAML elements.

    視窗類似下圖所示:The window should look like this:

    即時視覺化樹狀結構中的 ListBoxItemsListBoxItems in the Live Visual Tree

    即時視覺化樹狀結構中的 ListBoxItemsListBoxItems in the Live Visual Tree

  3. 回到應用程式視窗並再加入一些項目。Go back to the application window and add a few more items. 您應該會看到多個清單方塊項目出現在 [即時視覺化樹狀結構] 中。You should see more list box items appear in the Live Visual Tree.

  4. 現在,讓我們看看其中一個清單方塊專案的屬性。Now, let's look at the properties of one of the list box items.

    選取 [即時視覺化樹狀結構] 中的第一個清單方塊項目,然後按一下工具列上的 顯示屬性 圖示。Select the first list box item in the Live Visual Tree and click the Show Properties icon on the toolbar. 應該就會顯示 [即時屬性總管]。The Live Property Explorer should appear. 請注意,[內容] 欄位是 "Item1",而 背景 > 色彩 欄位是 #FFFFFFE0Note that the Content field is "Item1", and the Background > Color field is #FFFFFFE0.

  5. 返回 [即時視覺化樹狀結構] 並選取第二個清單方塊項目。Go back to the Live Visual Tree and select the second list box item. [即時屬性瀏覽器] 應該會顯示 [內容] 欄位是 "Item2",而 [背景 > 色彩] 欄位則是根據主題) 而 #FFD3D3D3 (。The Live Property Explorer should show that the Content field is "Item2", and the Background > Color field is #FFD3D3D3 (depending on theme).

    注意

    即時屬性瀏覽器 中的屬性周圍有一個黃色框線,表示屬性值是透過系結(例如)設定 Color = {BindingExpression}A yellow border around a property in the Live Property Explorer means that the property value is set through a binding, such as Color = {BindingExpression}. 綠色框線表示值是使用資源(例如)設定 Color = {StaticResource MyBrush}A green border means that the value is set using a resource, such as Color = {StaticResource MyBrush}.

    XAML 的實際結構有許多您可能不會直接感興趣的項目,如果您不熟悉此程式碼,可能很難在巡覽樹狀結構時找到您要尋找的項目。The actual structure of the XAML has a lot of elements that you're probably not directly interested in, and if you don't know the code well you might have a hard time navigating the tree to find what you're looking for. 因此 [即時視覺化樹狀結構] 有好幾種方式可讓您使用應用程式的 UI 來協助找出您想要檢查的項目。So the Live Visual Tree has a couple of ways that let you use the application's UI to help you find the element you want to examine.

    選取執行中應用程式的元素Select element in the running application. 只要選取 [即時視覺化樹狀結構] 工具列最左邊的按鈕,即可啟用此模式。You can enable this mode when you select the leftmost button on the Live Visual Tree toolbar. 啟用此模式後,您便可以在應用程式中選取 UI 項目,而 [即時視覺化樹狀結構] (和 [即時屬性檢閱器]) 會自動更新,以顯示樹狀結構中的節點對應至該項目及其屬性。With this mode on, you can select a UI element in the application, and the Live Visual Tree (and the Live Property Viewer) automatically updates to show the node in the tree corresponding to that element, and its properties. 從 Visual Studio 2019 版本16.4 開始,您可以 設定元素選取的行為Starting in Visual Studio 2019 version 16.4, you can configure the behavior of element selection.

    在執行中應用程式顯示版面配置提示Display layout adorners in the running application. 只要選取緊鄰 [啟用選取範圍] 按鈕右邊的按鈕時,即可啟用此模式。You can enable this mode when you select the button that is immediately to the right of the Enable selection button. [顯示版面配置提示] 開啟時,會使此應用程式視窗沿著所選取物件的界限顯示水平及垂直線條,讓您能夠查看其向何處對齊,以及查看顯示此邊界的矩形。When Display layout adorners is on, it causes the application window to show horizontal and vertical lines along the bounds of the selected object so you can see what it aligns to, as well as rectangles showing the margins. 例如,開啟 [ 選取 專案] 和 [ 顯示版面 配置],然後選取應用程式中的 [ 加入專案 ] 文字區塊。For example, turn both Select element and Display layout on, and select the Add Item text block in the application. 您應該會看到 [即時視覺化樹狀結構] 中的文字區塊節點和 [即時屬性檢閱器] 中的文字區塊屬性,以及文字區塊界限內的水平和垂直線條。You should see the text block node in the Live Visual Tree and the text block properties in the Live Property Viewer, as well as the horizontal and vertical lines on the bounds of the text block.

    LivePropertyViewer 中的 DisplayLayoutLivePropertyViewer in DisplayLayout

    預覽選取範圍Preview Selection. 只要選取 [即時視覺化樹狀] 工具列上從左邊數來的第三個按鈕,即可啟用這個模式。You can enable this mode by selecting the third button from the left on the Live Visual Tree toolbar. 如果您可存取該應用程式的原始程式碼,則此模式會顯示宣告此項目的 XAML。This mode shows the XAML where the element was declared, if you have access to the source code of the application. 選取 [ 選取 專案] 和 [ 預覽選取範圍],然後選取測試應用程式中的按鈕。Select Select element and Preview selection, and then you select the button in our test application. MainWindow.xaml 檔案會在 Visual Studio 中開啟,而且游標會置於定義按鈕位置的那一行。The MainWindow.xaml file opens in Visual Studio and the cursor is placed on the line where the button is defined.

    啟用執行中應用程式的選項Enable selection in the running application. 只要選取 [即時視覺化樹狀結構] 工具列最左邊的按鈕,即可啟用此模式。You can enable this mode when you select the leftmost button on the Live Visual Tree toolbar. 啟用此模式後,您便可以在應用程式中選取 UI 項目,而 [即時視覺化樹狀結構] (和 [即時屬性檢閱器]) 會自動更新,以顯示樹狀結構中的節點對應至該項目及其屬性。With this mode on, you can select a UI element in the application, and the Live Visual Tree (and the Live Property Viewer) automatically updates to show the node in the tree corresponding to that element, and its properties.

    在執行中應用程式顯示版面配置提示Display layout adorners in the running application. 只要選取緊鄰 [啟用選取範圍] 按鈕右邊的按鈕時,即可啟用此模式。You can enable this mode when you select the button that is immediately to the right of the Enable selection button. [顯示版面配置提示] 開啟時,會使此應用程式視窗沿著所選取物件的界限顯示水平及垂直線條,讓您能夠查看其向何處對齊,以及查看顯示此邊界的矩形。When Display layout adorners is on, it causes the application window to show horizontal and vertical lines along the bounds of the selected object so you can see what it aligns to, as well as rectangles showing the margins. 例如,同時開啟 [啟用選取範圍] 和 [顯示版面配置],並在應用程式中選取 [新增項目] 文字區塊。For example, turn both Enable selection and Display layout on, and select the Add Item text block in the application. 您應該會看到 [即時視覺化樹狀結構] 中的文字區塊節點和 [即時屬性檢閱器] 中的文字區塊屬性,以及文字區塊界限內的水平和垂直線條。You should see the text block node in the Live Visual Tree and the text block properties in the Live Property Viewer, as well as the horizontal and vertical lines on the bounds of the text block.

    LivePropertyViewer 中的 DisplayLayoutLivePropertyViewer in DisplayLayout

    預覽選取範圍Preview Selection. 只要選取 [即時視覺化樹狀] 工具列上從左邊數來的第三個按鈕,即可啟用這個模式。You can enable this mode by selecting the third button from the left on the Live Visual Tree toolbar. 如果您可存取該應用程式的原始程式碼,則此模式會顯示宣告此項目的 XAML。This mode shows the XAML where the element was declared, if you have access to the source code of the application. 選取 [啟用選取範圍] 和 [預覽選取範圍],然後選取在我們測試應用程式中的按鈕。Select Enable selection and Preview selection, and then you select the button in our test application. MainWindow.xaml 檔案會在 Visual Studio 中開啟,而且游標會置於定義按鈕位置的那一行。The MainWindow.xaml file opens in Visual Studio and the cursor is placed on the line where the button is defined.

搭配執行中的應用程式使用 XAML 工具Use XAML tools with running applications

即使沒有原始程式碼,您仍可使用這些 XAML 工具。You can use these XAML tools even when you don't have the source code. 當您附加至執行中 XAML 應用程式時,您也可以使用該應用程式 UI 項目上的 [即時視覺化樹狀結構]。When you attach to a running XAML application, you can use the Live Visual Tree on the UI elements of that application too. 以下範例使用的 WPF 測試應用程式和我們之前使用的相同。Here's an example, using the same WPF test application we used before.

  1. 在 [發行] 組態中啟動 TestXaml 應用程式。Start the TestXaml application in the Release configuration. 您無法附加至正在 [偵錯] 組態中執行的處理序。You cannot attach to a process that is running in a Debug configuration.

  2. 開啟第二個 Visual Studio 執行個體,然後按一下 [偵錯] > [附加至處理序]。Open a second instance of Visual Studio and click Debug > Attach to Process. 在可用的處理序清單中尋找 TestXaml.exe,然後按一下 [附加]。Find TestXaml.exe in the list of available processes, and click Attach.

  3. 應用程式會開始執行。The application starts running.

  4. 在 Visual Studio 的第二個執行個體中,開啟 [即時視覺化樹狀結構] ([偵錯] > [視窗] > [即時視覺化樹狀結構])。In the second instance of Visual Studio, open the Live Visual Tree (Debug > Windows > Live Visual Tree). 您應該會看到 TestXaml UI 項目,且應該可以如同直接對應用程式進行偵錯時一樣管理這些項目。You should see the TestXaml UI elements, and you should be able to manipulate them as you did while debugging the application directly.

另請參閱See also

使用 XAML 熱重新載入撰寫和偵測執行中的 XAML 程式碼Write and debug running XAML code with XAML Hot Reload