microsoft-ui-xaml
microsoft-ui-xaml copied to clipboard
Discussion: WinUI 3.0 XAML Designer
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
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.
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 🤦♂️
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
@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.
@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.
@ryandemopoulos FYI
@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 :-)
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
@fabiant3 and @codendone FYI
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.
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.
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.
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.
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.
IMO, while the Hot Reload and Live Preview make for flashy demos, they are nice-to-haves. The Designer is a MUST HAVE.
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.
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?
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
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.
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.
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.
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.
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.
Hot Reload as a replacement for a designer makes as much sense as using the build log to replace IntelliSense.
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.
Being a 20th participant, eagerly waiting for Designer view 😇
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.
It is strange that nobody working for Microsoft is participating in this discussion. Why?
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.
- 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?