Discussion: WinUI 3.0 XAML Designer

[GeorgeKerwood]

Please forgive the faux pas if readdressing closed issues is not the "done thing", however with the release of Windows App SDK 1.0.0 I was surprised to still not see any timeline or discussion on this point. With reference to #3656 and #3644, Visual Studio XAML Designer does not support WinUI 3.0.

Respectfully, this is a crippling barrier to entry which for most intents and purposes renders the framework unadoptable.

I would be grateful to hear if there were plans to support graphical xaml design within VS, Blend or equivalent and if so on what timeline? Interim alternatives or "work arounds" would also be very helpful.

Kind Regards

[kmgallahan]

IMO, Hot Reload and Live Visual Tree are fine - especially considering the effort/hours needed to support a separate designer, while also trying to make any meaningful progress on the ~2100 open issues.

The team also mentioned this is the direction that want to go instead of making a designer, but I can't remember exactly where this was stated.

[Symbai]

and if so on what timeline?

In the past they said a designer is not planned for 1.0 and not planned for the near future. At the current broken state of WinUI I would also rather focus them on fixing bugs. I mean you cannot even set a window title without using workarounds 🤦‍♂️

[GeorgeKerwood]

IMO, Hot Reload and Live Visual Tree are fine.

@kmgallahan I'd be inclined to agree with you however, so far I've found neither to be supported by the "WinUI 3 in UWP" or "WinUI 3 in Desktop" project types provided by the Windows App SDK Extension. I'd imagine you've been succeeding with with WinUI 2 in UWP Apps? Am I missing something? Thanks

[kmgallahan]

@GeorgeKerwood I won't try to identify all the versions and periods of time where Live Visual Tree & Hot Reload have and haven't worked, but as of right now using the latest version of VS 2019 with WindowsAppSDK 1.0.0-preview1 they are both functioning in a WinUI 3 Desktop / Win32 app. That includes hot reload for both XAML and CS (while debugging managed code only).

My point was more to say that since those are the things the team is investing time into, I'm fine with using them going forward.

[GeorgeKerwood]

@kmgallahan Thank you for the input. Updating to the very latest VS 2019 brought both Hot Reload and LVT to life. I agree that together they serve the graphic design purpose for the interim.

The team also mentioned this is the direction that want to go instead of making a designer, but I can't remember exactly where this was stated.

Personally, I'd still like to see a designer in the long term since I find it a more time efficient way of generating xaml, however I can see both sides.

[StephenLPeters]

@ryandemopoulos FYI

[MEK3DK]

@kmgallahan Hot reload still has issues in WinUI 3, like this one: #5944

@GeorgeKerwood I agree that in order to enable a large number of developers (especially people who just try WinUI 3 or people who are not proffesional developers) to use WinUI 3 the designer is needed. However as @Symbai mentions even basic stuff does not work atm so something non-critical is a long way off. You can also not set width and heigth of a window without workarounds :-)

[sonnemaf]

I think not having a Designer in Visual Studio 2022 and Blend for Visual Studio is a big mistake. It will withhold WPF and Windows Forms developers to switch to WinUI3. Having Xaml Hot Reload and Xaml Live Preview is not an alternative. I do 95% of my XAML development (WPF and UWP) in the XAML Code Editor. But I can't live without the 5% I do in the Designer. The productivity loss I will have is enormous. Let me give you a few examples of what I use the designer for and what I can't do in the XAML Code editor. Please implement the Designer for WinUI3 soon. It is even not on the planboard, not even in the backlog. I have submitted a new idea for it. Hopefully it will be picked-up soon so others can upvote it.

Add/Delete/Move Columns and Rows to/from a Grid

In the Designer you can easily Add/Delete/Move Columns and Rows to/from a Grid. If you do so it will update the Column/Row attached properties of all elements inside the Grid. You don't want to do this manually. It is a real productivity boost.

It would really be nice if the XAML Designer for UWP would display the RowSpacing and ColumnSpacing properties of a Grid and the Spacing of a StackPanel.

Create Storyboards

You can easily create Storyboards in Blend for Visual Studio using a "recorder". Something you can't do in Visual Studio (which I find stupid). The Objects and Timeline (aka Document Outline Window) has a special '+' button for it.

