Xamarin Forms：如何将项目列表设置为 Expander Child？

Question

我正在使用 Expander 来显示一本书的单元和章节。我可以将单位显示为 Expander.Header，但单位下的章节又是一个列表。我试过如下，但无法在 UI.

上查看章节

XAML

<StackLayout 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>
                    <StackLayout
                        Orientation="Horizontal">
                        
                        <Label 
                            Text="{Binding unit.title}"
                            TextColor="Black"
                            HorizontalOptions="Start" 
                            HorizontalTextAlignment="Start"
                            FontSize="18"
                            VerticalTextAlignment="Center"
                            VerticalOptions="CenterAndExpand">
                        </Label>
                    </StackLayout>
                </Expander.Header>
                <Expander.ContentTemplate>
                    <DataTemplate>
                        <StackLayout 
                            Orientation="Horizontal">
                                
                            <Label
                                HorizontalOptions="Start"
                                Text="{Binding contentList.title}"
                                VerticalOptions="CenterAndExpand"
                                FontSize="16"
                                TextColor="Black">
                            </Label>
                        </StackLayout>
                    </DataTemplate>
                </Expander.ContentTemplate>
            </Expander>
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</StackLayout>

我的JSON数据格式：

"bookContentList": [
        {
            "unit": {
                "title": "Unit 1: Revelation"
            },
            "contentList": [
                {
                    "title": "Unit 1: Preview",
                    "embedCode": "c1"
                },
                {
                    "title": "Chapter 1: God&#39;s Plan for all creation",
                    "embedCode": "c2"
                },
                {
                    "title": "Chapter 2: Made to be with god",
                    "embedCode": "c3"
                },
                {
                    "title": "Chapter 3: Signs of gods presence",
                    "embedCode": "c4"
                }
            ]
        },
        {
            "unit": {
                "title": "Unit 2: Trinity"
            },
            "contentList": [
                {
                    "title": "Unit 2: Preview",
                    "embedCode": "c5"
                },
                {
                    "title": "Chapter 4: The mystery of the trinity",
                    "embedCode": "c6"
                },
                {
                    "title": "Chapter 5: Prayer and Worship",
                    "embedCode": "c7"
                },
                {
                    "title": "Chapter 6: Life of Virtue",
                    "embedCode": "c8"
                }
            ]
        }
    ]

ViewModel

private List<BookContentList> _allItems;
public List<BookContentList> AllItems
{
    get
    { return _allItems; }
    set
    {
        _allItems = value;
        OnPropertyChanged("AllItems");
    }
}
//setting data
AllItems = bookDetails.bookContentList;

我的问题是 UI 上没有显示每个单元下的章节。我已经上传了一个示例项目 here 以供参考。

我还需要知道如何获取所选章节的完整详细信息？

Answer 1

在内部使用可绑定布局 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>

希望这有效！

Answer 2

你的代码有两个错误。

绑定路径不正确。
想念BindableLayout.ItemTemplate里面的stackLayout.

用

替换你的xaml

<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);
}

Xamarin Forms：如何将项目列表设置为 Expander Child？

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

xamarin.forms

expander