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