🚨How to Enable UI Tooling for WinUI 3 in VS 16.9 Preview 4

[JeanRoca]

trafficstars

Enable WinUI 3 UI Tooling with Preview Features

Hello Developers!

Today Visual Studio released 16.9 Preview 4. If you have upgraded to this latest version, you will need to enable some of the WinUI 3 tooling using the Preview Features page. In order to enable the tooling features like Live Visual Tree, Live Property Explorer, and Hot Reload please follow the following steps inside Visual Studio:

1. Navigate to the Preview Features page by going to Tools -> Options -> Environment -> Preview Features
2. Click on "Enable UI Debugging Tooling for WinUI 3 Projects"
3. Click on OK

This is it! Please feel free to open an issue if you experience any difficulties.

[get-flat]

I followed all listed steps but unfortunately Hot Reload does not work for me.

• no UI reload
• no app-in toolbar
• live visual tree throws (i.e. on child node selection or "Show just my xaml" etc.) Exception thrown at 0x74FC46D2 in App1.exe: Microsoft C++ exception: ATL::CAtlException at memory location 0x1B27F618. Exception thrown at 0x74FC46D2 in App1.exe: Microsoft C++ exception: ATL::CAtlException at memory location 0x1B27EB40.

(note: Hot Reload works for WPF)

[JeanRoca]

@get-flat thanks for the info, can you open an issue with a minimal repo for the team to investigate? Thank you!

[Fu-Weitao]

Hi, I was following https://docs.microsoft.com/en-us/windows/apps/winui/winui3/#install-winui-3-preview-4, and in 'Install WinUI Preview 4' There's 'Make sure your system has a NuGet package source enabled for nuget.org. For more information, see Common NuGet configurations.' After reading the article it links to, which was updated in 2017 and also 'nugget.org' I found 'latest Nuget releases are delivered as part of Visual Studio updates', and I'm kinda confused whether I should do something to 'Make sure your system has a NuGet package source enabled for nuget.org'. I would really appreciate it if you could help me with this question.

[sketch34]

Once we enable it, how do we access these features in VS? I can't find anywhere that describes where these features are or how to use them.

Update: I found the "Live Visual Tree" and "Live Property Editor". For others here's a screenshot of where to find them (Debug -> Windows). For Hot Reload should I expect changes to the .xaml files to be reflected in the running application? In the Live Property Explorer if I change the Text property to e.g. "A simple Slider XYZ123", I see that reflected in the running application but the contents of the Text property in LPE reverts immediately back to its original value. If I choose "Reset" on that property, the text in the running application disappears.

Very cool features, not sure if they are working properly or not but this is a preview after all. Hope this helps others try it out. It would be really helpful if there was a little more description of these features somewhere and what the expected behavior is.

[JanRajnoha]

I enabled it but hot reload missing panel on running app. I know, it isn't important, but it could be weird. But overall, it looks it is working for first look.

[kmgallahan]

@JeanRoca Do you know if these features are coming out of VS preview anytime soon? Would like to avoid a SxS install if possible.

[JeanRoca]

I enabled it but hot reload missing panel on running app. I know, it isn't important, but it could be weird. But overall, it looks it is working for first look.

We currently do not support the in app toolbar and are unsure of when we can prioritize this. If this is something that you would really like to see please provide feedback on your specific scenario.

@JeanRoca Do you know if these features are coming out of VS preview anytime soon? Would like to avoid a SxS install if possible.

Unfortunately, the earliest we could have them out of VS preview would be 16.10 GA :/

[JanRajnoha]

It's okay without it, but some mention would be nice for other people. Maybe I missed it in docs.

[ichan-akira]

How to enable UI tooling for Win UI 3 in VS 16.10 Preview 3?

I seems cannot access Live Visual Tree and Live Property Explorer.

[ChrisK91]

I'm using the Project Reunion Extension 0.5.7 with Visual Studio 16.10.0. In my setup "Enable UI Debugging Tooling for WinUI 3 Projects" is not available under "Preview features". Is a certain version required, to enable it?

[KenionX]

same issue here VS 16.11.0 Preview 2.0 WinUi3 0.8 Doesnt Hotreload anything, under LTV it say install latest version of VS and WinUI...

[arivoir]

I'm getting this message in Live Visual Tree of Visual Studio Version 16.11.0 Preview 2.0

"The winui 3 version used by the application is not supported for UI Debugging"

Project Reunion 0.8

Anybody else having this problem?

[brinko99]

Anybody else having this problem?

According to the docs, it looks like Live Visual Tree and Hot Reload for ver 0.8 is only available in VS 2019 16.11 Preview 3 (now available).

I find that Live Visual Tree works, but Hot Reload does not work for me. I'm stuck on Win SDK 10.0.18362.0; I'm not sure if that's my trouble.

[arivoir]

The visual tree is appearing in Visual Studio 16.11 preview3

But the tools to pick an element or show the overlying bounds of the element aren't there

[arivoir]

Also, custom controls properties aren't shown in Live Property Explorer

[brinko99]

@arivoir Were you able to see Hot Reload working? It is not working for me with either 0.5+ or 0.8+ or 16.11 Preview 3

[arivoir]

Modifying xaml seems to work, but modifying code gives this error

Error ENC2001 Changes made in project 'FlexGridExplorer' will prevent the debug session from continuing: Changes are not allowed when unmanaged debugging is enabled.

not sure if I'd need to configure something

[josetr]

@arivoir Just change your package debugger type to "Managed Only" as shown below:

[weitzhandler]

In VS 16.11.5, after installing the latest version of WindowsAppSdk, hot reload doesn't work for the generated project. I've tried the solutions above, none of which helped.

[MichaelBakker]

In VS 16.11.5, after installing the latest version of WindowsAppSdk, hot reload doesn't work for the generated project. I've tried the solutions above, none of which helped.

Same here

[kmgallahan]

I'm pretty sure MS dropped hot reload support for VS 2019, and it is only going to be available in VS 2022 since they don't have the time to make it work in both.

[arivoir]

I'm having this problem back in version Microsoft Visual Studio Enterprise 2022 (64-bit) - Preview Version 17.4.0 Preview 2.1

Is it necessary to install any extension?

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 5 days.