The recorder let's you create KeyFrames and easily select easing functions for it.

You don't want to create a storyboard in the XAML Code Editor by hand. A Storyboard is often very large piece of XAML which is very difficult to write by hand, especially the begin and end times of all keyframes.

Visual States

I can easily create Visual States using Blend for Visual Studio. For each Visual State I can add Triggers, Setters and Storyboards. I can even record the Storyboard and use transitions.

You don't want to create Visual States in the XAML Code Editor by hand. Especially the ones which have Storyboards. Most of the Visual States in control Templates are still using Storyboards, not the 'new' Setters.

Add Behaviors

You can add Behaviors in Blend for Visual Studio using the Assets Window. Something you can't do in Visual Studio (which I find also stupid). You get a visual feedback when a Behavior can or can't be dropped on an element. You can als

The Property Window of Visual Studio just doesn't show all properties of an Behavior. For example I can't select the Storyboard for this ControlStoryboardAction. Something I can do in the Designer of Blend.

You don't want to add Behaviors in the XAML Code Editor by hand.

XAML Designer Suggested Actions

They work great. They are new. Why abandon them?

Edit Template and Additional Templates

Only in the designer you can easily create templates. I don't know how else I would create one. I never do this in the XAML Code Editor.

Many small features

Setting the Order, Alignment and Layout (most often Reset All). You don't want to set the z-order manually.

Add/Edit Flyouts

Show Designer in different resolutions, scaling and orientation

XAML Design Time Data https://docs.microsoft.com/en-us/visualstudio/xaml-tools/xaml-designtime-data?view=vs-2022

[StephenLPeters]

@fabiant3 and @codendone FYI

[jschroedl]

I'm with @sonnemaf on this one. I use Blend for adding Behaviors, cloning and customizing themes and templates for controls. I would also want to manage visual states if WinUI has those. So much of what I know now re: WPF has come via the designer and blend. I would make changes and look at what happened to the XAML. I am planning the approach for migrating a WPF-based application to WinUI and had expected that there would be designer and/or Blend support for that XAML as well. It's a shock that it's not there.

XAML hot reload does not work for my app btw as it contains some C++/CLI code for interop with a large body of native code. The hot reload does not work with my project because of the lack of support for /clr code. ie. Edit and Continue is not supported for my project.

[BarcodeResource]

Our team is porting an existing UWP app to WinUI3 targeting Windows 11. We definitely appreciate having Blend support as soon a possible. The rounded corner elements in Windows 11 do require us to make quite some adjustments to the element Styles, specifically the the Blend -> Element -> Edit Template -> Edit a Copy capabilities.

[mdtauk]

Microsoft should look to its Android Studio and XCode contemporaries, with Android, iOS, and macOS designers for good UI designers/previewers - rather than to what is currently provided to UWP/WPF/WinForms.

There is a rich surface here that could be made more designer friendly, Via Blend - which can be handed off to the code teams in Visual Studio.

[sonnemaf]

Microsoft should look to its Android Studio and XCode contemporaries, with Android, iOS, and macOS designers for good UI designers/previewers - rather than to what is currently provided to UWP/WPF/WinForms.

There is a rich surface here that could be made more designer friendly, Via Blend - which can be handed off to the code teams in Visual Studio.

A designer with better features would be perfect. But also take more time. Maybe give us first the UWP designer and then add features to it.

[HEIC-to-JPEG-Dev]

I'd add that hot reload and live visual tree are not a replacement as they require the app to be compiled, launchable. If I'm working on an app, I have to ensure all code compiles and the app launches to be able to use the XAML live preview. I don't want to have to wait for other paths to be completed first. The "you have to wait for the backend code to be completed before you can build the view" is not a good experience.

[devdelimited]

IMO, while the Hot Reload and Live Preview make for flashy demos, they are nice-to-haves. The Designer is a MUST HAVE.

[HydrogenC]

Yep. A designer is crucial for creating control templates or story boards, as well as setting properties. It is a MUST unless a better alternative for these shows up. Besides, having no xaml designer makes Blend for Visual Studio a useless application.

[sunsewingmachine]

