Skip to content

Commit 9801fc6

Browse files
American-DipperAmerican-Dipper
authored
Merge pull request #5770 from Mikejo5000/mikejo-xaml
XAML tools updates
2 parents c5f5418 + 592f485 commit 9801fc6

File tree

5 files changed

+106
-56
lines changed

5 files changed

+106
-56
lines changed

‎docs/debugger/general-debugging-options-dialog-box.md

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: "General, Debugging, Options Dialog Box | Microsoft Docs"
3-
ms.date: "11/09/2018"
3+
ms.date: "11/12/2019"
44
ms.topic: "reference"
55
f1_keywords:
66
- "vs.debug.options.General"
@@ -171,6 +171,14 @@ The Live Visual Tree and the Live Property Explore windows will appear when you
171171
- **Enable XAML Hot Reload**:
172172
Allows you to use the XAML Hot Reload feature with XAML code when your app is running. (This feature was previously called "XAML Edit and Continue")
173173

174+
::: moniker range=">= vs-2019"
175+
- **Enable Just My XAML**:
176+
Starting in Visual Studio 2019 version 16.4, the **Live Visual Tree** by default shows only XAML that is classified as user code. If you disable this option, all generated XAML code is shown in the tool.
177+
178+
- **Turn off selection mode when an element is selected**
179+
Starting in Visual Studio 2019 version 16.4, the in-app toolbar element selector button (**Enable selection**) switches off when an element is selected. If you disable this option, element selection stays on until you click the in-app toolbar button again.
180+
::: moniker-end
181+
174182
**Enable Diagnostic Tools while debugging**:
175183
The **Diagnostic Tools** window appears while you are debugging.
176184

‎docs/debugger/media/vs-2019/livevisualtree-app.png

11.3 KB
Loading

‎docs/debugger/media/vs-2019/livevisualtree-listboxitems.png

27.5 KB
Loading

‎docs/debugger/media/vs-2019/livevisualtreelivepropertyviewer-displaylayout.png

109 KB
Loading

‎docs/xaml-tools/inspect-xaml-properties-while-debugging.md

Lines changed: 97 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: "Inspect XAML properties while debugging | Microsoft Docs"
3-
ms.date: "03/06/2017"
3+
ms.date: "11/12/2019"
44
ms.topic: "conceptual"
55
ms.assetid: 390edde4-7b8d-4c89-8d69-55106b7e6b11
66
author: "mikejo5000"
@@ -10,90 +10,132 @@ ms.technology: vs-ide-debug
1010
ms.workload:
1111
- "uwp"
1212
---
13-
# Inspect XAML properties while debugging
13+
14+
# Inspect XAML properties while debugging
15+
1416
You can get a real-time view of your running XAML code with the **Live Visual Tree** and the **Live Property Explorer**. 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.
1517

1618
You can use these tools in the following configurations:
1719

