Xamarin Forms: How to set a list of items as the Expander Child?

Question

I am using an Expander for showing units and chapters of a book. I am able to show the units as the Expander.Header, but the chapters under the uni

Answer 1

Use Bindable layout inside Expander.ContentTemplate:

<Expander.ContentTemplate>
    <DataTemplate>
       <StackLayout BindableLayout.ItemsSource="{Binding contentList,Mode=TwoWay}">
            <BindableLayout.ItemTemplate>
                <DataTemplate>
                    <Label Text={Binding title}/>
                </DataTemplate>
            </BindableLayout.ItemTemplate>
        </StackLayout>
    </DataTemplate>
</Expander.ContentTemplate>
                      

Hope this works!

Answer 2

There are two mistaken in your code .

1. Incorrect binding path .

2. Miss BindableLayout.ItemTemplate inside the inner stackLayout .

Replace your xaml with

<StackLayout Orientation="Vertical">

    <Button
        Text="click Me"
        IsVisible="False"
        BackgroundColor="Red"
        x:Name="button"
        Clicked="ButtonClick"/>

    <StackLayout x:Name="expanderLayout" IsVisible="False" BindableLayout.ItemsSource="{Binding  AllItems,Mode=TwoWay}">
        <BindableLayout.ItemTemplate>
            <DataTemplate>
                <Expander
                        ExpandAnimationEasing="{x:Static Easing.CubicIn}"
                        ExpandAnimationLength="500"
                        CollapseAnimationEasing="{x:Static Easing.CubicOut}"
                        CollapseAnimationLength="500">
                    <Expander.Header>
                        <Frame 
                                Padding="2"
                                Margin="5"
                                HasShadow="False"
                                BorderColor="#fdeec7"
                                CornerRadius="0">

                            <StackLayout
                                    HorizontalOptions="FillAndExpand"
                                    VerticalOptions="FillAndExpand"
                                    Orientation="Horizontal">

                                <Label 
                                        Text="{Binding unit.title}"
                                        TextColor="Black"
                                        HorizontalOptions="Start" 
                                        HorizontalTextAlignment="Start"
                                        VerticalTextAlignment="Center"
                                        VerticalOptions="CenterAndExpand">
                                    <Label.FontSize>
                                        <OnIdiom x:TypeArguments="x:Double">
                                            <OnIdiom.Phone>18</OnIdiom.Phone>
                                            <OnIdiom.Tablet>36</OnIdiom.Tablet>
                                            <OnIdiom.Desktop>18</OnIdiom.Desktop>
                                        </OnIdiom>
                                    </Label.FontSize>
                                </Label>

                                <StackLayout.Margin>
                                    <OnIdiom x:TypeArguments="Thickness">
                                        <OnIdiom.Phone>5</OnIdiom.Phone>
                                        <OnIdiom.Tablet>8</OnIdiom.Tablet>
                                        <OnIdiom.Desktop>5</OnIdiom.Desktop>
                                    </OnIdiom>
                                </StackLayout.Margin>
                                <StackLayout.Padding>
                                    <OnIdiom x:TypeArguments="Thickness">
                                        <OnIdiom.Phone>5</OnIdiom.Phone>
                                        <OnIdiom.Tablet>8</OnIdiom.Tablet>
                                        <OnIdiom.Desktop>5</OnIdiom.Desktop>
                                    </OnIdiom>
                                </StackLayout.Padding>
                            </StackLayout>
                        </Frame>
                    </Expander.Header>
                    <Expander.ContentTemplate>
                        <DataTemplate>
                            <StackLayout BindableLayout.ItemsSource="{Binding contentList,Mode=TwoWay}">
                                <BindableLayout.ItemTemplate>
                                    <DataTemplate>
                                    <StackLayout 
                                Orientation="Horizontal">

                                        <Label
                                        HorizontalOptions="Start"
                                        Text="{Binding title}"
                                        VerticalOptions="CenterAndExpand"
                                        TextColor="Black">
                                            <Label.FontSize>
                                                <OnIdiom x:TypeArguments="x:Double">
                                                    <OnIdiom.Phone>16</OnIdiom.Phone>
                                                    <OnIdiom.Tablet>32</OnIdiom.Tablet>
                                                    <OnIdiom.Desktop>16</OnIdiom.Desktop>
                                                </OnIdiom>
                                            </Label.FontSize>
                                            <Label.GestureRecognizers>
                                                            <TapGestureRecognizer
                                                                Tapped="LoadChapter"
                                                                CommandParameter="{Binding .}"
                                                                NumberOfTapsRequired="1">
                                                            </TapGestureRecognizer>
                                                        </Label.GestureRecognizers>
                                        </Label>
                                    </StackLayout>
                                </DataTemplate>
                                </BindableLayout.ItemTemplate>
                               
                            </StackLayout>
                        </DataTemplate>
                    </Expander.ContentTemplate>
                </Expander>
            </DataTemplate>
        </BindableLayout.ItemTemplate>
    </StackLayout>
</StackLayout>

xaml.cs

//expander child tapping gesture
public void LoadChapter(object sender, EventArgs args)
{
    var view = (View)sender;
    var model = view.BindingContext as ContentList;

    Debug.WriteLine("title:>>" + model.title);
}