I am really unable to believe that this is a bug. XAML Designer is an essential part of app development. Still couldn't believe it. Is it a bug or intended behavior? If it is a bug, how can we developers trust the other functionalities of WinUI 3? Please show us a clear path, UWP or WinUI, or something else?

[kmgallahan]

I am really unable to believe that this is a bug.

Who said not spending the time to create a tool was a bug? They've clearly stated on multiple occasions that they are investing in Hot Reload over a dedicated designer at this time.

Please show us a clear path, UWP or WinUI, or something else?

https://github.com/microsoft/WindowsAppSDK/discussions/1615

[sunsewingmachine]

They've clearly stated on multiple occasions that they are investing in Hot Reload over a dedicated designer at this time.

Okay. I agree, sorry for my misunderstanding. Though, we do love to have a designer for the same reasons others have mentioned.

[tuggernuts]

IMO, while the Hot Reload and Live Preview make for flashy demos, they are nice-to-haves. The Designer is a MUST HAVE.

Can't agree with this more. Hot Reload is great when I'm fine tuning the design. But from a blank page? Designer is how things get built. Unbelievable that this UI was released without one.

[calloncampbell]

I've developed in WinForms, WPF and UWP and I'm finding it hard to jump into WinUI 3. This is supposed to be the next generation UI framework and at every step, there seems to be something missing...no designer, lack of demos, sparse docs and even the launch was non-eventful. I want WinUI to succeed but right now it's still very much a "preview".

Hot Reload is nice when it works but I'm curious why the designer in VS and Blend could not be updated to support WinUI when it's done so since WPF. It feels like the design-time experience has been dumbed down.

[Rybasum]

I write 100% of XAML by hand, but I very much need to see the result rendered somewhere as I type, before running the app! (yes, live preview is great, thank you). Please, give us even a rudimentary initial version of Designer that just renders my XAML.

[nick-911]

I wanted to create a new app and jump onto WinUI; but no designer is just plain crazy. ok, it can be learned and probably will get used to it more or less but it's much more productive to design a complex ui in a visual designer than having to edit the xaml the whole time. :-( Adding a window with just a textbox and button, so far that will be easy and no issue but real-world applications don't have 2 basic controls on them!

And this isn't a bug but just a basic requirement.

[topanoe]

Hot Reload as a replacement for a designer makes as much sense as using the build log to replace IntelliSense.

[Cyp9715]

It's pathetic, even the basic functions that must be there don't work. If I don't intend to add a designer in the future, I won't use WinUI 3.0.

[New-dev0]

Being a 20th participant, eagerly waiting for Designer view 😇

[Einztein]

The necessity of a Visual UI Designer for generating codes of UI Implementation is no need to discuss more. :lipstick: Note that there are also professional artists in a UI group who don't know languages but power up the products no less than programmers. They need to collaborate with others. :technologist: Everytime Microsoft promote developers to upgrading from other techs like mfc or uwp to WinUI3, a full developing experience should be provided honestly.

[sonnemaf]

It is strange that nobody working for Microsoft is participating in this discussion. Why?

[chausner]

I write 100% of XAML by hand, but I very much need to see the result rendered somewhere as I type, before running the app!

It's exactly the same for me. WinForms was a "designer-first" framework, while WPF and all later XAML frameworks started to become "markup-first" frameworks. I've never really used the designer for arranging or adding elements but it is very useful to see a visual representation while writing XAML. The only other feature I used the designer for, is editing a copy of a control template.

I consider Hot Reload a workaround at best because

• it requires that the app compiles
• it only supports basic changes in XAML. As soon as you make some more advanced changes, Hot Reload requires you to recompile and restart the app.

[togetogejizou]

• Hot Reload: A little convenient if you have it, no trouble if you don't.
• Designer: I need it.

I feel that the priority of development is wrong.

Will Hot Reload be able to display screens in the middle of creation (Error if built) like Designer in the future?

[olifink]

I'm confused now - why is Microsoft clearly advertising a Visual Studio XAML Designer for the Windows App SDK (aka WinUI 3) and we're here discussing if there is a need for it?!

https://developer.microsoft.com/en-us/windows/windows-for-developers/

[marb2000]

