search

dotnet / maui

.NET MAUI is the .NET Multi-platform App UI, a framework for building native device applications spanning mobile, tablet, and desktop.
https://dot.net/maui
MIT License
22.27k stars 1.76k forks source link

`Border` breaks Xaml Live Preview #17822

Closed hansmbakker closed 1 year ago

hansmbakker commented 1 year ago

Description

The XAML Live Preview pane in Visual Studio can be used to inspect a small set of properties of UI elements (like rendersize) by hovering over the wanted element or selecting it in the Live Visual Tree.

The XAML Live Preview pane does update when clicking around through the app, but it stops working after opening a page containing a Border ~having its StrokeShape set to RoundRectangle~ update: the issue is also there without setting the StrokeShape.

When manually selecting the Border element in the Live Visual Tree, the Xamarin Hot Reload output says:

[13:25:10] (MauiApp1) Control Handler for Microsoft.Maui.Controls.Shapes.RoundRectangle is missing, can't render adorner.

It seems the XAML Live Preview visual inspection functionality breaks because of a missing implementation. Also, Hot Reload does not work properly for this element - editing the Background of the Border does not work with Xaml Hot Reload

If a builtin element's missing Handler implementation is breaking Visual Studio's debugging, it comes across as quite brittle...

Steps to Reproduce

  1. Create new Maui app
  2. Create 2 pages. On the second page, include a Border ~with a RoundRectangle shape~ update: the issue is also there without setting the StrokeShape
  3. See that when debugging the app, the Xaml Live Preview inspection on hover breaks when going to the second page
  4. Open the Live Visual Tree and navigate to the Border element to manually select it (hovering over it does not help).
  5. See the error message in the Xamarin Hot Reload output tab in Visual Studio

Link to public reproduction project repository

https://github.com/hansmbakker/bugrepro-xaml-live-preview

Version with bug

8.0.0-rc.1.9171

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

Android, I was not able test on other platforms

Affected platform versions

No response

Did you find any workaround?

No

Relevant log output

[13:25:10]  (MauiApp1) Control Handler for Microsoft.Maui.Controls.Shapes.RoundRectangle is missing, can't render adorner.
hansmbakker commented 1 year ago
image
hansmbakker commented 1 year ago
image
hansmbakker commented 1 year ago

I searched and there are no duplicates of this issue. #7869 looks similar, but it is not the same issue. I do get adorners and debug information on the initial page, but loading a page containing the RoundRectangle breaks the functionality and after that the initial page (that worked before) does not work anymore.

Are there any workarounds to this?

hansmbakker commented 1 year ago

Update

The issue is also there without setting the StrokeShape. It implicitly uses a Rectangle shape then, which also has an issue.

[14:35:54] (MauiApp1) Control Handler for Microsoft.Maui.Controls.Shapes.Rectangle is missing, can't render adorner.

drasticactions commented 1 year ago

Duplicate of https://github.com/dotnet/maui/issues/16919

Shapes do not have Handlers, which would cause a hard crash in your app if you hovered over them (Since XLP would call into the app for the Handler to get the information about the control, and would crash deep in MAUI since shapes were lacking it when it was always assumed it would be there).

We worked around the issue by checking in advance and putting that error in the output to make it clear that the issue is from MAUI, not XLP. So that error is our code working correctly.

Once the above issue is fixed, this should work.