1820
|Type of App|Operating System and Tools|
1921
|-----------------|--------------------------------|
2022
|Windows Presentation Foundation (4.0 and above) applications|Windows 7 and above|
21-
|Universal Windows apps|Windows 10 and above, with the [Windows 10 SDK](https://dev.windows.com/en-us/downloads/windows-10-sdk)|
23+
|Universal Windows apps|Windows 10 and above, with the [Windows 10 SDK](https://dev.windows.com/downloads/windows-10-sdk)|
24+
25+
## Look at Elements in the Live Visual Tree
2226

23-
## Looking at Elements in the Live Visual Tree
2427
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.
2528

26-
Create a new C# WPF application (File > New > Project, then select C# and find WPF Application). Name it **TestXAML**.
29+
### Create the project
30+
31+
1. 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)**). Name it **TestXAML**.
32+
33+
1. Change MainWindow.xaml to the following:
34+
35+
```xaml
36+
<Window x:Class="TestXAML.MainWindow"
37+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
38+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
39+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
40+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
41+
xmlns:local="clr-namespace:TestXAML"
42+
mc:Ignorable="d"
43+
Title="MainWindow" Height="350" Width="525">
44+
<Grid>
45+
<Button x:Name="button" Background="LightBlue" Content="Add Item" HorizontalAlignment="Left" Margin="216,206,0,0" VerticalAlignment="Top" Width="75" Click="button_Click"/>
46+
<ListBox x:Name="listBox" HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100" Margin="205,80,0,0"/>
47+
</Grid>
48+
</Window>
49+
```
50+
51+
1. Add the following command handler to the MainWindow.xaml.cs file:
52+
53+
```csharp
54+
int count;
55+
56+
private void button_Click(object sender, RoutedEventArgs e)
57+
{
58+
ListBoxItem item = new ListBoxItem();
59+
item.Content = "Item" + ++count;
60+
if (count % 2 == 0)
61+
{
62+
item.Background = Brushes.LightGray;
63+
}
64+
else
65+
{
66+
item.Background = Brushes.LightYellow;
67+
}
68+
listBox.Items.Add(item);
69+
}
70+
```
71+
72+
1. Build the project and start debugging. (The build configuration must be Debug, not Release. For more information about build configurations, see [Understanding Build Configurations](../ide/understanding-build-configurations.md).)
73+
74+
When the window comes up you should see the in-app toolbar appear within your running application.
75+
76+
::: moniker range=">= vs-2019"
77+
![Main window of the app](../debugger/media/vs-2019/livevisualtree-app.png "LiveVIsualTree-App")
78+
::: moniker-end
79+
::: moniker range="vs-2017"
80+
![Main window of the app](../debugger/media/livevisualtree-app.png "LiveVIsualTree-App")
81+
::: moniker-end
82+
83+
1. Now, click the **Add Item** button a few times to add new items into the list.
84+
85+
### Inspect XAML properties
2786

28-
Change MainWindow.xaml to the following:
87+
1. 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.
2988

30-
```xaml
31-
<Window x:Class="TestXAML.MainWindow"
32-
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
33-
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
34-
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
35-
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
36-
xmlns:local="clr-namespace:TestXAML"
37-
mc:Ignorable="d"
38-
Title="MainWindow" Height="350" Width="525">
39-
<Grid>
40-
<Button x:Name="button" Background="LightBlue" Content="Add Item" HorizontalAlignment="Left" Margin="216,206,0,0" VerticalAlignment="Top" Width="75" Click="button_Click"/>
41-
<ListBox x:Name="listBox" HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100" Margin="205,80,0,0"/>
42-
</Grid>
43-
</Window>
44-
```
89+
1. In the **Live Visual Tree** window, expand the **ContentPresenter** node. It should contain nodes for the button and the list box. Expand the list box (and then the **ScrollContentPresenter** and the **ItemsPresenter**) to find the list box items.
4590

46-
Add the following command handler to the MainWindow.xaml.cs file:
91+
::: moniker range=">= vs-2019"
92+
If you don't see **ContentPresenter** node, toggle the **Show Just My XAML** icon on the toolbar. Starting in Visual Studio 2019 version 16.4, the view of XAML elements is simplified by default using the Just My XAML feature. You can also [disable this setting](../debugger/general-debugging-options-dialog-box.md) in options to always show all XAML elements.
93+
::: moniker-end
4794

48-
```csharp
49-
int count;
95+
The window should look like this:
5096

51-
private void button_Click(object sender, RoutedEventArgs e)
52-
{
53-
ListBoxItem item = new ListBoxItem();
54-
item.Content = "Item" + ++count;
55-
if (count % 2 == 0)
56-
{
57-
item.Background = Brushes.LightGray;
58-
}
59-
else
60-
{
61-
item.Background = Brushes.LightYellow;
62-
}
63-
listBox.Items.Add(item);
64-
}
65-
```
97+
::: moniker range=">= vs-2019"
98+
![ListBoxItems in the Live Visual Tree](../debugger/media/vs-2019/livevisualtree-listboxitems.png "LiveVisualTree-ListBoxItems")
99+
::: moniker-end
100+
::: moniker range="vs-2017"
101+
![ListBoxItems in the Live Visual Tree](../debugger/media/livevisualtree-listboxitems.png "LiveVisualTree-ListBoxItems")
102+
::: moniker-end
66103

67-
Build the project and start debugging. (The build configuration must be Debug, not Release. For more information about build configurations, see [Understanding Build Configurations](../ide/understanding-build-configurations.md).)
104+
1. 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**.
68105

69-
When the window comes up you should see the in-app toolbar appear within your running application.
106+
1. Now, let's look at the properties of one of the list box items.
70107

71-
![Main window of the app](../debugger/media/livevisualtree-app.png "LiveVIsualTree-App")
108+
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. Note that the **Content** field is "Item1", and the **Background** > **Color** field is **#FFFFFFE0**.
109+
110+
1. Go back to the **Live Visual Tree** and select the second list box item. The **Live Property Explorer** should show that the **Content** field is "Item2", and the **Background** > **Color** field is **#FFD3D3D3** (depending on theme).
72111

73-
Now click the **Add Item** button a few times to add new items into the list.
112+
> [!NOTE]
113+
> 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}`. A green border means that the value is set using a resource, such as `Color = {StaticResource MyBrush}`.
74114
75-
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 it s open, drag it away from its docking position so we can look at this window and the **Live Properties** window side by side. In the **Live Visual Tree** window, expand the **ContentPresenter** node. It should contain nodes for the button and the list box. Expand the list box (and then the **ScrollContentPresenter** and the **ItemsPresenter**) to find the list box items. The window should look like this:
115+
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. 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.
76116

77-
![ListBoxItems in the Live Visual Tree](../debugger/media/livevisualtree-listboxitems.png "LiveVisualTree-ListBoxItems")
117+
::: moniker range=">= vs-2019"
118+
**Select element in the running application**. You can enable this mode when you select the leftmost button on the **Live Visual Tree** toolbar. 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. Starting in Visual Studio 2019 version 16.4, you can [configure the behavior of element selection](../debugger/general-debugging-options-dialog-box.md).
78119

79-
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**.
120+
**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.
80121

81-
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. Note that the **Content** field is "Item1", and the **Background** > **Color** field is **#FFFFFFE0**. Go back to the **Live Visual Tree** and select the second list box item. The **Live Property Explorer** should show that the **Content** field is "Item2", and the **Background** > **Color** field is **#FFD3D3D3**.
122+
![LivePropertyViewer in DisplayLayout](../debugger/media/vs-2019/livevisualtreelivepropertyviewer-displaylayout.png "LiveVisualTreeLivePropertyViewer-DisplayLayout")
82123

83-
> [!NOTE]
84-
> 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}`. A green border means that the value is set using a resource, such as `Color = {StaticResource MyBrush}`.
124+
**Preview Selection**. You can enable this mode by selecting the third button from the left on the Live Visual Tree toolbar. 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. The MainWindow.xaml file opens in Visual Studio and the cursor is placed on the line where the button is defined.
125+
::: moniker-end
85126

86-
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. 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.
127+
::: moniker range="vs-2017"
128+
**Enable selection in the running application**. You can enable this mode when you select the leftmost button on the **Live Visual Tree** toolbar. 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.
87129

88-
**Enable selection in the running application**. You can enable this mode when you select the leftmost button on the **Live Visual Tree** toolbar. 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.
130+
**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.
89131

90-
**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.
132+
![LivePropertyViewer in DisplayLayout](../debugger/media/livevisualtreelivepropertyviewer-displaylayout.png "LiveVisualTreeLivePropertyViewer-DisplayLayout")
91133

92-
![LivePropertyViewer in DisplayLayout](../debugger/media/livevisualtreelivepropertyviewer-displaylayout.png "LiveVisualTreeLivePropertyViewer-DisplayLayout")
134+
**Preview Selection**. You can enable this mode by selecting the third button from the left on the Live Visual Tree toolbar. 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. The MainWindow.xaml file opens in Visual Studio and the cursor is placed on the line where the button is defined.
135+
::: moniker-end
93136

94-
**Preview Selection**. You can enable this mode by selecting the third button from the left on the Live Visual Tree toolbar. 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. The MainWindow.xaml file opens in Visual Studio and the cursor is placed on the line where the button is defined.
137+
## Use XAML tools with running applications
95138

96-
## Using XAML tools with running applications
97139
You can use these XAML tools even when you don't have the source code. When you attach to a running XAML application, you can use the **Live Visual Tree** on the UI elements of that application too. Here's an example, using the same WPF test application we used before.
98140

99141
1. Start the **TestXaml** application in the Release configuration. You cannot attach to a process that is running in a **Debug** configuration.

0 commit comments

Comments
 (0)