I'm confused now - why is Microsoft clearly advertising a Visual Studio XAML Designer for the Windows App SDK (aka WinUI 3) and we're here discussing if there is a need for it?!

https://developer.microsoft.com/en-us/windows/windows-for-developers/

Agreed, this marketing picture is confusing. I will reach out to these folks to fix it.

[marb2000]

Also I believe this thread requires an update about where we are with the XAML Designer.

It could seem that bringing the XAML designer to WinUI3 is as simple as making the UWP designer work in WinUI3, but unfortunately, this is not the case. We need to re-implement all the integration points and add a way to render the WinUI 3 controls in an external host in a designer fashion way. In simple words, we can't reuse what we have in UWP. The designer is a multi-release effort that requires work in multiple teams and areas, e.g., WinUI3 and Visual Studio. Also, this feature competes in resources and dependencies with other fundamental features like multi-window support, improving performance, media player, etc., so it was pushed out from 1.1 and likely for 1.2.

Being said that, this doesn't mean we think WinUI3 shouldn't have a XAML designer. I believe that a XAML designer is a great tool that brings a lot of value. The lack of a XAML designer increased the learning curve of XAML. With a designer, developers can drag&drop and edit controls without knowing XAML and learning how the designer applies properties in XAML markup. Today, we observed that new developers need to go back and forward between docs, samples like the XAML Controls Gallery and Visual Studio. Hot Reload helps when users already know XAML and write markup code while the app is running, so they can see the immediate update on the app (without stopping it). But I agree that it doesn't help as much as the designer when they don't know the XAML syntax. In addition to the learning curve, there are gaps in tools like exporting styles from the WinUI styles dictionary to the app. In the WPF and UWP designer, Visual Studio has a button - in WinUI, there is nothing. This gap is orthogonal to the lack of a designer and it can be solved without the need of a designer, for example, just implementing it on the XAML markup editor (this is not a proposal, just an idea to brainstorm).

But as I said before, in the v1.x release, WinUI 3 focuses on fundamentals: reliability, performance, and pieces of the core that block other features' progress. For example, today, you can build on the top of WinUI3 DataGrid controls (like the one created on the Windows Community Toolkit). Still, you can't instantiate multiple visual trees hosted by different Hwnds of the same process (multi-window and XAML Islands scenarios). There is no workaround. We need to address this kind of fundamentals first over other feature requests like the designer.

[sonnemaf]

Thank you @marb2000 for your comment. This is very clear and I fully understand this. What I don't understand is why the XAML designer is not on the Product Roadmap. Just put it in the Backlog section. Then we (WinUI Enthusiasts) know that you are still considering it but just not for v1.x. I can live with having to wait for a v2 (2023) or even a v3 (2024). Just don't tell us it will never happen because we have Hot Reload. That was bad communication. I hope you will fix it.

[jp-weber]

[...] But as I said before, in the v1.x release, WinUI 3 focuses on fundamentals: reliability, performance, and pieces of the core that block other features' progress. [...]. We need to address this kind of fundamentals first over other feature requests like the designer.

What I don't understand in the whole situation is, why UWP is not upgraded to .NET 5 or greater. Currently you have the choice of using WinUI3 as an early adopter with a few new features, but a lot that doesn't work yet, or using UWP, where the core is ancient and you cannot use new libraries that use .NETStandard2.1 oder .NET5+.

The fact that the designer is not there at the moment is not nice, but it is not a break, but the situation with UWP and WinUI3 as a whole was simply a wrong strategy and simply frustrating.

[kmgallahan]

@jp-weber UWP uses .NET Native. Development on .NET Native stopped ages ago. .NET 5 / 6 don't have a production ready AOT compiler. No indication from the .NET team(s) that they want to make newer versions of .NET support UWP either. And UWP is essentially deprecated. https://github.com/microsoft/WindowsAppSDK/discussions/1615

.NET 5/6 will not be coming to UWP project types

[pjmlp]

Don't forget that hot reload is useless for C++ developers when the best you can give use is an OLE 2.0 like development experience for IDL files, in order to generate any C++ code behind for XAML.

Please stop adverting WinUI as a modern development experience for C++ developers, when the anging MFC provides a much more productive workflow.

