HotReload doesn't work for DataTemplate property changes in custom controls

[the8thC]

Description

Hello! I've made a simple custom control that has a DataTemplate property. When the template is loaded (Grid, for example), I assign an event handler for PropertyChanged. I also assign the same handler to the Grid in DataTemplate used in ListView.

If I change a DataTemplate property in XAML for my control nothing happens, but for ListView -- the PropertyChanged event is fired. Also, for the custom control event is fired when the property is changed in code behind.

I've attached a video and a link to reproduction project repository.

mAicbdAAwY.mp4

P.S. I'm one of the DevExpress .NET MAUI controls developers, this issue has a normal priority for us and we do not have a workaround. Thank you for your help.

Steps to Reproduce

1. Clone reproduction project repo
2. Build and run
3. While running, in XAML, try to change BackgroundColor property of the Grid in the DataTemplate in the custom control.

Link to public reproduction project repository

https://github.com/the8thC/CustomControlHotReload

Version with bug

6.0.400

Last version that worked well

Unknown/Other

Affected platforms

Android, I was not able test on other platforms

Affected platform versions

Android 12

Did you find any workaround?

No response

Relevant log output

No response

[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 This issue is caused by ListView not being supported for MAUI Xaml Hot Reload. There is already an issue for that (#9640) and I am working on figuring out how to make it work. If you can replicate your issue outside of ListView, please post a repo and I'm more than happy to look at it.

[drasticactions]

I reread the issue. Sorry for that, I should have been more careful. Unless you have a custom ListView control then I don't know how that works for you, because it shouldn't.

In terms of the custom controls, that issue should be fixed with #8947. TL;DR is MAUI was sending the wrong source info for nested controls, linking to the original XAML page rather than its implementation. That meant you could only implement changes inside of the original control XAML page. My change fixed that, and testing your repo it works fine.

I would test this against MAUI Main, or until whenever the next service release is that includes this PR.

[ghost]

Hi @the8thC. We have added the "s/needs-info" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[enisn]

How did you implement ItemTemplate in your control?

[the8thC]

How did you implement ItemTemplate in your control?

https://github.com/the8thC/CustomControlHotReload
You can see here in this repo (which is in the 1st comment)

[the8thC]

@drasticactions I can still reproduce this on 6.0.540

JUs989vUto.mp4

[drasticactions]

Did you try MAUI main?

In the Live Visual Tree for the control, if you click on the XAML Source Icon for a given item, does it go to the MainPage.xaml, or to the original controls XAML? If it goes to that, then it didn't work. If it does, then that's my fix, and you're having another bug.

[the8thC]

It goes to the original controls XAML. So that means it's some other bug?

explorer_B5bsHVO7u5.mp4

[the8thC]

@drasticactions any updates on this?

[taublast]

The main step here would be to issue a doc on how to write custom controls compatible with hotrealod. Need guidelines for developers along with public methods to trigger hot reload.

"This issue is caused by ListView not being supported for MAUI Xaml Hot Reload" - who could fix that besides thoses carrying the knoweldge about hotrelad internals.

[taublast]

Still forced to cut datatemplate, apply hotreload, undo, apply hotreload, to make changes to datatemplate content reflect inside custom control. Sound nice huh. :)
How come hotreload issue was put to backlog? Hotreload is one of the not many maui strengths.

[Zhanglirong-Winnie]

Verified this issue with Visual Studio 17.7.0 Preview 1.0. Can repro on android platform with above project.
CustomControlHotReload-master.zip

[drasticactions]

@taublast @the8thC

The answer for this is IVisualTreeElement. The inner template is missing from the Visual Children list, so it will never be able to be hot reloaded.

public class MyTemplatedControl : VisualElement, IVisualTreeElement
{
    public static readonly BindableProperty ItemTemplateProperty =
        BindableProperty.Create(nameof(ItemTemplate), typeof(DataTemplate), typeof(MyTemplatedControl), null, propertyChanged: OnItemTemplateChanged);

    public DataTemplate ItemTemplate {
        get { return (DataTemplate)GetValue(ItemTemplateProperty); }
        set { SetValue(ItemTemplateProperty, value); }
    }

    public VisualElement Item { get; set; }

    static void OnItemTemplateChanged(BindableObject bindable, object oldValue, object newValue) {
        Console.WriteLine($"ItemTemplate changed from {oldValue} to {newValue}!");
    }

    IReadOnlyList<IVisualTreeElement> IVisualTreeElement.GetVisualChildren()
    {
       return new List<IVisualTreeElement>() { Item };
    }
}

Switch your MyTemplatedControl to this,

And the datatemplate shows up in LVT, and can now be edited.

[drasticactions]

This is a duplicate of #10390. I am working on documenting IVisualTreeElement to help expose these functions for use cases like this, and this is a great example of where not implementing it can cause problems. It may be worth thinking of better ways to expose children for DataTemplate elements at a generic MAUI level too so you wouldn't have to implement this (@PureWeen).

I am going to close this issue. If there are other use cases you're hitting then try implementing IVisualTreeElement, and if that doesn't work then file a new bug.