Xamarin Forms iOS 中的嵌套 Bindablelayout ItemSsource

Question

我有一个设置了可绑定布局 ItemSource 的 StackLayout，stacklayout 的数据模板包含一个 Expander 视图（在 Xamarin Forms 4.7 中可用），我的要求是单击 Expander 标题，动态数据应加载并显示在 Expander 正文中，为此，我正在使用一个 pancakeview，它设置了另一个 Bindable Layout ItemSource，这在后面的代码中处理。

基本上我想要实现的是有一个列表，它会在打开的页面上填充，单击任何项​​目时它应该展开并显示其他数据，这些数据是在 Expander 标题单击时从服务器加载的。

实现这一目标的最佳方法是什么？以下是我到目前为止所做的：

<StackLayout x:Name="StudentsStack" BindableLayout.ItemsSource="{Binding StudentData}" Margin="10" 
                             HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
<BindableLayout.ItemTemplate>
    <DataTemplate>
        <Expander Tapped="StudentsClicked" ExpandAnimationEasing="{x:Static Easing.CubicIn}" ExpandAnimationLength="200" CollapseAnimationEasing="{x:Static Easing.CubicOut}" CollapseAnimationLength="200" HorizontalOptions="FillAndExpand">
            <Expander.Header>
                <Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" RowDefinitions="*" ColumnDefinitions="*">
                    <local:MarqueeLabel FontAttributes="Bold" FontSize="20" HorizontalOptions="Start" Text="{Binding Name}" TextColor="Black" XAlign="Start" FontFamily="googlesansbold"/>
                    <Label IsVisible="False" Text="{Binding Id}"/>
                </Grid>
            </Expander.Header>
            <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand">
                <pv:PancakeView BindableLayout.ItemsSource="{Binding StudentDetails}" HeightRequest="30" Margin="5" Padding="5" HasShadow="False"  HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" CornerRadius="5"  BackgroundColor="White">
                    <pv:PancakeView.Shadow>
                        <pv:DropShadow Opacity="0.1" />
                    </pv:PancakeView.Shadow>
                    <BindableLayout.ItemTemplate>
                        <DataTemplate>
                            <Grid Margin="0" ColumnDefinitions="*,*" RowDefinitions="*" HorizontalOptions="FillAndExpand">
                                <Label Grid.Row="0" Grid.Column="0" FontAttributes="Bold" FontSize="14" HorizontalOptions="Center" Text="{Binding rank}" TextColor="Black" XAlign="Start" FontFamily="googlesansbold" VerticalTextAlignment="Center" Padding="5,0,0,5"/>
                                <Label Grid.Row="0" Grid.Column="1" FontAttributes="Bold" FontSize="14" HorizontalOptions="Center" Text="{Binding address}" TextColor="Green" XAlign="Start" FontFamily="googlesansbold" VerticalTextAlignment="Center" Padding="5,0,0,5"/>
                            </Grid>
                        </DataTemplate>
                    </BindableLayout.ItemTemplate>
                </pv:PancakeView>
            </StackLayout>
        </Expander>
    </DataTemplate>
</BindableLayout.ItemTemplate>

在后面的代码中

public ObservableCollection<Student> StudentData{ get; } = new ObservableCollection<Student>();
public ObservableCollection<Detail> StudentDetails{ get; } = new ObservableCollection<Detail>();

在页面构造函数中，我正在这样做

BindingContext = this;

对于正在填充的“StudentData”列表，绑定工作正常，但是在展开的扩展器上生成额外数据的最佳方法是什么？

Answer 1

你可以在 List 中使用 List 。

在班学生

public class Student
    {
        public ObservableCollection<Detail> StudentDetails { get; } 

        public Student (ObservableCollection<Detail> studentDetails)
        {
            StudentDetails = studentDetails;
        }

        //...other properties
    }

在后面的代码中

StudentData = new ObservableCollection<Student>(){

 new Student(new ObservableCollection<Detail>()){//...other properties},
 //...

};