Also not only we got C++/CX deprecated without replacement with C++/WinRT, now Microsoft teams are throwing WIL into the mix, I guess Microsoft cannot get enough C++ wrapping libraries for COM.

[JWMikesell]

I agree that not having a designer makes it a non-starter. It's just too hard to design complex binding and UI's without it. Microsoft really needs to rethink this decision.

[MostlyWhat]

This really makes it hard to prototype and experiment for beginners or intermediates like me. Unless you can visualise XAML in your head or try really hard to implement it with guessing. A possible workaround might be using WinUI 2 to design and copy the code over.

[HavenDV]

A possible workaround might be using WinUI 2 to design and copy the code over.

You can use Shared Project and two platforms - UWP with WinUI 2.8 and WinUI 3 app. This will allow you to use the designer.

I have a stub article about this, you can use some of the tricks from it: https://github.com/HavenDV/HavenDV/blob/main/articles/winui/visual-designer.md

P.S. You can contact me with any questions about this on Discord(Haven#5924) or email(havendv@gmail.com). I will answer and supplement the article with them

But I also recommend trying Hot Reload, maybe that will be enough for you

[ColinM9991]

Sorry, but this thread is hilarious.

I can't believe WinUI3 has been shipped as a GUI framework with no visual designer that allows us to preview our GUIs. What a baffling decision to omit such a fundamental part of UI and UX design. Even good old resource editing allowed you to preview your changes on the fly. Maybe it's better to stick with good old Win32.

[jp-weber]

The designer is now planned for a future update, see the roadmap: https://github.com/microsoft/microsoft-ui-xaml/blob/main/docs/roadmap.md

[pjmlp]

Thing is, after Windows 8 rewrite, Windows 8.1 UAP rewrite, Windows 10 UWP rewrite, Windows One Core, dropping .NET Native and C++/CX, a WinUI 3.0 ages behind what WPF was capable to do in .NET 3.5, I would take those roadmaps with lot of skepticism.

[dgellow]

The designer is now planned for a future update, see the roadmap

The designer is a "stretch goal" in the column "Planned for a future update". That doesn't sound like something that would actually be planned any time soon. More like "we may look into it in the future once we have the capacity to do so", which is already the stance the WinUI team expressed multiple times in the past. So nothing really new here.

But at least it is now mentioned, I guess that's better than being ignored.

[ColinM9991]

The designer is now planned for a future update, see the roadmap

The designer is a "stretch goal" in the column "Planned for a future update". That doesn't sound like something that would actually be planned any time soon. More like "we may look into it in the future once we have the capacity to do so", which is already the stance the WinUI team expressed multiple times in the past. So nothing really new here.

But at least it is now mentioned, I guess that's better than being ignored.

Personally, I'm choosing C++/WinRT for this reason. It's on the roadmap, which is good, but pegged for some time down the road.

WinUI3 will suffer the fate of many previous projects if it doesn't have a designer. Adoption won't be as high.

[pjmlp]

@ColinM9991 When going with C++ do yourself a favour and pick either Qt or C++ Builder instead.

Get C++ RAD productivity today, instead of what is being promised since C++/CX was deprecated 5 years ago.

[ColinM9991]

@ColinM9991 When going with C++ do yourself a favour and pick either Qt or C++ Builder instead.

Get C++ RAD productivity today, instead of what is being promised since C++/CX was deprecated 5 years ago.

Thanks, I'll look into these. I have decided to learn C++, moving from years of C#, and need a good GUI designer to get hands on with some personal projects. C++ Builder looks like a good choice!

[kmilch]

I thought I had a fast computer until I tried compiling the demo WINUI3 'click me'. Fourty five seconds to build to look at a XAML change is silly. I agree with the Win32 guy.

[daoluong]

Hat off to any one who created WinUI 3 control gallery. Did he made it without monitor? luckily WPF still work with .net6. So I will stick with it for next few years.

[ryanackley]

Visual designers are hard but it''s one of the reasons Microsoft developer tools and Windows as a platform has been so successful over the last 30 years. There is a rich history of very solid visual designers that are supported over decades that span different platforms (web, desktop, mobile). Can't think of any other company that has been able to pull that off.