Xamarin.forms Xamarin表单:如何将项目列表设置为扩展子项?

Xamarin.forms Xamarin表单:如何将项目列表设置为扩展子项?,xamarin.forms,expander,Xamarin.forms,Expander,我正在使用扩展器来显示一本书的单元和章节。我可以将单位显示为Expander.Header,但单位下的章节还是一个列表。我试着像下面一样,但章节无法在UI上查看 XAML <StackLayout BindableLayout.ItemsSource="{Binding AllItems,Mode=TwoWay}"> <BindableLayout.ItemTemplate> <DataTemplate>

我正在使用
扩展器
来显示一本书的单元和章节。我可以将单位显示为
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>
视图模型

private List<BookContentList> _allItems;
public List<BookContentList> AllItems
{
    get
    { return _allItems; }
    set
    {
        _allItems = value;
        OnPropertyChanged("AllItems");
    }
}
//setting data
AllItems = bookDetails.bookContentList;
private List\u allItems;
公共列表所有项目
{
得到
{return\u allItems;}
设置
{
_allItems=值;
不动产变更(“AllItems”);
}
}
//设置数据
AllItems=bookDetails.bookContentList;
我的问题是每个单元下的章节没有显示在UI上。我上传了一个示例项目以供参考。


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

使用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>
                      


希望这能奏效

您的代码中有两个错误

  • 绑定路径不正确

  • 缺少内部stackLayout中的
    BindableLayout.ItemTemplate

  • 将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>
    

    @khushal Mistry:最好在代码中留下简短的描述-例如,为什么您的解决方案有效和/或OP可以做得更好等等。代码不正确,StackLayout应该有
    BindableLayout.ItemTemplate
    来定义datatemplate。请检查我在方法
    LoadChapter
    中的修改。我有几乎相同的示例,但它无法在Expander标头中绑定AllItems子项。它说,绑定:在ViewModel上找不到属性“unit.Title”。
    <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>
    
    //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);
    }