使用 XAML Live Preview，可以捕获桌面应用的用户界面（UI），并将其引入 Visual Studio 中的停靠窗口，这样就可以更轻松地使用 XAML 热重载 来更改应用，然后在进行这些更改时实时查看这些更改。
XAML 实时预览窗口
XAML 实时预览窗口在调试期间可用。 若要打开它，请转到 “调试>Windows>XAML Live Preview”。
从 Visual Studio 2022 版本 17.14 预览版 2 开始，XAML Live Preview 和 XAML 热重载 在设计时可用，而不仅仅是在调试会话期间提供。
或者，在应用程序工具栏中选择“ 在 XAML 实时预览中显示 ”按钮。
滚动和缩放
除了使用滚动条进行滚动之外，还可以使用以下操作：
- 鼠标滚轮，包括垂直和水平滚动（如果您的鼠标支持该功能）。
- 触摸板双指用于滚动，支持垂直和水平移动。
- 按下 Ctrl 键并拖动鼠标。
至于缩放，还可以使用以下交互：
- 左下角的“放大/缩小”按钮。
- 如果你更喜欢使用键盘，可以按Ctrl+加号(+)或Ctrl+减号(-)快捷键。
- 按 Ctrl 键的同时滚动鼠标滚轮，或在触摸板上进行捏合缩放动作。 使用鼠标的额外好处是能够保持控制权。
元素选择
XAML Live Preview 中的元素选择类似于正在运行的应用程序中的选择。 它允许在实时可视化树或源 XAML 中找到元素。
元素选择由前四个工具栏按钮（从左到右）控制。
工具栏按钮执行以下动作：
- 元素选择 启动元素选择动作；换句话说，当鼠标悬停在 XAML Live Preview 的应用程序界面上时，它会突出显示元素。 单击某个元素时，将在实时可视化树中选择该元素。 如果启用了 预览所选元素 ，并且源 XAML 可用，它还会导航到源。 此行为与实时可视化树中的行为相同。
- 选择过程中显示元素信息 是一个切换按钮，用于控制鼠标下元素的大小、颜色和字体信息的显示。
- 仅“我的 XAML ”是一个切换按钮，用于控制要突出显示哪些元素：所有元素，或仅包含解决方案中可用的源 XAML 的元素。 此行为与实时可视化树中的行为相同。
- 预览所选项 是一个切换按钮，用于控制在选择元素时导航到源 XAML。 默认情况下，它处于关闭状态。 此行为与实时可视化树中的行为相同。
统治者
标尺可帮助你对齐应用程序中的元素。 它们显示与上一个标尺之间的距离（以应用程序单位为单位）。 这样，它们有助于验证应用程序的不同部分之间的距离。
第二组工具栏按钮控制标尺，如下所示（从左到右）：
- 添加垂直标尺。 添加单个垂直标尺。 如果连续几次单击此按钮，则会放置新标尺，使其不重叠现有标尺。
- 添加水平标尺。 添加单个水平标尺，类似于垂直标尺。
- 删除所有标尺。 同时删除所有标尺。
- 选择标尺颜色。 更改标尺的颜色。
- 切换标尺可见性。 只需单击一下即可隐藏或显示所有标尺。
标尺对键盘操作很友好。 可以使用 Tab 键在它们之间切换。 可以使用箭头键一次移动标尺一个像素，或按 Ctrl 与箭头键配对，一次移动 10 个应用单位。 Del 键将删除当前选定的标尺。 还可以通过选择标签附近的 “删除标尺 ”按钮，使用鼠标删除标尺。
还可以在使用元素选择时围绕元素添加标尺。 右键单击可添加垂直标尺。 若要添加水平标尺，请在右键单击时选择并按住 Shift 键。
多窗口应用程序
如果应用程序有多个窗口，则可以使用“窗口”组合框选择要显示的窗口。 或者，使用要预览的窗口的应用程序工具栏中的“在 XAML 实时预览中显示 ”按钮。
支持的平台
Visual Studio 2022 的初始版本支持以下平台和调试方案。
| 平台 | 元素选择和信息提示 | 统治者 |
|---|---|---|
| WPF（Windows Presentation Foundation） | 是的 | 是的 |
| UWP（通用Windows平台） | 是的 | 是的 |
| WinUI3 桌面版 | 是的 | 是的 |
| .NET MAUI | 是的 | 是的 |
| Xamarin 5.0+ （Android Emulator） | 否 | 是（px*） |
注释
在上表中，（px*）指示以像素为单位显示的标尺;所有其他平台在平台单元中显示信息，具体取决于监视器的 DPI。
局限性
XAML Live Preview 的工作原理是捕获应用程序屏幕截图，并使用 PrintWindow 等可用 API。 存在以下限制：
- 如果应用窗口的一部分位于屏幕之外，则该部分可能无法显示 XAML 热重载更改。
- 窗口可以通过使用SetWindowDisplayAffinity 配合 WDA_EXCLUDEFROMCAPTURE 或 DwmSetWindowAttribute 配合 DWMWA_CLOAK 来选择不进行屏幕截图捕获，并且将无法在 XAML Live Preview 中显示。
后续步骤
了解有关 XAML 热重载的详细信息，它与 XAML 实时预览紧密配对。