.NET MAUI – Enable Debugger-Detached XAML Live Preview in Visual Studio 2022

Not confined to .NET MAUI, the XAML Live Preview functions as an invaluable tool for inspecting the UI and its associated properties in XAML apps overall.

However, it is imperative that the app be connected to the debugger, is it not? Yes, that is prior to the intro of the debugger-detached XAML Live Preview in VS2022, v17.13 Preview 1.0.

Yesterday, during the .NET MAUI session at .NET Conf 2024 (YouTube clip linked), David and Rachel provided an insightful overview of its functionality.

To know about this virtual event, consult this .NET Conf 2024 article and this detailed article outlining the comprehensive features of .NET MAUI 9.

In this article, we will examine in detail how to enable this XAML Live Preview feature and utilize it effectively.

Settings:

Since this feature is presently marked as a preview, it is imperative that it be activated within the Settings prior to usage. Steps detailed below:

Note: The preview and stable versions of Visual Studio can be installed concurrently on the same machine.

• Launch VS2022 v17.13 Preview 1.0
• Open the Options dialog:
  • Navigate to the Tools menu and select the Options menu item
  • Alternatively, use the hotkey: Alt+T+O
• In the Options dialog, enter the keyword xaml into the Search Option text field at the top left of the dialog:
  • Use the hotkey: Ctrl+E to focus on the search field
• Select the Preview Features node under the Environment category
• On the right pane, verify the Enable XAML Live Preview Launch checkbox option

Use Live Preview:

Now it’s time for action. To open the Live Preview tool window, right-click on any XAML node in any view/page and select View Live Preview from the flyout menu. Refer to the screenshot below.

For the Live Preview to function correctly, the app must be running. If it is not, the tool window will display a button titled Launch Previewer as shown in the below screenshot. Click this button to start the app.

Alternatively, you can launch the app without attaching the debugger by using the hotkey Ctrl+F5 or by clicking the outlined Play button in the Debug toolbar. And then select the Show in XAML Live Preview button (video camera icon) in the application toolbar (represented by two stacked lines, click to expand).

Output:

Further Reading:

• XAML Live Preview

Happy coding. Stay connected as we continue to learn and share the experiences from this exciting journey of being a .NET developer.