xamarin.forms second layer of bindable layout does not display binding

Question

I am trying to create a tree similar to this :

I was able to create the first two layers, the parent being a scrollview (displaying the 7 items) the child being a bindable layout, displaying the sublayouts.

But the second sublayer is not binded to. The page just stays blank

 <StackLayout BindableLayout.ItemsSource="{Binding dataPoints}" IsVisible="{Binding dataPointsVisible}">
                                    <BindableLayout.ItemTemplate>
                                        <DataTemplate>
                                            <StackLayout Margin="20,0,0,0">
                                                <StackLayout>
                                                    <Label Text="{Binding identifier}"/>
                                                    <Label Text="{Binding type}"/>
                                                    <StackLayout>
                                                        <Label FontAttributes="Bold" Text="see dataPointSettings ->"/>
                                                        <StackLayout.GestureRecognizers>
                                                            <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
                                                        </StackLayout.GestureRecognizers>
                                                    </StackLayout>
                                                    <StackLayout BackgroundColor="Yellow"
                                                                 HeightRequest="200"
                                                                 BindableLayout.ItemsSource="{Binding dataPointSettings}">
                                                        <BindableLayout.ItemTemplate>
                                                            <DataTemplate>
                                                                <StackLayout BackgroundColor="Green">
                                                                    <Label Text="{Binding alertingEmail}"/>
                                                                </StackLayout>
                                                            </DataTemplate>
                                                        </BindableLayout.ItemTemplate>
                                                    </StackLayout>
                                                </StackLayout>
                                                <BoxView BackgroundColor="Black" HeightRequest="1"/>
                                            </StackLayout>
                                        </DataTemplate>
                                    </BindableLayout.ItemTemplate>
                                </StackLayout>

The "alertingEmail" is not displayed unfortunately.

How can I bind my views inside the second layer of bindable layouts?

Answer 1

You could refer to the code below:

Xaml: The same Xaml as yours.

Model:

public class DataPoints
{
    public int identifier { get; set; }
    public string type { get; set; }
    public bool dataPointsVisible { get; set; }

    public List<DataPointSettings> dataPointSettings { get; set; }
}

public class DataPointSettings
{
    public string alertingEmail { get; set; }
}

ViewModel:

 public class Page9ViewMode
{
    public ObservableCollection<DataPoints> dataPoints { get; set; }
    public Page9ViewMode()
    {
        dataPoints = new ObservableCollection<DataPoints>()
        {
            new DataPoints(){ dataPointsVisible=true, identifier=1, type="type1", dataPointSettings=new List<DataPointSettings>(){ new DataPointSettings() {  alertingEmail="Email1-1"}, new DataPointSettings(){ alertingEmail="Email1-2" } } },
            new DataPoints(){ dataPointsVisible=true, identifier=2, type="type2", dataPointSettings=new List<DataPointSettings>(){ new DataPointSettings() {  alertingEmail="Email2-1"}, new DataPointSettings(){ alertingEmail="Email2-2" } } },
            new DataPoints(){ dataPointsVisible=true, identifier=3, type="type3", dataPointSettings=new List<DataPointSettings>(){ new DataPointSettings() {  alertingEmail="Email3-1"}, new DataPointSettings(){ alertingEmail="Email3-2" } } },
        };
    }
}

Screenshot: