VS 2022 Preview not showing the XAML designer

Question

I've just installed VS 2022 preview to use Maui but there seems no way to see a designer view of the XAML, I want to drag and drop controls onto the page but all I get is an ancient looking XAML text view.

Rodi

Does this answer your question? xaml designer or previewer is not showing – Philipphilipa

No, it can't be the answer, because that would mean MS removed the ability to design the UI, you can't design a UI using hot reload that would be madness. The answer can't be to use the text editor as that's like jumping back in time 30 years. – Rodi

But it was working in some previous version of VS preview. My god! – Buckinghamshire

Following various threads on this: yes the designer is gone for MAUI and WinUI. any idea on where to start a petition to get it back? – Bindweed

Also see XAML Live Preview, which is now supported by Maui. Its a VS window based on Hot Reload. It still isn’t a drag-and-drop visual designer. Maybe the plan is to become that? I see rulers. – Rumal

Vote for XAML Designer to be added to MAUI here: developercommunity.visualstudio.com/t/… – Perennate

Answer 1

Visual Studio has removed the XAML designer. For now, there is no official plan to readd it.

But Visual Studio support Hot Reload to modify your apps managed source code while the application is running, without the need to manually pause or hit a breakpoint. You could preview the view at runtime when you change the UI. For more details, please check the blog. https://devblogs.microsoft.com/dotnet/introducing-net-hot-reload/

Like Cfun said, you could use live visual tree as well. It shows a tree view of the UI elements of your running Xamarin.Forms application. https://learn.microsoft.com/en-us/xamarin/xamarin-forms/xaml/live-visual-tree

Scoreboard

"Visual Studio has removed the XAML designer" -Thats a lie, in WPF, i still have the XAML Designer. – Jethro

there is a MAUI example project that has multiple different UI projects. I tried the designer in each project type. designer works in these projects (wpf, uwp). designer does not work in these projects (winui, maui, avalonia, xmarian). this was an unexpected "gotcha" when migrating from winforms apps. the usual microsoft dance; one step forward, ten steps back. – Bindweed

Wendy - Please see developercommunity.visualstudio.com/t/… to understand why many of us will not view this as an acceptable solution / workaround. – Suprarenal

@Ikujala: FWIW: Some history. Xamarin.Forms has existed since 2014, and never had a visual designer. Recall that it was not developed at Microsoft; the engineers didn’t have access to Visual Studio’s WPF visual designer source code. And it was primarily cross-compilation to Android/iOS, not native Windows. Its not like someone decided to "remove visual design". I don’t know why this never became a priority in the cleanup of XF to become Maui, but StackOverflow is not the place to try to get it fixed. Open an issue at github.com/dotnet/maui/issues. – Rumal

Hmm. I just saw that you also tested WinUI, and its missing from that also. Even though it worked for UWP. That’s more surprising to me, since WinUI 3 is an evolution of UWP’s WinUI 2. Logically, it should exist for WinUI 3. And then that could be used as basis for Maui’s designer when targetting Windows. – Rumal

I'm looking at Visual Studio 2022 settings and there is an option "Enable XAML Designer". Not that it seems to work. – Lenardlenci

@Rumal Before Xamarin Forms, Xamarin did actually have a designer. Instead of XAML designer, it used a somewhat-similar "AXML" format. See learn.microsoft.com/en-us/xamarin/android/user-interface/… – Annunciator

Answer 2

For a WPF dotnet6 project, the XAML designer can be enabled here:

Don't know why it's disabled by default.

Doting

The question was for MAUI, which does not show XAML Designer even when enabled. But this is good information if you are searching for WPF and happen across this post. – Leukemia

Answer 3

Try to use context menu of *.xaml file and open it in Xaml designer ("Open With..."), if it works you can set that behaviour as default.

Rewire

I've never seen this work in Windows but some years ago I noticed the visual designer worked on OS.X – Lenardlenci

Answer 4

I had Resharper extension installed, and the Performance Guide for Resharper had enabled an option where it disables Xaml Designer. What i did to fix it: Extensions->Resharper->Options: Enviroment->Performance Guide: Visual Studio preferences affecting performance: Disable XAML designer: Set it to ignore.

Apply and Save these options, then go to Tools-Options: XAML Designer and check Enable XAML Designer (requires restart of Visual Studio).

also set other options here to your liking, then click ok, and restart visual studio. after restart you should now have the XAML Designer.

I have tested on WPF .Net8 VS version 17.9.5

Thompson

That only works for WPF. WinUI & MAUI are it's replacement. Now instead of taking 5 minutes to design a form, it takes an hour! Rapid Application Development is dead! – Roseboro

Answer 5

This is the best I can figure out:

1. Run the code
2. Debug > Windows > Live Visual Tree
3. Right-click <App> (for example) > View Source
4. View > Toolbox
5. Drag a control from the Toolbox on to the source code
6. Monitor how it looks in either:
   1. Hot Reload (in the running code)
   2. Debug > Windows > XAML Live Preview

Update: This worked for me one single time whilst writing this answer: I was able to drag a slider control on to the XAML and I saw it immediately update in Hot Reload... but now my Toolbox says "No usable controls in this group" whenever the code is running :(

I'll leave this answer here in case it helps anyone else.

Perennate