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

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: