[Custom Control] HotReload doesn't work for newly added nested items

[the8thC]

Description

Continuation of https://github.com/dotnet/maui/issues/10390, but I've implemented IVisualTreeElement. Only now the HotReload works for items defined in XAML at launch, but doesn't work for items added via HotReload. I've noticed the IReadOnlyList<IVisualTreeElement> IVisualTreeElement.GetVisualChildren() method is not called when adding new nested items, maybe I should handle collection changes somehow so it's called, @PureWeen?

https://user-images.githubusercontent.com/21204523/199957266-18de9468-d27d-4c95-beed-68c0b97377a5.mov

Steps to Reproduce

Watch the video

Link to public reproduction project repository

https://github.com/the8thC/ElementVisuaElementHotReload

Version with bug

7.0 Release Candidate 2

Last version that worked well

Unknown/Other

Affected platforms

iOS, Android, I was not able test on other platforms

Affected platform versions

iOS 16, Android API 32

Did you find any workaround?

Remove and add the whole parent control and HotReload works for all items

Relevant log output

No response

[jfversluis]

@drasticactions any ideas here maybe?

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[drasticactions]

@the8thC If you try adding new child elements into the parent control via C# Code Behind (Ex. Create a button that will add a new element when clicked), does it do the same thing?

CC @etvorun, do you see anything in their underlying controls in their repro that would prohibit adding nested elements from working?

[the8thC]

@drasticactions If I add the item in code-behind I can't edit it's XAML to check for HotReload, so I can't really test that. But the IVisualTreeElement.GetVisualChildren() isn't called when I add items via button clicked event

https://user-images.githubusercontent.com/21204523/201051556-2766fda6-995b-4b2b-ba8b-be9079f0e7ce.mov

[drasticactions]

That's fine, it was to see if GetVisualChildren would be called.

If that's not being called, then, most likely, VisualDiagnostics isn't seeing that new item being added to the children, so it's not firing the events internally to show that the children were added at all. That means Hot Reload can't work, since either the control or the base MAUI controls the control is based on (if it is) is not tracking the child items correctly.

For your control, try adding VisualDiagnostics.OnChildAdded(this, element); (as seen here)

This is normally done by the base controls within MAUI. If you make your own and VisualDiagnostics.OnChildAdded and OnChildRemoved are not being called, you need to call it for Hot Reload to work.

[the8thC]

@drasticactions, it works this way, thanks! The issue can be closed

[drasticactions]

Before we close it, we should probably consider documenting this somewhere (Creating custom controls and writing IVisualTreeElement overrides), so others don't get bit by the same thing. @Redth Is this possible to have this done? Maybe for the backlog?

[PureWeen]

Ideally users creating custom controls wouldn't always have to know about IVisualTreeElement and we'd have a way to wire into LogicalChildren https://github.com/dotnet/maui/issues/11528

[Redth]

@davidbritch are you able to assist in adding some conceptual docs around LogicalChildren API's?

[davidbritch]

@Redth https://github.com/dotnet/docs-maui/issues/1216

[Redth]

Thanks!