Custom controls for complex type properties must be wrapped with layout to work

[suugbut]

Description

For illustration, use the following minimal code.

public class Address
{
    public string City { get; set; } = string.Empty;
}

public class Person
{
    public string Name { get; set; } = string.Empty;
    public Address Address { get; set; } = null!;
}

I have two custom controls: PersonControl (working) and AddressControl (not working).

<ContentView ...
             xmlns:loc="clr-namespace:Bug"
             x:Class="Bug.PersonControl"
             x:DataType="{x:Type loc:Person}"
             >
    <HorizontalStackLayout Spacing="20">
        <Label Text="{Binding Name}"
               TextColor="Green" />
        <Label Text="{Binding Address.City}"
               TextColor="Blue" />
    </HorizontalStackLayout>
</ContentView>

<ContentView ...
             xmlns:loc="clr-namespace:Bug"
             x:Class="Bug.AddressControl"
             x:DataType="loc:Address">
    <Label Text="{Binding City}"
           TextColor="Red" />
</ContentView>

I skip their corresponding code behind files because they only contain a constructor with InitializeComponent() calls.

These controls are used in MainPage.

Using PersonControl (working)

<CollectionView>
    <CollectionView.ItemsSource>
        <x:Array Type="{x:Type loc:Person}">
            <loc:Person Name="Antonio"
                        Address="{loc:Address City='Alaska'}" />
            <loc:Person Name="Bobby"
                        Address="{loc:Address City='Borneo'}" />
        </x:Array>
    </CollectionView.ItemsSource>
    <CollectionView.ItemTemplate>
        <DataTemplate x:DataType="loc:Person">
            <loc:PersonControl />
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

Using AddressControl (not working)

<CollectionView>
    <CollectionView.ItemsSource>
        <x:Array Type="{x:Type loc:Person}">
            <loc:Person Name="Antonio"
                        Address="{loc:Address City='Alaska'}" />
            <loc:Person Name="Bobby"
                        Address="{loc:Address City='Borneo'}" />
        </x:Array>
    </CollectionView.ItemsSource>
    <CollectionView.ItemTemplate>
        <DataTemplate x:DataType="loc:Person">
            <loc:AddressControl BindingContext="{Binding Address}" />
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

Steps to Reproduce

1. Create Maui project from the default template.
2. Replace the default code in MainPage.xaml with my code given above. Also remove the irrelevant code in MainPage.xaml.cs.
3. Create Person and Address models and custom controls PersonControl and AddressControl as shown above.

Version with bug

Microsoft.Maui.Controls and Microsoft.Maui.Controls.Compatibility version 8.0.1 and 8.0.91. I did not test other version between these two boundaries.

Is this a regression from previous behavior?

Not sure because I did not test for other versions 6 and 7.

Last version that worked well

Unknown/Other

Affected platforms

Windows and Android. I was not able test on other platforms

Affected platform versions

Did you find any workaround?

Wrap the AddressControl with a layout control, for example VerticalStackLayout.

<CollectionView>
    <CollectionView.ItemsSource>
        <x:Array Type="{x:Type loc:Person}">
            <loc:Person Name="Antonio"
                        Address="{loc:Address City='Alaska'}" />
            <loc:Person Name="Bobby"
                        Address="{loc:Address City='Borneo'}" />
        </x:Array>
    </CollectionView.ItemsSource>
    <CollectionView.ItemTemplate>
        <DataTemplate x:DataType="loc:Person">
            <VerticalStackLayout>
               <loc:AddressControl BindingContext="{Binding Address}" />
            </VerticalStackLayout>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

Relevant log output

No response

[StephaneDelcroix]

looks like a layout issue, could you please add a small repro project for us to work on ? thanks

[suugbut]

@StephaneDelcroix Thank you. Here is the repo: https://github.com/suugbut/CustomControlBugReport

The affected platforms that I have tested: Windows and Android.

[Zhanglirong-Winnie]

This issue has been verified using Visual Studio 17.12.0 Preview 3(8.0.92& 8.0.80 & 8.0.3 &7.0.101). Can repro this issue on android and windows platforms.