Xamarin Forms:如何将项目列表设置为 Expander Child? [英] Xamarin Forms: How to set a list of items as the Expander Child?
本文介绍了Xamarin Forms:如何将项目列表设置为 Expander Child?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用 Expander 来显示一本书的单元和章节.我可以将单元显示为 Expander.Header，但单元下的章节又是一个列表.我试过如下，但无法在 UI 上查看章节.
XAML
<BindableLayout.ItemTemplate><数据模板><扩展器ExpandAnimationEasing="{x:Static Easing.CubicIn}";ExpandAnimationLength=500"CollapseAnimationEasing="{x:Static Easing.CubicOut}";CollapseAnimationLength=500"><Expander.Header><堆栈布局方向＝水平"><标签Text="{Binding unit.title}";TextColor=黑色"HorizontalOptions=开始"HorizontalTextAlignment=开始"字体大小=18"VerticalTextAlignment=居中"VerticalOptions=CenterAndExpand"></标签></StackLayout></Expander.Header><Expander.ContentTemplate><数据模板><堆栈布局方向＝水平"><标签HorizontalOptions=开始"Text="{Binding contentList.title}";VerticalOptions=CenterAndExpand"字体大小=16"TextColor=黑色"></标签></StackLayout></数据模板></Expander.ContentTemplate></扩展器></数据模板></BindableLayout.ItemTemplate></StackLayout> 我的 JSON 数据格式:
bookContentList":[{单位":{标题":第一单元:启示录"},内容列表":[{标题":单元 1:预览"，嵌入代码":c1"},{标题":第一章:上帝对万物的计划"，嵌入代码":c2"},{标题":第2章:与上帝同在"，嵌入代码":c3"},{标题":第3章:神灵存在的迹象"，嵌入代码":c4"}]},{单位":{标题":单元 2:三位一体"},内容列表":[{标题":单元 2:预览"，嵌入代码":c5"},{《标题》:《第四章:三位一体的奥秘》，嵌入代码":c6"},{标题":第5章:祷告和敬拜"，嵌入代码":c7"},{《书名》:《第六章:德行》，嵌入代码":c8"}]}]视图模型
私有列表_所有项目;公共列表所有项目{得到{ 返回 _allItems;}放{_allItems = 值；OnPropertyChanged("AllItems");}}//设置数据AllItems = bookDetails.bookContentList; 我的问题是每个单元下的章节没有显示在 UI 上.我已在
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 unit is again a list. I tried like below but chapters are not able to view on 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>
My JSON Data format:
"bookContentList": [
{
"unit": {
"title": "Unit 1: Revelation"
},
"contentList": [
{
"title": "Unit 1: Preview",
"embedCode": "c1"
},
{
"title": "Chapter 1: God'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;
My problem is chapters under each unit is not showing on the UI. I have uploaded a sample project here for the easy reference.
Also I need to know how to get the complete details of selected chapter?
解决方案
There are two mistaken in your code .
Incorrect binding path .
Miss
BindableLayout.ItemTemplateinside 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);
}
这篇关于Xamarin Forms:如何将项目列表设置为 Expander Child?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
